@media

  • Revision slug: CSS/@media
  • Revision title: @media
  • Revision id: 20193
  • Created:
  • Creator: Waldo
  • Is current revision? No
  • Comment formatting

Revision Content

{{ CSSRef() }}

Summary

@media specifies the target media types (separated by commas) of a set of rules (delimited by curly braces).

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).
print
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
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
print   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 }
}

Notes

A multimodal media type is still only one media type. The 'tv' media type, for example, is a multimodal media type that renders both visually and aurally to a single canvas.

Specifications

Browser compatibility

See also

{{ Cssxref("@import") }}, {{ Cssxref("@font-face") }}

{{ languages( { "fr": "fr/CSS/@media", "pl": "pl/CSS/@media" } ) }}

Revision Source

<p> {{ CSSRef() }}
</p>
<h3 name="Summary"> Summary </h3>
<p><code>@media</code> specifies the target media types (separated by commas) of a set of rules (delimited by curly braces).
</p>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">@media <i>&lt;media types&gt;</i> {
  /* media-specific rules */
}
</pre>
<h3 name="Media_types"> Media types </h3>
<dl><dt>all
</dt><dd>Suitable for all devices. </dd><dt>braille
</dt><dd>Intended for braille tactile feedback devices. </dd><dt>embossed
</dt><dd>Intended for paged braille printers. </dd><dt>handheld
</dt><dd>Intended for handheld devices (typically small screen, limited bandwidth). </dd><dt>print
</dt><dd>Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media. </dd><dt>projection
</dt><dd>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. </dd><dt>screen
</dt><dd>Intended primarily for color computer screens. </dd><dt>speech
</dt><dd>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. </dd><dt>tty
</dt><dd>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. </dd><dt>tv
</dt><dd>Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
</dd></dl>
<h3 name="Media_groups"> Media groups </h3>
<p>Media types are also part of different Media Groups. The following table indicates which types are in which group.
</p>
<table class="standard-table"> <tbody><tr>
<td> 
</td><td class="header" colspan="10" style="text-align:center">Groups
</td></tr> <tr>
<td class="header">Type
</td><td class="header">continuous
</td><td class="header">paged
</td><td class="header">visual
</td><td class="header">audio
</td><td class="header">speech
</td><td class="header">tactile
</td><td class="header">grid
</td><td class="header">bitmap
</td><td class="header">interactive
</td><td class="header">static
</td></tr> <tr>
<td class="header">braille
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td>X
</td><td> 
</td><td>X
</td><td>X
</td></tr> <tr>
<td class="header">embossed
</td><td> 
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td>X
</td><td> 
</td><td> 
</td><td>X
</td></tr> <tr>
<td class="header">handheld
</td><td>X
</td><td>X
</td><td>X
</td><td>X
</td><td>X
</td><td> 
</td><td>X
</td><td>X
</td><td>X
</td><td>X
</td></tr> <tr>
<td class="header">print
</td><td> 
</td><td>X
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td> 
</td><td>X
</td></tr> <tr>
<td class="header">projection
</td><td> 
</td><td>X
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td>X
</td><td> 
</td></tr> <tr>
<td class="header">screen
</td><td>X
</td><td> 
</td><td>X
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td>X
</td><td>X
</td></tr> <tr>
<td class="header">speech
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td>X
</td></tr> <tr>
<td class="header">tty
</td><td>X
</td><td> 
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td> 
</td><td>X
</td><td>X
</td></tr> <tr>
<td class="header">tv
</td><td>X
</td><td>X
</td><td>X
</td><td>X
</td><td> 
</td><td> 
</td><td> 
</td><td>X
</td><td>X
</td><td>X
</td></tr>
</tbody></table>
<h3 name="Examples"> Examples </h3>
<pre class="eval">@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}
</pre>
<h3 name="Notes"> Notes </h3>
<p>A multimodal media type is still only one media type. The 'tv' media type, for example, is a multimodal media type that renders both visually and aurally to a single canvas.
</p>
<h3 name="Specifications"> Specifications </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS21/media.html#at-media-rule">CSS 2.1</a>
</li></ul>
<h3 name="Browser_compatibility"> Browser compatibility </h3>
<h3 name="See_also"> See also </h3>
<p>{{ Cssxref("@import") }}, {{ Cssxref("@font-face") }}
</p>{{ languages( { "fr": "fr/CSS/@media", "pl": "pl/CSS/@media" } ) }}
Revert to this revision