There are 4 common ways to associate HTML documents with CSS:
Using the link tag
Using the STYLE element
Using the @import directive
Inline style using the Style property (inline style)
It's a red word.
In practice, inline styles using the style attribute are deprecated, and XHTML1.1 has made it a standard deprecated, for the simple reason that it is not much stronger than the font tag, which weakens the benefits of CSS's centralized control over the appearance of the entire document. The first 3 methods use the link tag and the style tag, with the following limitations in IE (including IE6, IE7, and IE8 beta1):
Only the first 31 link or style tags associated with the CSS in the document can be applied.
Starting with the 32nd, the CSS associated with its markup will be invalidated. IE official documents All style tags after the first of the style tags on a HTML page is not applied in Internet Explorer also mentions this limitation, including in the use of. xsl The. xml file also has this limitation. But it seems to have written the wrong number. Please see in IE:
Example 1:34 Style tags applied at the same time
Example 2:1 style tags and 34 link tags apply simultaneously
A style tag is only valid for the first 31 times @import instructions.
Start ignoring the 32nd @import instruction. Please see:
Example 3: Use the @import directive 34 times in a style tag.
A CSS file is only valid for the first 31 times @import instructions.
Start ignoring the 31st @import instruction. Please see:
Example 4: Introducing a CSS file using the link tag with a 34-time @import directive
Example 5: Introducing a CSS file with a style tag that uses 34 @import directives
Example 6: Using link and style tags to introduce a CSS file that uses more than 31 times @import instructions, respectively
Cannot exceed 288kb for a CSS file?
This message comes from the internet Explorer CSS File Size Limit.
Cascading limits cannot exceed 4 levels under @import instructions
When the CSS file is introduced via the @import command under IE, the 5th layer will fail. This restriction comes from cascade limit via @import rule. In fact, because the browser support for multi-layered nesting is not perfect, even if you have to use the @import directive to introduce CSS files, do not exceed 2 layers.
The limitations of IE on CSS will not be met in most cases, even if the best solution is to manually or through the backend program to the CSS file and the response of the markup to merge, the minimum number of HTTP requests is the first principle of optimizing page rendering.
In IE, you can modify the values of inline and embedded styles by Document.stylesheets objects (both Firefox, OPERA9, and Safari3.1 support). This object is only available when the document contains a style or link element, in fact, with document.styleSheets.length you can see that the maximum value of IE is 31. The following is the use of JavaScript to merge the link and style tags to address the restrictions under IE:
var fnmergestylesheet = function () {
if (!document.stylesheets) {
Return
}
var asheet = document.stylesheets,
Astyle = document.getElementsByTagName (' style '),
ALink = document.getElementsByTagName (' link ');
if (astyle.length + alink.length < | |!asheet[0].csstext) {
Document.styleSheets.cssText Only IE support
Return
}
var Acsstext = [],aclonelink = [];
Save the styles in the style tag, then delete the label, but leave the first one
Because the return value of the getElementsByTagName method is NodeList, the loop is reversed when it is deleted
for (Var i=astyle.length-1;i>-1;–i) {
var o = astyle[i];
Acsstext.push (o.innerhtml);
if (i>0) {
O.parentnode.removechild (o);
}
}
Only the link tag within 31 in IE can get the style through its stylesheet.csstext
Unable to get copied into an array aclonelink
for (Var i=alink.length-1;i>-1;–i) {
var o = alink[i];
if (O.getattribute && o.getattribute (' rel ') = = = ' stylesheet ') {
if (O.stylesheet) {
Acsstext.push (O.stylesheet.csstext);
}else{
Aclonelink.push (O.clonenode (true));
}
if (i>0) {
O.parentnode.removechild (o);
}
}
}
var ohead = document.getElementsByTagName (' head ') [0];
With the previous deletion, the top 31 link or style tags are left with a maximum of 2
Activate its Stylesheet property by re-adding the link node to get the style
for (var i = aclonelink.length-1;i>-1;–i) {
var o = aclonelink[i];
Ohead.appendchild (o);
Acsstext.push (O.stylesheet.csstext);
Ohead.removechild (o);
}
Copy all the styles to the first label
Asheet[0].csstext + = Acsstext.join (");
}
Above is just a simple rough solution, demo See Example 1 and Example 2, can improve the place also:
Without considering media as a property, if multiple media should be merged separately, it would not take into account the impact of the link tag's rel= "Alternate stylesheet". However, I would suggest that the corresponding style be written in the same file by the @media directive, at least the number of HTTP connections can be reduced.
There is no problem to solve the @import instruction 31 limit, in fact, you can extract its href value and then activate processing. However, the practical application in the proposed link tag to replace the @import directive, should be in IE in the @import directive and write the link tag at the bottom of the document, will cause the IE5/6 page load when no style problem, learning called "Flash of unstyled Content "(Fouc) bug, of course, you can avoid this bug by putting a link or script element in the header of the document.
In general, there are a lot of link or style tags in the page that are likely to have many of the same, you can eliminate the same items before Acsstext merge, reduce the amount of code.
If you don't use style elements that already exist in the DOM to add style code directly through the Csstext property, but instead create a new style element to add, be sure to add the new style element to the DOM first, and then add the style code through the Csstext property. Conversely, the style code it adds seems to be parsed by the IE6 style parser before it is added, so that both!imporant and hack will fail. Take a look at example 7. It is not recommended to add new styles by adding new style elements, which makes it easy to reach the restrictions of IE.
