Using <noscript> within <head>: Good idea or bad idea?

Asked 13/8, 2011 at 19:20 Answered 13/8, 2011 at 19:45

Solved javascript html css noscript html-head

I noticed Facebook does this where they have a meta refresh enclosed in a <noscript> enclosed in the <head> tag. They use this to detect if the user agent has javascript enabled or not.

We were thinking of using this method for 2 reasons:

To auto redirect to a non-js optimized version of the site as facebook does.
To include a non-js stylesheet to hopefully disable the finger pointer over javascript only anchors as well as for CSS3 complaint browsers, fading those buttons out to make it more obvious they are disabled (not working rather).

Will using this method for the above reasons cause any adverse effects that will affect a large percentage of user agents?

Gynecium answered 13/8, 2011 at 19:20 Comment(2)

Even I noticed this and I have been using it on a production site to send users to non JS page, asking them to update their browser or enable JS or whichever is possible for them, I would certainly love to know alternates and pitfalls of this approach, upvoting the question – Renshaw 13/8, 2011 at 19:22

It's recommendable to use valid html, for example I had a problem parsing an HTML that have NOSCRIPT tag in HEAD in PHP. – Regality 20/12, 2017 at 14:6

No, there shouldn't be any extravagantly adverse effects by using the <noscript> tag in the head.

That said, there are some disadvantages to <noscript>:

It only works if the browser does not support JavaScript or if it is disabled. The content of the <noscript> tag will be invisible if the Javascript is blocked by a firewall.
User agents with very poor Javascript support will still ignore <noscript> content.
While most browsers support <noscript> in the head, it is technically invalid X(HTML) so your pages might not validate.

IMO, what you are wanting to do is a very good thing, and is an appropriate use of the tag. However, an even better solution would be to use feature detection within your Javascript to enable Javascript features, rather than using <noscript> to disable them.

If you are depending on HTML5 features, I would recommend the Modernizr library for this purpose.

Corked answered 13/8, 2011 at 19:45 Comment(0)

For the second, I'd recommend using the approach of initially giving your <html> elements a class of no-js, then removing that class immediately with JavaScript, and replacing it with a class of js (or including a library like Modernizr that does this automatically). That way, you can target CSS styles to both enabled and disabled JavaScript situations by prefixing those styles with .js or .no-js.

Something like this, for example:

.js span.javascriptOnlyAnchor { cursor: pointer; text-decoration: underline; }

.no-js span.javascriptOnlyAnchor { display: none; }

Paul Irish talks more about that here: http://paulirish.com/2009/avoiding-the-fouc-v3/

Photoengrave answered 13/8, 2011 at 19:43 Comment(2)

at what point in the output buffer do you recommend actually running the js? within head? right after body? no issues arise with the fact that html will (ideally) still be open when the js to re-class html is executed? i wont be installing the library, but will be custom coding this. – Gynecium 13/8, 2011 at 19:58

This is one of the few times when a tiny bit of JavaScript in the head is a good idea. Otherwise, you're still vulnerable to a flash of un-styled (or mis-styled in this case) content. – Photoengrave 13/8, 2011 at 22:3

Recommended topics

Hot tags