Definition and Usage
The @media CSS at-rule< associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition defined by a media query. The @media at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
The @media at-rule can be accessed via the CSS object model interface CSSMediaRule.
Syntax
@media <media types> { /* media-specific rules */ }
Media types
- all
- Suitable for all devices.
- braille
- Intended for braille tactile feedback devices.
- embossed
- Intended for paged braille printers.
- handheld
- Intended for handheld devices (typically small screen, limited bandwidth).
- Intended for paged material and for documents viewed on screen in print preview mode.
- projection
- Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
- screen
- Intended primarily for color computer screens.
- speech
- Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
- tty
- Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
- tv
- Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
Media groups
Media types are also part of different Media Groups. The following table indicates which types are in which group.
Groups | ||||||||||
Type | continuous | paged | visual | audio | speech | tactile | grid | bitmap | interactive | static |
braille | X | X | X | X | X | |||||
embossed | X | X | X | X | ||||||
handheld | X | X | X | X | X | X | X | X | X | |
X | X | X | X | |||||||
projection | X | X | X | X | ||||||
screen | X | X | X | X | X | X | ||||
speech | X | X | X | X | ||||||
tty | X | X | X | X | X | |||||
tv | X | X | X | X | X | X | X |
Examples
@media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } }
Compatibility
Desktop browsers
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7 or earlier) | 9.0 | 9.2 | 1.3 |
Mobile browsers
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 1.0 | 1.0 (1.7) | 9.0 | 9.0 | 3.1 |