Question

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:

  1. To auto redirect to a non-js optimized version of the site as facebook does.
  2. 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?

Was it helpful?

Solution

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.

OTHER TIPS

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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top