Geek Answers Handbook

Using <noscript> inside <head>: a good idea or a bad idea?

I noticed that Facebook does this when they have a meta update enclosed in <noscript> enclosed in a <head> . They use this to determine if the javascript user agent is enabled or not.

We thought of using this method for two reasons:

  • To automatically redirect to an optimized version of the site other than js, as facebook does.
  • To enable non-js stylesheet, to reliably disable the finger pointer over javascript, and also for browsers with CSS3 complaints, supplanting these buttons to make them more obvious, they are disabled (don't work).

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

+8
javascript html css noscript html-head
source share
2 answers

No, there should not be any extravagant side effects using the <noscript> in the head.

However, the following disadvantages of <noscript> exist:

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

IMO, what you want to do is very good, and that is the appropriate use of a tag. However, an even better solution would be to use the discovery function in your Javascript to enable Javascript functions, rather than using <noscript> to disable them.

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

+6
source share

Secondly, I would recommend using the approach that initially provides your <html> elements with the no-js class, then immediately removing that class with JavaScript and replacing it with the js class (or including a library like Modernizr that does this automatically). Thus, you can customize CSS styles for both enabled and disabled JavaScript situations, prefixing these 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 this here: http://paulirish.com/2009/avoiding-the-fouc-v3/

+3
source share

More articles:


All Articles