Embedding Extra Styles with Noscript

Embedding extra styles with noscript

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.

On the general issue: you'll want to make the div element visible by default, then hide it via CSS + javascript. This is the 'progressive enhancement' model. I notice you say you "don't want to do this because of the flicker", but I'm not sure exactly what's causing this - chances are you can fix it, so maybe you should post that as a question.

How to define CSS styles if Javascript is turned off?

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.

Making My Site Noscript-compatible

I would agree with jeroen, you want to build the site normally (w/out ajax) first, then add on the js layer.

If you build each tab as it's own page, and put the content of the page into a div with a certain id, you can do an ajax call w/ jquery pretty easily that can grab the content from the page and only grab within the div that holds the content, and then put that into your main page. so, same effect, but the site would work completely without script as well.

Valid way to add noscript in head for wrapping redirect

I am not sure why you need to redirect to another page instead of just showing a message. I use JS and a little CSS to handle these situations for me. Something like this:

<head>
   ....
   <script type="text/javascript"> document.documentElement.className += " js"</script>

   <link rel="stylesheet" type='text/css' href="css/layout.css" media="all" />
</head>
<body>
    <div id="noscript">Please enable JavaScript, then refresh this page. JavaScript is required on this site</div>
    <div id="wrapper">
       ...
    </div>
</body>

Then in layout.css:

 #wrapper      { display: none  } /* Hide if JS disabled */
 .js #wrapper  { display: block } /* Show if JS enabled */
 .js #noscript { display: none  } /* Hide if JS enabled */

By doing it this way, the class is applied to the html element before the page is rendered so you won't get a flicker as the non-JS content is swapped out for the JS content.

How to define CSS styles if Javascript is turned off?

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.

noscript tag not working

Remove the scoped attribute of the style tag. It's making your CSS apply strictly to the <noscript> tag.

If this attribute is present, then style applies only to its parent element.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style#Attributes

noscript alternative in XHTML?

The example you give is invalid in HTML as well as XHTML. No current recommendation provides a way to include a stylesheet unless scripting is enabled.

In general, you should avoid <noscript>. Start with something that works, and then build on it.

In this case, you could write your stylesheet for non-JS clients, then:

<body>
<script type="text/javascript">document.body.className += ' js';</script>

… and include additional rule-sets specific to JS being enabled with:

body.js foo {
}

Alternatively, you could do something like:

<link href="css/stylenojs.css" rel="stylesheet" type="text/css" id="nojscss" />

and

var nojscss = document.getElementById('nojscss');
nojscss.parentNode.removeChild(nojscss);

noscript not working for firefox

You can't have a <noscript> tag anywhere but the <body> section of your document, and you can't have a <style> tag anywhere but the <head> section of your document (see this post).

An alternative way to do this would be to make the body tag default to display: visible and set the display property using JavaScript like so:

<body>
    <script type="text/javascript">document.body.style.display = "none";</script>
    ...
</body>

Then get rid of your <noscript> tag completely and remove the display:none; line from your CSS declaration.

The advantage of this is that if the browser doesn't have JavaScript enabled, your <body> tag will be visible, regardless of how the browser handles the <noscript> tag.

How can i use [display = none ] when javascript is disabled on client browser?

You can set it to display: none; by default, and show it through javascript, so if javascript is disabled, it would not show

noscript processing in XML documents

The best description is probably the one in the HTML5 draft here : http://dev.w3.org/html5/spec/semantics.html#the-noscript-element.

In text/html, the details of exactly what happens are quite complex. Just follow the link above. No point in reproducing here.

For application/xhtml+xml, the draft says:

The noscript element must not be used in XML documents.
The noscript element is only effective in the HTML syntax, it has no effect in the XHTML syntax.

So in application/xhtml+xml, the contents of noscript should be displayed regardless of whether scripting is available or not. Of course, if scripting is enabled, it's pretty trivial to use script to remove such elements from the DOM.

CORRECTION.

On further research, what the above quote means I think, is that the noscript element has no effect on the parsing.

In the XHTML section here, http://dev.w3.org/html5/spec/the-xhtml-syntax.html#the-xhtml-syntax, the draft says

The user agent is expected to hide noscript elements for whom scripting is enabled, irrespective of CSS rules.

So, as you say, when scripting is enabled the noscript element does hide its contents. However, that's all it does, and images are loaded anyway. In addition, I tried this:

<html xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">
  <head> 
    <title>Test</title>
  </head>
  <body>
    <p>Test 1</p>
    <noscript id="ns">
      <p>Test 2</p>
      <script type="text/javascript">
        document.getElementById("ns").parentNode.removeChild(document.getElementById("ns"));
      </script>
      <img src="test.gif" alt="test"/>
    </noscript>
  </body>
</html>

And although the noscript node is removed from the dom, Firefox still tried to load the image.

Embedding Extra Styles with Noscript