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.
transform-2d media feature
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.
transform-3d media feature
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.
transition media feature
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.
animation media feature
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.
The following function is added to the Window interface.
interface Window {
...
boolean evaluateMediaQuery(in DOMString query);
...
};
evaluateMediaQuery
evaluateMediaQuery method evaluates the query parameter as a
media query and returns the result.
query of type DOMString
boolean