• 201203 Aug

    The CSS3 Media Queries module was released as an official W3C Recommendation on 19 June 2012, marking the end of a development cycle that began over ten years ago (the first working draft of the specification was published on 4 April 2001).

    CSS3 Media Queries, which allows the presentation of content to be tailored to a specific range of output devices, for example presenting a website differently depending on the screen size or aspect ratio of the device a visitor is using, has become one of the most talked about aspects of CSS3 in recent months, as the concept of responsive design has gained traction, largely as a result of the rapidly growing number of differing platforms (and screen resolutions) on which users now access the web, such as smart phones,  tablets and even internet enabled televisions.

    Media Queries is only the fourth CSS3 module to reach the recommendation stage of development to date, and the first so far this year, joining the CSS3 Selectors, CSS3 Color and CSS Namespaces modules, which all became official W3C recommendations last year.

    CSS4 Media Queries

    Work has already begun on the next incarnation of the Media Queries module, CSS4 Media Queries, with the first editors draft made public earlier this year. Whilst the CSS3 Media Queries module focused largely on the ability to change the presentation of content for differing screen sizes and resolutions, CSS4 Media Queries looks set to tackle the variety of input methods and other capabilities of differing devices, and allow for differing presentation depending upon the device capabilities. So far, three new media features have been added to the specification, as follows:

    • script
    • pointer
    • hover

    The ‘script’ Media Feature

    The ‘script’ media feature can be used to query whether or not ECMAscript (for example JavaScript or ActionScript) is supported on the current document. If the user agent supports ECMAscript, and that support is active for the current document the value must be 1. Otherwise, the value must be 0.

    The specification also notes that future versions of the Media Queries specification may extend this feature to allow fine-grained detection of which script is allowed to run.

    More information on the ‘script’ media feature can be found in section 4.14 of the editors draft here.

    The ‘pointer’ Media Feature

    The ‘pointer’ media feature can be used to query about the presence and accuracy of a pointing device such as a mouse.

    The ‘pointer’ media query accepts the following values:

    • ‘none’ – The input mechanism of the device does not include a pointing device.
    • ‘coarse’ – The input mechanism of the device includes a pointing device of limited accuracy.
    • ‘fine’ – The input mechanism of the device includes an accurate pointing device.

    According to the specification, both ‘coarse’ and ‘fine’ indicate the presence of a pointing device, but differ in accuracy. A pointing device with which it would be difficult or impossible to reliably pick one of several small adjacent targets, for example a touch screen device, would qualify as ‘coarse’.

    The specification provides the following example of a media query using the ‘pointer’ media feature:

    /* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
    @media (pointer:coarse) {
    input[type=”checkbox”], input[type=”radio”] {

    More information on the ‘pointer’ media feature can be found in section 4.15 of the editors draft here.

    The ‘hover’ Media Feature

    The ‘hover’ media feature can be used to query whether or not the primary pointing system used on the output device is capable of hovering. If it is, the value will be 1. Otherwise, the value will be 0.

    If a device has multiple pointing devices, some of which support hovering and some of which do not, the specification recommends that the UA reports the hovering ability of the least capable of the primary pointing devices. For example, on a touch screen device the value of the ‘hover’ media query should be 0, even if an optional mouse (which is capable of hovering) is attached.

    More information on the ‘hover’ media feature can be found in section 4.16 of the editors draft here.

    As of yet there’s no browser support for the new CSS4 features, but we’ll let you know when it happens.

    You can skip to the end and leave a response.

  • Comments


Advertise here?