W3C Looks to Improve Responsive Design With New Media Queries

The W3C, the group charged with overseeing the creation of web standards like HTML and CSS, recently gave its official blessing to one of the cornerstones of responsive web design — CSS Media Queries.

CSS Media Queries are the basic building block of responsive design, which, at its simplest, just means building websites that work on any device. That way, when a dozen new tablets suddenly appear on the scene you can relax knowing your site will look and perform as intended, no matter which device your audience is using.

Now that the Media Queries Level 3 spec has been finalized, work has started on CSS 4 Media Queries, or more formally, Media Queries Level 4.

The W3C’s draft spec of Media Queries Level 4 adds three new features you can query in your stylesheets, including:

script — Query to check if JavaScript is enabled.

pointer — Query to see what sort of input device is being used (mouse, finger, stylus etc).

hover — Query to see if the :hover pseudo-class will work on the current device.

Perhaps the most interesting is the middle option, pointer, for which the user agent (your browser) is expected to return the value “none,” “coarse” or “fine.” According to the current draft of the spec, “typical examples of a ‘fine’ pointing system are a mouse, a track-pad or a stylus-based touch screen. Finger-based touch screens would qualify as ‘coarse.’”

Using the pointer query would make it possible to enlarge, for example, form controls on screens where a larger radio buttons might make things easier to select, or perhaps to change how paint flow is handled in a drawing app.

Of course, while potentially handy, none of these queries are yet supported in any web browser, so don’t go using them just yet. That said, the more progressive browsers like Opera, Chrome and Firefox will likely add preliminary support as the spec progresses. It’s also likely that some enterprising web developer will create a polyfill for older browsers before too long.