Extensions to CSS 3 Media Queries

29 April 2010

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.

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 1 if the feature is supported, and a value of 0 otherwise.

<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 1 if the feature is supported, and a value of 0 otherwise. 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 1 if the feature is supported, and a value of 0 otherwise.

<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 1 if the feature is supported, and a value of 0 otherwise.

<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

This section previously contained a definition for a DOM method that would evaluate media query strings. This has been removed from the proposal. Developers should instead use the MediaQueryList interface defined in the CSS View specification.