Geek Answers Handbook

How to evaluate LINK and STYLE elements in HEAD

It seems to me that all modern browsers, including the latest versions of Chrome, Safari and FireFox (possibly from the very beginning), respect the order of the style and link elements in the head ; even when dynamically creating and adding at runtime using JavaScript.

For example, here red.css and green.css both indicate the background color of the body; the first sets the background color of the body, the second sets it green:

 <head> <!-- other code --> <link rel="stylesheet" href="red.css" type="text/css"> <link rel="stylesheet" href="green.css" type="text/css"> </head>

As a result, the background color of the body is green, since green.css is placed after red.css and evaluated afterwards.

the ordering of elements seems to be preserved even when link elements are created dynamically and inserted into the head. For example, dynamically creating a link element that loads green.css will only set the background color of the body to green if it is inserted after red.css .

However, the only browser that doesn't seem to respect this is Internet Explorer (at least IE 7-9 doesn't work). It seems that with IE, the last added link or style element is evaluated on top of everything that has already been rated; it does not take into account the order of the tree when added at runtime.

Is adherence to custom order behavior or is it an Internet Explorer bug? How to fix it for Internet Explorer?

The idea I came up with is to dynamically remove all existing link and style elements and add them back to the same tree order - this is the order I want them to be evaluated.

Any understanding would be greatly appreciated.

UPDATE

The following is an example of more detailed code:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="red.css" type="text/css"> <!-- sets red --> </head> <body> <script type="text/javascript"> setTimeout(function() { // IE7-8 does not support referencing document.head var head = document.getElementsByTagName("head")[0]; var link = document.createElement("link"); link.setAttribute("href", "green.css"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); // All modern browesers will leave the background // color red, except IE will set it green. head.insertBefore(link, head.firstChild); // Now comment out the above line and try adding the link // using this instead. All modern browsers (including IE) // will set the body background color green after two seconds. // IE seems to always evaluate the last dynamically added link. // head.appendChild(link); }, 2000); </script> </body> </html>

Content red.css :

 body { background-color: red; }

Content green.css :

 body { background-color: green; }
+4
source share
3 answers

What if, instead of re-adding stylesheets, you have to switch the attribute that will force re-rendering? For example, you can try iterating over all link / style elements, set the media attribute to none and then set it to the original again.

+3
source

You do not give us details about what problem you are really trying to solve by inserting style sheets, but it is likely that there are simply better ways to solve the real problem, rather than dynamically inserting the style sheet into a specific one in the list.

For example, you can have either style sheets (slightly modified to include another class), or adding or removing one class in the <body> , you can trigger a change from green to red or vice versa / vice versa.

+1
source

What you mean is CASCADING, a very important function of the work of CASCADING (CSS) styles. All browsers work this way, including IE. If they were not cascaded, this would be a serious problem.

However, there are some styles that do not work in some versions of IE - perhaps what you are looking at does not work properly, as opposed to cascading, which does not work properly. Do you want to publish a specific example?

0
source

More articles:


All Articles