Analysis and solutions to IE's restrictions on CSS style sheets_Experience exchange

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

Use link tags


Use the style element


Inline style using the style attribute (inline style)

This is red text

In actual applications, the use of inline styles using the style attribute is not recommended. XHTML1.1 has standardized its use as not recommended. The reason is very simple. This method is not much better than the font tag and weakens the centralized control of CSS. Advantages of overall document appearance. The first three methods use link tags and style tags, and have the following restrictions in IE (including IE6, IE7 and IE8 beta1):

Only the CSS associated with the first 31 link or style tags in the document can be applied.

Starting from the 32nd one, the CSS associated with its tag will be invalid. IE's official documentation All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer also mentions this limitation, including the use of .xsl .xml files also have this limitation. But it seems that the wrong quantity was written. Please see it in IE:

Example 1: 34 style tags are applied at the same time
Example 2: 1 style tag and 34 link tags are applied at the same time
A style tag only has the first 31 @import instructions Effective application.

Ignore starting from the 32nd @import directive. Please see:

Example 3: Using the @import directive 34 times in a style tag.

Only the first 31 @import directives of a css file are effectively applied.

Ignore starting from the 31st @import directive. Please see:

Example 4: Use the link tag to introduce a css file that uses the @import directive 34 times
Example 5: Use the style tag to introduce a css file that uses the @import directive 34 times
Example 6: Use link and style tags to introduce a CSS file that uses the @import directive more than 31 times.
A CSS file cannot exceed 288kb?

This news comes from Internet Explorer CSS File Size Limit.

The cascading limit under the @import directive cannot exceed 4 layers.

When introducing css files through the @import directive under IE, the fifth layer will be invalid. This limit comes from Cascade limit via @import rule. In fact, due to the imperfect support of browsers for multi-level nesting, even if you have to use the @import directive to introduce CSS files, do not exceed 2 levels.

IE's restrictions on CSS will not be encountered in most cases. Even if you encounter the best solution, you should merge the CSS files and response tags manually or through a back-end program. , minimizing the number of http requests is the first principle of optimizing page rendering.

In IE, the values ​​of inline and embedded styles can be modified through the document.styleSheets object (supported by Firefox, Opera9 and Safari3.1). This object is only available when the document contains style or link elements. In fact, using document.styleSheets.length you can see that the maximum value under IE is 31.The following is using Javascript to merge link and style tags to solve the limitations 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 //document.styleSheets.cssText is only supported by IE
return;
}
var aCssText = [],aCloneLink = [];
//Save the style in the style tag, and then delete the tag, but keep the first one
//Because the value returned by the getElementsByTagName method is nodeList, the reverse order is used when deleting
for(var i =aStyle.length-1;i>-1;–i){
var o = aStyle[i];
aCssText.push(o.innerHTML);
if(i>0){                o.parentNode.removeChild(o); Get copied to an array aCloneLink
for(var i=aLink.length-1;i>-1;–i){
var o = aLink[i];
if(o.getAttribute && o.getAttribute('rel')==='stylesheet'){
                                                                                                                                         aCloneLink .push(o.cloneNode(true));
                                                                              .removeChild(o);
                                                                                                                                                                                                                                                                                                ; There are only 2 style tags left at most
//Activate its styleSheet attribute by re-adding the 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.cssText);
oHead.removeChild(o);
}
//Copy all styles to the first tag
aSheet[0].cssText = aCssText.join(”);
}
The above is just a simple and rough solution , please see Example 1 and Example 2 for demonstration. The areas that can be improved are:

The media attribute is not considered. If there are multiple media, they should be merged separately. Of course, the rel="alternate stylesheet" of the link tag is not considered. "The impact brought about. But I recommend writing the corresponding styles in the same file through the @media directive, which can at least reduce the number of HTTP connections.
It does not solve the problem of the 31 times limit of the @import directive. In fact, you can extract other The href value is then activated. However, in actual applications, it is recommended to use the link tag to replace the @import directive. This is because the @import directive in IE is equivalent to writing the link tag at the bottom of the document, which will cause the IE5/6 page to load instantly. Unstyled problem, the scientific name is "Flash of Unstyled Content" (abbreviated as FOUC) bug. Of course, this bug can be avoided by placing a link or script element in the document header.
Generally speaking, there are a lot of "Flash of Unstyled Content" (FOUC) bugs in the page. There are probably many link or style tags that are the same. You can remove the same items before merging aCssText to reduce the amount of code.
If you do not use the existing style elements in the DOM to directly add style code through the cssText attribute, but create To add a new style element, be sure to add the new style element to the DOM first, and then add the style code through the cssText attribute. On the contrary, the style code it adds seems to be parsed by IE6's style parser before being added, so both the !imporant and the hack will be invalid. Please see Example 7. It is not recommended to add new styles by adding new style elements, as this can easily reach the limitations of IE.