Extensions to CSS 3 Media Queries

24 November 2008

Authors:
Dean Jackson (dino@apple.com), Apple
NOTE: This document is a work-in-progress proposal. It should not be considered complete, nor does it represent the position of Apple or the WebKit project.

1 Introduction

This document introduces extensions to the CSS 3 Media Queries specification. It allows for media queries that can test for CSS Transformations, Animations and Transitions, and a new DOM interface for evaluating media queries from script.

2 The transform-2d media feature

Value: <integer>
Applies to: visual media types
Accepts min/max prefixes: no

The ‘transform-2d’ media feature describes the availability of CSS Transforms for two-dimensions. This includes the transform property, the transformation functions matrix, translate, translateX, translateY, scale, scaleX, scaleY, rotate, skew, skewX and skewY, and the transform-origin property with X and Y values.

The User Agent will return a value of 0 if the feature is not supported, and any other value if it is supported. 

<link rel="stylesheet" media="screen and (transform-2d)" />

In the example above, the style sheet will apply only to screens that support two-dimensional transforms.

3 The transform-3d media feature

Value: <integer>
Applies to: visual media types
Accepts min/max prefixes: no

The ‘transform-3d’ media feature describes the availability of CSS Transforms for three-dimensions. This includes the transform property, all transformation functions, the transform-origin property with X, Y and Z values, the transform-style property, the transform-perspective property, the transform-perspective-origin property and the transform-backface-visibility property.

The User Agent will return a value of 0 if the feature is not supported, and any other value if it is supported. Since 3D transformations are a superset of 2D transformations, if ‘transform-3d’ evaluates to true, ‘transform-2d’ must also evaluate to true. 

<link rel="stylesheet" media="screen and (transform-3d)" />

In the example above, the style sheet will apply only to screens that support three-dimensional transforms.

4 The transition media feature

Value: <integer>
Applies to: visual media types
Accepts min/max prefixes: no

The ‘transition’ media feature describes the availability of CSS Transitions. This includes the transition-property property, the transition-duration property, the transition-timing-function property, and the transition-delay property.

The User Agent will return a value of 0 if the feature is not supported, and any other value if it is supported. 

<link rel="stylesheet" media="screen and (transition)" />

In the example above, the style sheet will apply only to screens that support CSS Transitions.

5 The animation media feature

Value: <integer>
Applies to: visual media types
Accepts min/max prefixes: no

The ‘animation’ media feature describes the availability of CSS Animations. This includes the animation-name property, the animation-duration property, the animation-timing-function property, the animation-delay property, the animation-iteration-count property, the animation-play-state property, the animation-direction property and the @keyframes at-rule.

The User Agent will return a value of 0 if the feature is not supported, and any other value if it is supported. 

<link rel="stylesheet" media="screen and (animation)" />

In the example above, the style sheet will apply only to screens that support CSS Animations.

6 DOM Interface

Interface Window

The following function is added to the Window interface.

IDL Definition 
  interface Window {
    ...
    boolean evaluateMediaQuery(in DOMString query);
    ...
  };
Methods
evaluateMediaQuery
The evaluateMediaQuery method evaluates the query parameter as a media query and returns the result.
Parameters
query of type DOMString
The CSS 3 Media Query to evaluate.
Return Value
boolean
True if the query evaluates on the current media, false otherwise.
No Exceptions