Embedding extra styles with noscript

Question

I have an XHTML strict page that has an invisible div that is controlled by Javascript. The div is set to transparent and visible by the script and a mouseover event to make

Answer 1

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 :)