Restrictions and solutions on CSS style sheets by IE

There are four common ways to associate HTML documents with CSS:

Mark with link

<Link rel = "stylesheet" type = "text/css" href = "sheet.css"/> use the style element

<Style type = "text/css">
Body {background: # fff ;}
H1 {font-size: 2em ;}
</Style> use the @ import command

<Style type = "text/css">
@ Import url(sheet1.css );
@ Import "sheet2.css ";
</Style> inline style)

<P style = "color: # f00;"> This Is a red word </p> in practice, inline styles using the style attribute are not recommended, XHTML1.1 has set its standard as not recommended, because it is very simple that this method is not much better than font marking, which weakens the advantage of CSS's centralized control of the appearance of the entire document. The first three methods use link tag and style tag, which have the following restrictions in IE (including IE6, IE7, and IE8 beta1:

Only the first 31 links or CSS associated with style labels can be applied in this document.

Starting from 32nd, all associated CSS tags will be invalid. Internet Explorer official documentation All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer also mentions this restriction, including in use.. xml files also have this restriction. However, it seems that the number of errors is incorrect. See in IE:

Example 1: 34 style labels are applied simultaneously
Example 2: Two style tags and 34 link tags are applied simultaneously.
A style tag is only valid for the first 31 @ import commands.

Ignore from 32nd @ import commands. See:

Example 3: 34 @ import commands are used in a style tag.

A css file is only valid for the first 31 @ import commands.

Ignore from 31st @ import commands. See:

Example 4: Use link flag to introduce a css file using 34 @ import commands
Example 5: Use style labels to introduce a css file with 34 @ import commands
Example 6: Use the link and style labels to introduce a css file that uses more than 31 @ import commands.
A css file cannot exceed 288kb? The number of separators in each style label or css file in IE cannot exceed 4095

This message comes from Internet Explorer CSS File Size Limit.

@ Import: the number of layers under the command cannot exceed 4

When the css file is introduced using the @ import command in IE, the layer 5th fails. This restriction comes from Cascade limit via @ import rule. In fact, the browser does not fully support multi-layer nesting, so even if you have to use the @ import command to introduce CSS files, there should be no more than two layers.

In most cases, the restrictions on CSS are not met by IE. Even in the case of the best solution, the CSS file and response tag should be merged manually or through the backend program, minimizing the number of http requests is the first principle to optimize page rendering.

In IE, you can use the document. styleSheets object (supported by Firefox, Opera9, and Safari3.1) to modify the values of the inline and embedded styles. This object is only available when the document contains style or link elements. In fact, the document. styleSheets. length indicates that the maximum value of this object in IE is 31. The following describes how to use Javascript to combine link and style tags to solve the restrictions in 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 <32 |! Asheet1_02.16.css Text ){
// Document.styleSheets.css Text only supports IE
Return;
}
Var aCssText = [], aCloneLink = [];
// Save the style in the style label and delete the label, but keep the first
// Because the return value of the getElementsByTagName method is nodeList, the reverse order is used in the cycle when the object 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 link tags in IE can get stylesheet.css Text through stylesheet.css Text.
// Unable to obtain and copy to 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.css Text );
} Else {
ACloneLink. push (o. cloneNode (true ));
}
If (I> 0 ){
O. parentNode. removeChild (o );
}
}
}
Var oHead = document. getElementsByTagName ('head') [0];
// With the previous deletion, only two links or styles can be marked at most.
// Activate the styleSheet attribute by adding a link node to obtain the style.
For (var I = aCloneLink. length-1; I>-1; -- I ){
Var o = aCloneLink [I];
OHead. appendChild (o );
ACssText.push(o.styleSheet.css Text );
OHead. removeChild (o );
}
// Copy all styles to the first tag
Asheet1_02.16.css Text + = aCssText. join ('');
} The above is just a simple and rough solution. For demonstration, see examples 1 and 2. The improvements are as follows:

Media is not taken into account. If multiple media files are included, the effects of link-marked rel = "alternate stylesheet" are not considered. However, we recommend that you use the @ media command to write the corresponding style in the same file to reduce the number of HTTP connections.
The @ import command has not been fixed for 31 times. In fact, you can extract its href value and activate it. However, in actual application, we recommend that you replace the @ import command with the link mark, because in IE, the @ import command is equivalent to the link mark at the bottom of the document, this will cause no style issues instantly when loading IE5/6 pages. The learning name is "Flash of Unstyled Content" (FOUC for short, of course, you can avoid this bug by placing a link or script element in the document header.
Generally, many link or style labels on the page may be the same. You can remove the same items before aCssText merge to reduce the amount of code.
If you do not use an existing style element in the DOM to add the style code directly through the cssText attribute, you can create a new style element to add it, be sure to add the newly created style element to the DOM first, and then add the style code through the cssText attribute. On the other hand, the style code it adds seems to be parsed by the style parser of IE6 before it is added! Both imporant and hack will be invalid. See example 7. It is not recommended to add a new style by adding a new style element, so that it is easy to meet the restrictions of IE.