Re: Proposal: Detecting JavaScript with Media Queries

On 03/01/12 20:47, Nicholas C. Zakas wrote:
> 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'll call that 'root class insertion'.)

> I'd like to propose adding "script" support for media queries, so you 
> can write queries such as:
>
> @media screen and (script) {
> ...
> }

What if some scripts are enabled, and others not?  I'm frequently in 
this situation using the NoScript Firefox extension while on a site that 
loads scripts from several domains.  A simple 'script' media feature 
can't cover this, while root class insertion can, though it could still 
be problematic for third-party scripts, as you have to either tell them 
how to edit your page, or trust that they won't edit the same page in 
conflicting ways.


'script' could be parameterized with the URL of the script, which would 
surely cover most cases of script selection.  (Should it also optionally 
include the script MIME type too?)

   @media screen and (script(http://foo.example.com/foo.js)) { ... }


Alternatively (or independently), define an extensible, namespaced 
feature space which scripts can interact with.

In CSS:

   @namespace foo"http://foo.example.com/";

   @media screen and (foo|script-a) and (foo|script-b) { ... }

In the script:

   document.setMediaFeature("http://foo.example.com/", "script-a", true);
   document.setMediaFeature("http://foo.example.com/", "script-b", true);


I dare say, however, it's easier just to let third-party scripts 
/carefully/ insert a unique-ish class into the root element.  It's much 
more robust than a binary 'script' feature, almost as robust as using 
namespaces, and much less verbose than either namespaces or 'script(url)'.

Cheers,

Steven

Received on Friday, 6 January 2012 11:25:32 UTC