{@media} At Media Rule | CSS: Presentation Layer
Standards Based Development
@media rule (At Media Rule) specifies css properties specific to a given output medium, such as having specific styes for print media.
Safari supports the following media query extensions, which can be added to an @media rule to incidate that the rule only applies to display formats with certain properties:
| Media Query | Description |
|---|---|
Supported by Safari 1.0 and greater and iOS 1.0 and greater unless otherwise noted. | |
animation | Applies only to browsers that support animations specified with Available in Safari 4.0 and later. |
max-device-height | Applies only to devices with the specified maximum height. |
max-device-width | Applies only to devices with the specified maximum width. |
min-device-height | Applies only to devices with the specified minimum height. |
min-device-width | Applies only to devices with the specified minimum width. |
transform-2d | Applies only to browsers that support 2D transformations specified with Available in Safari 4.0 and later. |
transform-3d | Applies only to browsers that support 3D transformations specified with Available in Safari 4.0 and later. |
transition | Applies only to browsers that support transitions specified with Available in Safari 4.0 and later. |
-webkit-device-pixel-ratio | Applies only to devices with the specified ratio where a value of 2 indicates Retina displays and 1 indicates standard displays. Available in Safari 4.0 and later. |
-webkit-max-device-pixel-ratio | Applies only to devices with the specified maximum ratio where 2 indicates Retina displays and 1 indicates standard displays. Available in Safari 4.0 and later. |
-webkit-min-device-pixel-ratio | Applies only to devices with the specified minimum ratio where 2 indicates Retina displays and 1 indicates standard displays. Available in Safari 4.0 and later. |