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.
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 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.
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 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.
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 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.
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 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.
MediaQueryList
interface defined in the CSS View specification.