As part of the Fluid Skinning System project and the Transformable 2 project, Fluid is looking at ways to dynamically inject style sheets or otherwise change styles.
- inject our styles into pages that we otherwise know very little about
- change styles on the fly as part of transforming the page for accessibility or user preference.
This page covers various ways to dynamically change styling on a web page at run time and the various limitations of method based on testing and research.
Some things to test:
- adding a <link> tag to the HEAD
- adding an <import> tag to HEAD
- the effects of !important on CSS hierarchy
Preliminary Test Results
The good news:
Using a very simple technique of injecting a link tag (
The bad news:
Only Firefox3 and Safari3 seem to respect the CSS hierarchy.
The order in which style sheets and styles are loaded in the HEAD of the document determines which styles have precedence over other styles. The styles loaded later have precedence over the styles loaded earlier. If the first style sheet says that
<strong> tags are blue. And the next style sheet says that all
<strong> tags are red then all the
<strong> tagged content should be red.
And it does with Firefox3 and Safari3. You can inject the new stylesheet anywhere in the HEAD; beginning, end, middle and Firefox3 and Safari3 will treat the rules in the injected stylesheet as if they had been loaded from the start. So, using our colored strong tags example above, if you append the
strong_red.css file to
HEAD at run-time, and then prepend the
strong_blue.css file, the
<strong> text on the page will stay red. Did you follow that? Even though you added the stylesheet specifying the blue text after the stylesheet that specifies the red text, you placed the stylesheet higher in the head so the red styling takes precedence.
But in IE, whichever file gets loaded last (in time) gets precedence, the <strong> text will turn blue.
Interestingly, if you inspect the DOM as reported to Debugbar from IE, the stylesheets are getting loaded into the DOM in the correct order, they just aren't being parsed correctly.
This is still a technique that may be useful to us, but one of the things that we could not do is inject a CSS reset before all the other style sheets. We would then crush any subsequent styling.
I still want to test what happens if I inject stylesheets after the
HEAD loads but before the BODY loads and a few other things.