Proposal: Detecting JavaScript with Media Queries

With CSS3 Media Queries, we currently have the ability to alter the 
display of a web page based on a whole number of factors: device 
dimensions, screen dimensions, screen DPI, color depth, orientation, and 
more. While these are useful, it seems like we're missing one of the 
most common media features: JavaScript support.

Web applications are doing this in a number of very hacky ways right now:
1. Start with <html class="js-disabled"> and then remove the 
"js-disabled" class using JavaScript later in the page.
2. Simply adding "js-enabled" to <html> using JavaScript (YUI uses this 
method, adding "yui3-js-enabled" when initialized).

This is all done so we can hide/show or otherwise change the display 
based on JavaScript availability, such as:

.js-disabled .foo { display: none; }
.js-enabled .bar {display: block; }

I'd like to propose adding "script" support for media queries, so you 
can write queries such as:

@media screen and (script) {
...
}

@media screen and not (script) {
...
}

This way, we'd never again have to use of these silly JS-based hacks 
just to change the appearance when JavaScript is enabled or disabled.

Thoughts?

-- 
___________________________
Nicholas C. Zakas
http://www.nczonline.net

Received on Tuesday, 3 January 2012 20:47:57 UTC