CSS Order and Internet Explorer

Question

I am having trouble loading dinamycally CSS in IE.

I have different CSS files, and I need to add these files to my head in a specific order. For example, I have a client file that should always have high priority, and I should include it at the beginning when reading client information.

So, I have something like:

< head > < link rel: "stylesheet", type: "text/css", href: "StartingCSS.css"> < link rel: "stylesheet", type: "text/css", href: CSSclient.CSS> < /head > 

At some point, I should include another css file specific to another module in my head, and using the prototype and JavaScript, I will include this file first in my head, so I have something like this:

 < head > < link rel: "stylesheet", type: "text/css", href: "MyModule.css"> < link rel: "stylesheet", type: "text/css", href: "StartingCSS.css"> < link rel: "stylesheet", type: "text/css", href: CSSclient.CSS> < /head > 

In a regular browser, such as chrome or FF, the CSSclient file still has the highest priority because it is the last in the document, but in IE the last inserted file gets power.

Anyone have a great idea for me? :)

Thanks a lot Jose

Answer 1

The loading order of your CSS files has very little effect on how styles are applied. What styles apply to a particular element is determined by the specifics of the selectors used in the CSS rule. Higher specificity overrides lower specificity, even if a lower specificity style is announced later.

Specificity can be considered as a combination of four digits in the form (a, b, c, d), where a has priorities b and b over c and c over d. Thus, (0,0,0,2,2) has a higher specificity than (0,0,0,1) and (0,0,1,0), has a higher specificity than (0,0,0 , 2).

The style declaration order (i.e., the style sheet loading order) is important only if the selectors are used with exactly the same specificity.