5

Possible Duplicate:
Embedding extra styles with noscript
Define css if javascript is not enabled

I am trying to define specific CSS styles only if Javascript is turned off. I am using:

<noscript>
    <style type="text/css">
    .needjs {display:none !important;}
    .mwnojs { margin-top: 40px !important; }
    </style>
</noscript>

When trying to validate the page source, I get the error "Element style not allowed as child of element noscript in this context".

So, how would I go about doing this while keeping my markup valid?

Improve this question
5
  • 2
    Yuck. Don't use !important. Commented Dec 19, 2012 at 21:51
  • 1
    modernizer - modernizr.com Commented Dec 19, 2012 at 21:51
  • What's wrong with !important? Commented Dec 19, 2012 at 21:53
  • 1
    None of the accepted answers to the "duplicates" address the html validation error. But, this (not accepted) answer is correct. Move your <noscript> to the <head>. A <style> block within a <noscript> is illegal in the <body>, but perfectly legal within the <head> as of HTML5. Commented Dec 19, 2012 at 22:01
  • @stefsull sums it up nicely: "Using !important in your CSS usually means you're narcissistic & selfish or lazy. Respect the devs to come..." More here Commented Dec 19, 2012 at 22:07

5 Answers 5

Reset to default
3

<noscript> tags are "body" tags and <style> tags are "head" tags. Therefor you get an error.

You should make non-javascript style default and then use js to change your style. See here for more details: https://stackoverflow.com/a/218917/1068167

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Seems very similar to this question

"To clear up the validation issue: noscript is only allowed in the body element, style only allowed in the head. Therefore, the latter is not allowed within the former."

It might matter where your <noscript> tag is located.

Improve this answer

Comments

0

Try something like this:

<html class="nojs">
<head>
<script type="text/javascript">
document.getElementByTagName("html")[0].className="";
</script>
<style>
html#nojs {
   /* do something */
}
</style>

This removes a class while loading the page. If javascript is not activated the class won't be removed.

Improve this answer

Comments

0

You can get around this by having those classes in your default stylesheet and have JavaScript get rid of them when the page loads. This will only work if JavaScript is enabled otherwise it would load the desired styles.

Improve this answer

Comments

0

You could for example do it the other way around and disable some css file via javascript which doesn' t happen if it's not activated.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.