W3C Looks to Improve Responsive Design With New Media Queries

Scott Gilbertson — Thu, 19 Jul 2012 18:40:44 +0000

A handful of the many screens your site needs to handle. Photo: Ariel Zambelich/Wired.com

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.

Adapt.js Offers JavaScript Alternative to CSS Media Queries

Scott Gilbertson — Tue, 19 Apr 2011 15:36:19 +0000

With the mobile web comes a new set of design problems: how do you fit your content on a much smaller screen, and, more generally, how do you make your site look good no matter what size screen it’s on? The growing consensus is that Responsive Web Design — websites that adapt to the size of the user’s screen — is the way forward.

For many developers that means using @media queries to selectively target the device screen size and orientation through CSS.

While the @media approach is a good one, it won’t work for every site. That’s why Nathan Smith, creator of the 960 Grid System, has released Adapt.js, a lightweight JavaScript library (894 bytes minified) that allows you to specify a list of stylesheets and the screen sizes for which they should be loaded. Essentially Adapt.js does the work of @media, but will work in any browser, even those that don’t understand @media.

All you need to do is include Adapt.js in your pages and then define the sizes and stylesheets to go with them. Here’s the code from Smith’s example:

var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'assets/css/',

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Should have at least one "to" range.
  range: [
    '760px            = mobile.css',
    '760px  to 980px  = 720.css',
    '980px  to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1920px           = fluid.css'
  ]
};

While using JavaScript to load CSS might seem a bit strange, even if you use @media queries you’re still going to need some kind of polyfill (usually JavaScript-based) to handle those browsers that don’t know what to do with @media rules.

Of course Adapt.js isn’t right for every situation. Smith has a very nice take on the debate over @media, JavaScript, separate mobile websites and other options for dealing with the small screen:

As with any field in which technological methods are open for debate, there is the danger of religious fanaticism, where we each rally behind a respective technique and defend it vehemently. I would advise you to consider your audience, weigh the options, and find an approach that makes sense for that particular context.

See Also:

Webmonkey » @media

W3C Looks to Improve Responsive Design With New Media Queries

Adapt.js Offers JavaScript Alternative to CSS Media Queries