Load DOM before css?

Question

My jQuery code sets the height of an element to 0px as soon as the page loads, then animates it to 500px.

In my CSS, this element is already set to 500px (in case anyone has javascript turned off).

I tried 'DEFER' on the tag where I link to the stylesheet so that the CSS loads in last of all, but that causes a blank white page to show up between navigating through pages - which I don't want, because I lose the smooth page transition effects that I am after.

Is there a way that I can set the height in the CSS to 0px and IF javascript IS turned off, have it set to 500px, perhaps? :\ That's what I'm after, in effect.

Any ideas?

Many thanks for your help.

Answer 1

If you're married to that effect, I would include a noscript.css file. Do something like this in your :

<noscript>
    <link rel="stylesheet" type="text/css" href="noscript.css" />
</noscript>

Include any CSS there that you want to be loaded in the absence of javascript.