mozilla

Revision 193995 of @media

  • Raccourci de la révision : CSS/@media
  • Titre de la révision : @media
  • ID de la révision : 193995
  • Créé :
  • Créateur : Fredchat
  • Version actuelle ? Non
  • Commentaire /* Document à relire */

Contenu de la révision

{{wiki.template('Traduction_à_relire')}}

{{template.CSSRef()}}

Résumé

La règle @media définit les types de médias ciblés, séparés par des virgules, par un ensemble de règles (délimité entre accolades).

Syntaxe

@media <media types> {
  /* Règles spécifiques aux médias */
}

Types de médias

all
Valable pour tous les supports.
braille
Destiné aux appareils braille à retour tactile.
embossed
Destiné aux appareils à impression braille.
handheld
Destiné aux appareils portatifs (ceux avec un petit écran ou à bande passante limitée.
print
Destiné aux supports paginés et aux documents visualisés en aperçu avant impression. Consultez la section correspondante aux médias paginés pour plus d'informations sur les questions spécifiques liées au formatage de ce type de média.
projection
Destiné aux projections, par exemple avec des projecteurs. Consultez la section sur les médias paginés pour plus d'informations sur les questions qui leurs sont spécifiques.
screen
Destiné principalement aux moniteurs couleurs.
speech
Destiné aux synthétiseur vocaux. Note : CSS2 possède un type de média similaire appelé aural remplissant le même rôle. Voir l'annexe dédiée aux feuilles de styles aural pour plus de détails.
tty
Destiné aux médias utilisant une grille de caractères fixe (télétypes, terminaux ou les appareils portatifs aux capacités d'affichage réduites). Les auteurs ne devraient pas utiliser de valeurs exprimées en pixel avec ce type de média.
tv
Destiné aux appareils du type télévision (basse résolution, couleur, défilement limité, sonorisé).

Groupes de médias

Les types de média font également partie de différents groupes de médias. Le tableau ci-dessous indique l'appartenance de chaque type à ces groupes :

  Groupes
Types continu paginé visuel audio oral tactile grille bitmap interactif statique
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

Exemples

 @media print {
   body { font-size: 10pt }
 }
 @media screen {
   body { font-size: 13px }
 }
 @media screen, print {
   body { line-height: 1.2 }
 }

Notes

Un type de médias multimode ne représenta qu'un type de médias. Le type tv, par exemple, est un type multimode qui peut se rendre aussi bien visuellement qu'oralement pour un seul canevas.

Spécifications

Compatibilité des navigateurs

Voir également

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

Interwiki Languages Links

{{ wiki.languages( { "en": "en/CSS/@media", "pl": "pl/CSS/@media" } ) }}

Source de la révision

<p>
{{wiki.template('Traduction_à_relire')}}
</p><p>{{template.CSSRef()}}
</p>
<h3 name="R.C3.A9sum.C3.A9"> Résumé </h3>
<p>La règle <code>@media</code> définit les types de médias ciblés, séparés par des virgules, par un ensemble de règles (délimité entre accolades).
</p>
<h3 name="Syntaxe"> Syntaxe </h3>
<pre class="eval">@media <i>&lt;media types&gt;</i> {
  /* Règles spécifiques aux médias */
}
</pre>
<h3 name="Types_de_m.C3.A9dias"> Types de médias </h3>
<dl><dt>all
</dt><dd>Valable pour tous les supports.
</dd><dt>braille
</dt><dd>Destiné aux appareils braille à retour tactile.
</dd><dt>embossed
</dt><dd>Destiné aux appareils à impression braille.
</dd><dt>handheld
</dt><dd>Destiné aux appareils portatifs (ceux avec un petit écran ou à bande passante limitée.
</dd><dt>print
</dt><dd>Destiné aux supports paginés et aux documents visualisés en aperçu avant impression. Consultez la section correspondante aux médias paginés pour plus d'informations sur les questions spécifiques liées au formatage de ce type de média. 
</dd><dt>projection
</dt><dd>Destiné aux projections, par exemple avec des projecteurs. Consultez la section sur les médias paginés pour plus d'informations sur les questions qui leurs sont spécifiques.
</dd><dt>screen
</dt><dd>Destiné principalement aux moniteurs couleurs. 
</dd><dt>speech
</dt><dd>Destiné aux synthétiseur vocaux. Note : CSS2 possède un type de média similaire appelé <code>aural</code> remplissant le même rôle. Voir l'annexe dédiée aux feuilles de styles <code>aural</code> pour plus de détails. 
</dd><dt>tty
</dt><dd>Destiné aux médias utilisant une grille de caractères fixe (télétypes, terminaux ou les appareils portatifs aux capacités d'affichage réduites). Les auteurs ne devraient pas utiliser de valeurs exprimées en pixel avec ce type de média.
</dd><dt>tv
</dt><dd>Destiné aux appareils du type télévision (basse résolution, couleur, défilement limité, sonorisé).
</dd></dl>
<h3 name="Groupes_de_m.C3.A9dias"> Groupes de médias </h3>
<p>Les types de média font également partie de différents groupes de médias. Le tableau ci-dessous indique l'appartenance de chaque type à ces groupes :
</p>
<table class="standard-table">

<tbody><tr>
<td> 
</td><td class="header" colspan="10" style="text-align:center">Groupes
</td></tr>

<tr>
<td class="header">Types
</td><td class="header">continu
</td><td class="header">paginé
</td><td class="header">visuel
</td><td class="header">audio
</td><td class="header">oral
</td><td class="header">tactile
</td><td class="header">grille
</td><td class="header">bitmap
</td><td class="header">interactif
</td><td class="header">statique
</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="Exemples"> Exemples </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>Un type de médias multimode ne représenta qu'un type de médias. Le type <code>tv</code>, par exemple, est un type multimode qui peut se rendre aussi bien visuellement qu'oralement pour un seul canevas.
</p>
<h3 name="Sp.C3.A9cifications"> Spécifications </h3>
<ul><li> <a class="external" href="http://www.yoyodesign.org/doc/w3c/css2/media.html">CSS 2</a> ou <a class="external" href="http://www.w3.org/TR/CSS21/media.html#at-media-rule">CSS 2.1 (en)</a>
</li></ul>
<h3 name="Compatibilit.C3.A9_des_navigateurs"> Compatibilité des navigateurs </h3>
<h3 name="Voir_.C3.A9galement"> Voir également </h3>
<p>{{template.Cssxref("@import")}}, {{template.Cssxref("@font-face")}}
</p><p><span class="comment">Interwiki Languages Links</span>
</p>{{ wiki.languages( { "en": "en/CSS/@media", "pl": "pl/CSS/@media" } ) }}
Revenir à cette révision