W3C Publishes Media Queries Recommendation

The Cascading Style Sheets (CSS) Working Group has published a W3C Recommendation of Media Queries, which lets designers create effective Web experiences by adjusting styles according to device capabilities (such as screen dimensions or color support) or state (such as device orientation).  By using media queries, presentations such as web applications and web content can be tailored to a specific range of output devices without changing the content itself.

Because the HTML5 specification is under active development, rules have not advanced to the Recommendation state. The Media Queries recommendation notes that  “HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.”

The recommendation abstract defines a media query as consisting of a media type and zero or more expressions that check for the conditions of particular media features, such as  ‘width’, ‘height’, and ‘color’.

W3C also published the W3C Recommendation of The ‘view-mode’ Media Feature, from the Web Applications Working Group. W3C had delayed its publication until completion of the Media Queries Recommendation due to dependencies between the two. The “view-mode” specification extends media query design capabilities to Web application states (e.g., occupies the entire screen or is minimized).

The recommendation notes that “The user is generally in control of at least several aspects of these modalities, and it is therefore important for authors to be able to react to these in order to provide different styling to their applications. In order to achieve this, this specification defines a media feature that allows different CSS style rules to be applied depending on whether a given media query [MEDIAQ] matches.”

Visit the W3C news archives.