Early results on injecting style sheets into DOM

[Eli Cochran]

Background:
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  
about.

Early results:
I'm still in the midst of my tests on injecting CSS style sheets into  
the head using Javascript.

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  
DOM. Sweet!

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...

- Eli
. . . . . . . . . . .  .  .   .    .      .         .              .                     .

Eli Cochran
user interaction developer
ETS, UC Berkeley


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20081010/719fb6c9/attachment.htm>