Early results on injecting style sheets into DOM
eli at media.berkeley.edu
Fri Oct 10 20:24:14 UTC 2008
The skinning team is looking at ways to inject style sheets into DOM
at run-time as a way to transform pages that we don't know very much
I'm still in the midst of my tests on injecting CSS style sheets into
The good news is that it works on FF3 and Safari3 on the Mac and FF3,
IE6 and IE7 on Windows. After the page has loaded you can inject a
style sheets into the HEAD and the style changes are reflected in the
The bad news is that only FF3 and Safari seem to respect the CSS
hierarchy. Inject a style sheet that sets your text to blue after all
the other style sheets in the HEAD, and your text changes to blue, and
then if you inject a style sheet that changes all the text to red
before all the style sheets in the HEAD, your text stays blue. Which
is as it should be, since the blue sheet still comes after the red
sheet in the hierarchy. Happiness!
But under the IEs if you follow the same steps, all your text turns
red. Whatever styles get injected last, win, even if they were
injected higher up in the hierarchy. Sadness!
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.
More to come...
. . . . . . . . . . . . . . . . . . .
user interaction developer
ETS, UC Berkeley
-------------- next part --------------
An HTML attachment was scrubbed...
More information about the fluid-work