There are 4 common ways to associate HTML documents with CSS:
Using the link tag
<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>
Using the @import directive
<style type= "Text/css" >
@import URL (sheet1.css);
@import "Sheet2.css";
</style>
Use the inline style of the style property (inline style)
<p style= "color: #f00;" > This is the red word </p>
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:
Example 1:34 Style tags apply simultaneously
Example 2:1 style tags and 34 link tags apply simultaneously
A style tag has only the first 31 @import instructions valid for use.
Ignored from the 32nd @import instruction. Please see:
Example 3: Use the @import instruction in a style tag with 34 times.
A CSS file has only the first 31 @import instructions valid for application.
Ignored from the 31st @import instruction. Please see:
Example 4: Using the link tag to introduce a CSS file with a 34-@import instruction
Example 5: Introducing a CSS file with a style tag that uses 34 @import instructions
Example 6: Using the link and style tags to introduce a CSS file that uses more than 31 @import instructions, respectively
Can not exceed 288kb of a CSS file?
This message comes from Internet Explorer CSS File Size Limit.
Cascading restrictions under @import instruction cannot exceed 4 levels
The 5th layer will fail when the CSS file is introduced via the @import instruction under IE. This restriction comes from cascade limit via @import rule. In fact, because the browser to multi-layer nesting support is not perfect, so even if you have to use the @import directive to introduce CSS files, do not exceed 2 layers.
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, demo please see Example 1 and 2, can improve the place as well as:
Without considering media this attribute, if there are multiple media should be merged separately, of course, not 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.
There is no solution to the problem of the @import instruction 31 time limit, in fact, it can extract its href value and then activate the processing. But the actual application in the proposed link tag to replace the @import instruction, should be in IE @import instructions and the link tag written at the bottom of the document, will lead to the IE5/6 page load instant without style problems, learn the name "Flash of unstyled Content "(Fouc) bug, of course, you can avoid this bug by placing a link or script element in the header of the document.
Generally speaking, all of the pages appear a lot of link or style tags are likely to be many of the same, you can remove the same items before Acsstext merge, reduce the amount of code.
If you do not add style code directly through the Csstext property to a STYLE element that already exists in the DOM, but instead create a new style element to add, be careful 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 appears to have been parsed by the IE6 style parser before it is added, so that both!imporant and hack will fail. Take a look at example 7. Adding new styles by adding new style elements is not recommended, which makes it easy to achieve IE's limitations.
