Early results on injecting style sheets into DOM

[Antranig Basman]

Eli - this is really fantastically useful research, and addresses a number of
crucial issues that we are worried about. It, correct me if I am wrong, looks
"a bit grim" for any possibly "subtle" usage of CSS in this model - is it
fair to say that one must expect that the effects of CSS injection to be
treated as if they were essentially equivalent to styling rules with
!important written on them? Or is it even more complex than that.

Jacob - does it look like our proposed skinning system will be able to function
in such an environment, or will we have to insist that any users of our
style of ruleset have all of their CSS sheets physically written into the 
document by the server?

Eli - would it be possible to detect if there is any difference in behaviour
from the @import versus the <link style of referencing CSS?

Look forward to the results of your future testing. Should we create an area
in our Confluence where we can have a "quirksMode" like "scoreboard" of the
different browsers under different situations?

Marvellous stuff,
Boz.


Eli Cochran wrote:
> 
> 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...