Embedding extra styles with noscript

is this red? it should be.

Answer by renoirb for Embedding extra styles with noscript

Note about my answer

I wrote this post after realizing it was dating from 2008

Since I had a similar problem, I thought continuing answering with a current answer.

My actual answer

Like Boby Jack said, style tag is not allowed in body. I myself did the exact thing as you (Joshua) about it. But Jack's "progressive enhancement" made me without non-abstract solution but then I realized a solution that I did not find answers on this thread.

It all depends of your styling structure.

My suggestion is to plainly use something like modernizr in the very begining of the head and use Paul Irish's HTML5Boilerplate recommendations.

Long story short

1. Html tag has a class attributes with no-js
2. Head tag includes a first modernizr javascript as the first
3. CSS has the element (.hide-me) with display:none on its proper place
4. Then .no-js .hide-me { display:block }

In detail

See Paul Irish's HTML5boilerplate, and adapt it to XHTML if you want :)

1. Html has a class attributes with .no-js

quoting from html5boilerplate.com

2. Head tag includes a first modernizr javascript as the first

Modernizr execution will build html attributes with what's supported.

Will build something similar to this:

Note this is from Google Chrome modernizr tests.

The first is js but if Modernizr did not run (no javascript) the no-js would stay there.

3. CSS has the element (.hide-me) with display:none on its proper place

... you know the rest :)

Answer by koppor for Embedding extra styles with noscript

In case XHTML is used, the trick is to use two CSS files. One global one and one js-one tweaking the global one for JavaScript-enabled browsers.

style.css:

.hidden {  }  

style-js.css:

.hidden {    visibility:hidden;  }  

test.html:

                            
      
Only displayed at JavaScript enabled browsers