Early results on injecting style sheets into DOM

[Noah Botimer]

Agreed.  This is awesome knowledge to capture.  I've been generally  
terrified of trying to adjust stylesheets on the fly, and it forces  
me to pre-load and disable a bunch of junk I don't want on that  
rendering.  The other problem with that is that the container has to  
know the contents: a classic, obnoxious dependency.  All of your work  
is well appreciated!

Thanks,
-Noah

On Oct 10, 2008, at 5:44 PM, Antranig Basman wrote:

> 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...
> _______________________________________________
> fluid-work mailing list
> fluid-work at fluidproject.org
> http://fluidproject.org/mailman/listinfo/fluid-work
>
>