IE restrictions on the introduction of CSS style sheets to web pages

1. Use link tag

2. Use the STYLE element

3. Use @import instruction

4, using the Style property inline style (inline style)

It's a red word.

In practice, inline styles using the style attribute are deprecated, and XHTML1.1 has set its standard to deprecated, simply because it is not much stronger than the font tag, weakening the benefits of CSS centralizing control over the appearance of the entire document.

The first 3 ways take advantage of link tags and style tags, with 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 with the 32nd, the CSS associated with its tag will be invalidated. IE's Official document all style tags after the the "a" style tags on a HTML page are not applied Internet Explorer also mentions this restriction, including in the use of. xsl The. xml file also has this limitation. But it seems to have written the wrong number. Please look at ie:

A style tag has only the first 31 @import instructions valid for use.

Ignored from the 32nd @import instruction.

A CSS file has only the first 31 @import instructions valid for application.

Ignored from the 31st @import instruction.

Can not exceed 288kb of a CSS file?

This message comes from Internet Explorer CSS File Size Limit.

IE restrictions on CSS in most cases will not be encountered, even if the best solution should be manual or through the back-end program to the CSS file and response markup to merge, minimize the number of HTTP requests is optimized page presentation first principle.

In IE, values for inline and embedded styles can be modified by Document.stylesheets objects (Firefox, Opera9, and Safari3.1). This object is available only when the document contains a style or link element, but in document.styleSheets.length you can see that the maximum value for IE is 31. The following is the use of JavaScript to merge link and style tags to address the limitations of 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 style tag with the styles in it, and then delete the label, but keep the first

Because the value returned by the getElementsByTagName method is NodeList, the loop is reversed in reverse when 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);

}

}

In IE only the link tag within 31 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 have up to 2 left

To get a style by activating its Stylesheet property by adding the link node again

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 (");

}

The above is just a simple rough solution that can be improved in places as well:

1, do not consider media this attribute, if there are more than one media should be merged, of course, not to consider the link tag rel= "Alternate stylesheet" impact. But I also suggest that the corresponding style should be written in the same file with the @media instruction, at least reduce the number of HTTP connections.

2, does not solve the @import instruction 31 times limit problem, actually may extract its href value then carries on the activation processing. However, the actual application in the proposed link tag to replace the @import instruction, should be in IE in the @import instruction is equivalent to the link tag written at the bottom of the document.

3, the General page of all the emergence of a large number of link or style tags are likely to be many of the same, you can remove the same items before the acsstext merge, reduce the amount of code.