Révision 592011 sur @media

  • Raccourci de la révision : CSS/@media
  • Titre de la révision : @media
  • ID de la révision : 592011
  • Créé :
  • Créateur : wakka27
  • Version actuelle ? Non
  • Commentaire
Étiquettes : 

Contenu de la révision

{{ CSSRef() }}

Résumé

La règle @ CSS @media définit les types de médias ciblés (séparés par des virgules) par un ensemble de règles (délimitées par des accolades). La règle @ @media peut être déclarée non seulement au premier niveau d’un CSS, mais également à l’intérieur d’une règle conditionnelle de groupe CSS.

La règle @ @media est accessible via l’interface de modèle objet CSS CSSMediaRule.

Syntaxe

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

Types de médias

Note: Actuellement, Firefox implémente seulement les types de médias print et screen. L’extension FullerScreen ajoute le support du type projection.
all
Valable pour tous les supports.
braille
Destiné aux appareils braille à retour tactile.
embossed
Destiné aux appareils à impression braille.
handheld
Destiné aux appareils portatifs (c-à-d petit écran et bande passante limitée).
print
Destiné aux supports paginés et aux documents visualisés en aperçu avant impression. Consultez la section sur les médias paginés, et la section médias du tutorial Premiers pas pour plus d'informations sur les questions spécifiques liées au formatage des médias paginés.
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 d'ordinateurs.
speech
Destiné aux synthétiseur vocaux. Note : CSS2 définit un type de média similaire appelé aural remplissant le même rôle. Consultez l'annexe sur les 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 portables 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 de 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 à quels groupes appartient chacun des types de médias :

  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édia multimode est considéré comme un seul type de média. Le type tv, par exemple, est un type multimode qui peut rendre aussi bien visuellement qu'oralement dans un seul canevas.

Spécifications

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base 1.0 {{ CompatGeckoDesktop("1") }} 9.0 9.2 1.3
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base 1.0 {{ CompatGeckoMobile("1") }} 9.0 9.0 3.1

Voir également

  • Les requêtes médias
  • {{ CSS_at_rules() }}
  • Le modèle objet CSS {{ domxref("CSSMediaRule") }} associé à cette règle @.

Source de la révision

<div>
 {{ CSSRef() }}</div>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La <a href="/fr/docs/CSS/Règles_@" title="/fr/docs/CSS/Règles_@">règle @</a> <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <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ées par des accolades). La règle @ <code>@media</code> peut être déclarée non seulement au premier niveau d’un CSS, mais également à l’intérieur d’une <a href="/fr/docs/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe">règle conditionnelle de groupe</a> CSS.</p>
<p>La règle @ <code>@media</code> est accessible via l’interface de modèle objet CSS <a href="/fr/docs/Web/API/CSSMediaRule" title="The CSSMediaRule is an interface representing a single CSS @media rule. It implements the CSSConditionRule interface, and therefore the CSSGroupingRule and the CSSRule interface with a type value of 4 (CSSRule.MEDIA_RULE)."><code>CSSMediaRule</code></a>.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="eval">
@media <em>&lt;media types&gt;</em> {
  /* Règles spécifiques aux médias */
}
</pre>
<h2 id="Types_de_m.C3.A9dias">Types de médias</h2>
<div class="note"><strong>Note:</strong> Actuellement, Firefox implémente seulement les types de médias <code>print</code> et <code>screen</code>. L’extension <a class="link-https" href="https://addons.mozilla.org/fr/firefox/addon/fullerscreen/" title="https://addons.mozilla.org/en-US/firefox/addon/4650">FullerScreen</a> ajoute le support du type&nbsp;<code>projection</code>.</div>
<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 (c-à-d petit écran et 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 sur les <a href="/fr/docs/Web/CSS/Paged_Media">médias paginés</a>, et la <a href="/fr/docs/CSS/Premiers_pas/Médias">section médias du tutorial Premiers pas</a> pour plus d'informations sur les questions spécifiques liées au formatage des médias paginés.</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 d'ordinateurs.</dd>
 <dt>
  speech</dt>
 <dd>
  Destiné aux synthétiseur vocaux. Note&nbsp;: CSS2 définit un type de média similaire appelé <code>aural</code> remplissant le même rôle. Consultez l'annexe sur les 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 portables 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 de type télévision (basse résolution, couleur, défilement limité, sonorisé).</dd>
</dl>
<h2 id="Groupes_de_m.C3.A9dias">Groupes de médias</h2>
<p>Les types de média font également partie de différents groupes de médias. Le tableau ci-dessous indique à quels groupes appartient chacun des types de médias&nbsp;:</p>
<table class="standard-table">
 <tbody>
  <tr>
   <td>&nbsp;</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>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
  </tr>
  <tr>
   <td class="header">embossed</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</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>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>X</td>
   <td>X</td>
  </tr>
  <tr>
   <td class="header">print</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>X</td>
  </tr>
  <tr>
   <td class="header">projection</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <td class="header">screen</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>X</td>
  </tr>
  <tr>
   <td class="header">speech</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
  </tr>
  <tr>
   <td class="header">tty</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>&nbsp;</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>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>X</td>
   <td>X</td>
   <td>X</td>
  </tr>
 </tbody>
</table>
<h2 id="Exemples">Exemples</h2>
<pre class="eval">
 @media print {
   body { font-size: 10pt }
 }
 @media screen {
   body { font-size: 13px }
 }
 @media screen, print {
   body { line-height: 1.2 }
 }
</pre>
<h2 id="Notes">Notes</h2>
<p>Un type de média multimode est considéré comme un seul type de média. Le type <code>tv</code>, par exemple, est un type multimode qui peut rendre aussi bien visuellement qu'oralement dans un seul canevas.</p>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<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 anglais)</a></li>
 <li><a class="external external-icon" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS3 Media Queries</a></li>
</ul>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Fonctionnalité</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Support de base</td>
    <td>1.0</td>
    <td>{{ CompatGeckoDesktop("1") }}</td>
    <td>9.0</td>
    <td>9.2</td>
    <td>1.3</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Fonctionnalité</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Support de base</td>
    <td>1.0</td>
    <td>{{ CompatGeckoMobile("1") }}</td>
    <td>9.0</td>
    <td>9.0</td>
    <td>3.1</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
 <li>Les <a href="/fr/docs/CSS/Media_queries">requêtes médias</a></li>
 <li>{{ CSS_at_rules() }}</li>
 <li>Le modèle objet CSS {{ domxref("CSSMediaRule") }} associé à cette règle @.</li>
</ul>
Revenir à cette révision