Media queries

  • Raccourci de la révision : CSS/Media_queries
  • Titre de la révision : Media queries
  • ID de la révision : 362901
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

Une requête média ou media query consiste en un type de média et au moins une expression qui limite la portée de feuilles de styles en mettant à profit des particularités des supports multimédias comme la largeur, la hauteur ou la couleur. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même.

Syntaxe

Les media queries sont formées d'un type de média, et peuvent, d'après la spécification CSS3, contenir une ou plusieurs expressions, traitant de fonctionnalités du média, qui sont interprétées comme vraies ou fausses. Le résultat de la requête est vrai si le type de média indiqué dans la requête correspond au type de périphérique sur lequel le document est affiché et que toutes les expressions dans la requête sont vraies.

Lorsqu'une requête de média est vraie, la feuille de style ou les règles correspondantes sont appliquées selon les règles normales de la cascade. Les feuilles de styles ayant des media queries dans leur balisage <link> seront téléchargées, même si leur media query est fausse (elle ne seront toutefois pas appliquées).

Le type média est optionnel et le type all est supposé, sauf si les opérateurs not ou only sont utilisés.

Opérateurs logiques

Il est possible de composer des requêtes complexes à l'aide d'opérateurs logiques comme not (non), and (et) et only (uniquement). L'opérateur and est utilisé pour combiner plusieurs particularités médias en une seule media query, nécessitant que chacune des particularités soit vraie pour que la requête entière soit vraie. L'opérateur not est utilisé pour former la négation d'une requête entière. L'opérateur only est utilisé pour appliquer un style seulement si la requête est vraie, ce qui est utile pour empêcher des navigateurs plus anciens d'appliquer un ensemble de styles. Les opérateurs not et only nécessitent un type média afin d'être évalués, le type all n'est pas supposé.

En outre, plusieurs requêtes peuvent être combinées dans une liste séparée par des virgules. Si au moins une des requêtes de la liste est vraie, la feuille de style associée sera appliquée. C'est l'équivalent d'une opération logique « ou ».

and

Le mot-clé and est utilisé pour combiner plusieurs particularités médias ensemble, ainsi que combiner les particularités médias avec les types médias. Une requête media basique, une particularité avec le type média all supposé, peut ressembler à ceci :

@media (min-dwidth: 700px) {…}

Si toutefois, vous souhaitez que ceci s'applique seulement si l'écran est en orientation paysage, vous pouvez utiliser l'opérateur and pour lier les particularités ensemble.

@media (min-width: 700px) and (orientation: landscape) {…} 

Désormais, la requête média ci-dessus ne sera vraie que si la largeur d'affichage est de 700px ou plus et si l'écran est en orientation paysage. Si, toutefois, vous souhaiteriez que ceci ne s'applique que si l'écran est de type média TV, vous pouvez lier ces particularités avec le type media.

@media tv and (min-width: 700px) and (orientation: landscape) {…}

Désormais, la requête ne s'applique plus que lorsque le type média est TV, la largeur supérieure ou égale à 700px et l'orientation en paysage.

Le mot-clé not inverse le résultat de la requête ; par exemple, « all and (not color) » est vrai pour les périphériques monochromes quel que soit le type de média.

Le mot-clé only masquera les feuilles de style pour les anciens navigateurs ne gérant pas les media queries :

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Pseudo-BNF (pour ceux qui aiment ce genre de choses)

media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
  | <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

Les media queries ne sont pas sensibles à la casse. Les requêtes contenant des types de médias inconnus sont toujours fausses.

Note : les parenthèses sont obligatoires autour des expressions ; leur oubli provoquera une erreur.

Fonctionnalités de médias

La plupart des fonctionnalités de média peuvent être précédées de « min- » ou « max- » pour exprimer des contraintes « plus grand ou égal à » ou « plus petit ou égal à ».  Ceci permet d'éviter les symboles « < » et « > » qui provoqueraient des conflits avec HTML et XML. Si une fonctionnalité de média est utilisée sans préciser de valeur, l'expression sera considérée comme vraie si la valeur de cette fonctionnalité est différente de zéro.

Note : Si une fonctionnalité de média ne s'applique pas au périphérique sur lequel le navigateur s'affiche, les expressions contenant ce média seront toujours fausses. Par exemple, une requête sur le rapport hauteur/largeur d'un dispositif audio sera toujours fausse.

color

Valeur : {{ Xref_csscolorvalue() }}
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : oui

Indique le nombre de bits par composante de couleur sur le périphérique de sortie. S'il ne s'agit pas d'un périphérique couleur, cette valeur vaut zéro.

Note : Si les composantes de couleur ont un nombre de bits différent par couleur, le plus petit nombre est utilisé. Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge et 6 bits pour le vert, il sera considéré comme utilisant 5 bits par composante de couleur. Si le périphérique utilise des couleurs indexées, le nombre minimum de bits par composante de couleur dans la table des couleurs sera utilisé.

Exemples

Pour appliquer une feuille de style sur tous les périphériques couleur :

@media all and (color) { ... }

Pour appliquer une feuille de style sur les périphériques avec au moins 4 bits par composante de couleur :

@media all and (min-color: 4) { ... }

color-index

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : oui

Indique le nombre d'entrées dans la table de couleurs indexées pour le périphérique de sortie.

Exemples

Pour indiquer qu'une feuille de style doit s'appliquer à tous les périphériques dont les couleurs sont indexées, vous pouvez utiliser :

@media all and (color-index) { ... }

Pour appliquer une feuille de style aux périphériques dont les couleurs sont indexées avec au moins 256 couleurs :

<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />

aspect-ratio

Valeur : entier / entier
Média : {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepte les préfixes min/max : oui

Décrit le format d'image de la zone d'affichage du périphérique de sortie. Cette valeur est constituée de deux entiers positifs séparés par une barre oblique (« / »). Elle représente le nombre de pixels horizontaux sur le nombre de pixels verticaux.

Exemple

L'instruction suivante sélectionne une feuille de style spéciale à utiliser lorsque la zone d'affichage est au moins aussi large qu'elle est haute.

@media screen and (min-aspect-ratio: 1/1) { ... }

Ceci sélectionnera le style lorsque le format d'image est 1:1 ou supérieur.

device-aspect-ratio

Valeur : entier / entier
Média : {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepte les préfixes min/max : oui

Décrit le format d'image du périphérique de sortie. Cette valeur est constituée de deux entiers positifs séparés par une barre oblique (caractère « / »). Elle représente le nombre de pixels horizontaux sur le nombre de pixels verticaux.

Exemple

La requête suivante sélectionne une feuille de style spéciale pour les écrans larges.

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

La feuille de style sera utilisée lorsque le format d'affichage est 16:9 ou 16:10.

device-height

Valeur : {{ Xref_csslength() }}
Média : {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepte les préfixes min/max : oui

Décrit la hauteur du périphérique de sortie. C'est-à-dire l'écran ou la page entière, plutôt que simplement la zone de rendu comme la fenêtre du document.

Exemple

Pour appliquer une feuille de style à un document lorsqu'il est affiché sur un écran de moins de 800 pixels de large, vous pouvez utiliser ceci :

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

device-width

Valeur : {{ Xref_csslength() }}
Média : {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepte les préfixes min/max : oui

Décrit la largeur du périphérique de sortie. C'est-à-dire l'écran ou la page entière, plutôt que simplement la zone de rendu comme la fenêtre du document.

grid

Valeur : entier
Média : tous
Accepte les préfixes min/max : non

Détermine si le périphérique de sortie est un périphérique en grille ou bitmap. Si le périphérique est basé sur une grille (comme un terminal ou un affichage de téléphone avec une seule police), la valeur est 1. Sinon elle vaut zéro.

Note : Gecko (et donc Firefox) ne gère pas les périphériques en grille, cette fonctionnalité n'y est donc pas gérée non plus.

Exemple

Pour appliquer un style aux périphériques portables avec un écran de 15 caractères ou plus étroit :

@media handheld and (grid) and (max-width: 15em) { ... }
Note : l'unité « em » a une signification particulière pour ce type de périphérique ; comme la largeur exacte d'un « em » ne peut pas être déterminée, 1em est supposé être la largeur d'une cellule de la grille horizontalement et la hauteur d'une cellule verticalement.

height

Valeur : {{ Xref_csslength() }}
Média : {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepte les préfixes min/max : oui

La fonctionnalité de média height décrit la hauteur de la surface de rendu du périphérique de sortie (comme la hauteur de la zone de rendu à l'écran ou de la surface imprimable sur une imprimante).

Note : Firefox changera de feuille de style si l'utilisateur redimensionne la fenêtre selon les requêtes utilisant les fonctionnalités de média width et height.

monochrome

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : oui

Indique le nombre de bits par pixels sur un périphérique monochrome (échelle de gris). Si le périphérique n'est pas monochrome, la valeur est zéro.

Exemples

Pour appliquer une feuille de style à tous les périphériques monochromes :

@media all and (monochrome) { ... }

Pour appliquer une feuille de style aux périphériques monochromes avec au moins 8 bits par pixel :

@media all and (min-monochrome: 8) { ... }

orientation

Valeurs : landscape | portrait
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

Indique si l'appareil est en mode paysage (l'écran est plus large que haut) ou en mode portrait (l'écran est plus haut que large).

Exemple

Pour appliquer une feuille de style uniquement en mode portrait :

@media all and (orientation: portrait) { ... }

resolution

Valeur : {{ Xref_cssresolution() }}
Média : {{ Xref_cssbitmap() }}
Accepte les préfixes min/max : oui

Indique la résolution (densité de pixels) du périphérique de sortie. La résolution peut être spécifiée soit en points par pouce (dpi) ou en points par centimètre (dpcm).

Exemple

Pour appliquer une feuille de style à des périphériques avec une résolution d'au moins 300 points par pouce :

@media print and (min-resolution: 300dpi) { ... }

scan

Valeur : progressiveinterlace
Média : {{ Xref_csstv() }}
Accepte les préfixes min/max : non

Décrit le processus de balayage des périphériques de sortie de type télévision.

Note :Gecko (et donc Firefox) ne gère pas le type de média tv, cette fonctionnalité de média n'est pas conséquent pas gérée.

Exemple

Pour appliquer une feuille de style uniquement aux télévisions à balayage progressif :

@media tv and (scan: progressive) { ... }

width

Valeur : {{ Xref_csslength() }}
Média : {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepte les préfixes min/max : oui

La fonctionnalité de média width décrit la largeur de la surface de rendu du périphérique de sortie (comme la largeur de la zone de rendu à l'écran ou de la surface imprimable sur une imprimante).

Note : Firefox changera de feuille de style si l'utilisateur redimensionne la fenêtre selon les requêtes utilisant les fonctionnalités de média width et height.

Exemples

Pour spécifier une feuille de style pour les périphériques portables ou dont l'écran est plus large que 20em, vous pouvez utiliser cette feuille de style :

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

Cette requête spécifie une feuille de style à appliquer aux médias imprimés plus larges que 8,5 pouces :

<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" />

Cette requête spécifie une feuille de style utilisable lorsque la zone d'affichage est large de 500 à 800 pixels :

@media screen and (min-width: 500px) and (max-width: 800px) { ... }

Fonctionnalités de médias spécifiques à Mozilla

{{ gecko_minversion_header("1.9.2") }}

Mozilla offre un certain nombre de fonctionnalités de médias spécifiques à Gecko. Certaines d'entre-elles pourront être proposées comme fonctionnalités officielles.

-moz-images-in-menus

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo class.

-moz-mac-graphite-theme

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.

This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo class.

-moz-maemo-classic

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.

This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo class.

-moz-scrollbar-end-backward

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo class.

-moz-scrollbar-end-forward

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo class.

-moz-scrollbar-start-backward

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo class.

-moz-scrollbar-start-forward

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo class.

-moz-scrollbar-thumb-proportional

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo class.

-moz-touch-enabled

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo class.

Example

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

-moz-windows-classic

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo class.

-moz-windows-compositor

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo class.

-moz-windows-default-theme

Valeur : entier
Média : {{ Xref_cssvisual() }}
Accepte les préfixes min/max : non

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo class.

Voir également

{{ languages( { "en": "en/CSS/Media_queries" } ) }}

Source de la révision

<p>Une <strong>requête média</strong> ou <strong>media query</strong> consiste en un type de média et au moins une expression qui limite la portée de feuilles de styles en mettant à profit des particularités des supports multimédias comme la largeur, la hauteur ou la couleur. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même.</p>
<h2 id="Syntaxe">Syntaxe</h2>
<p>Les media queries sont formées d'un <a class="internal" href="/fr/docs/CSS/@media" title="fr/CSS/@media">type de média</a>, et peuvent, d'après la spécification CSS3, contenir une ou plusieurs expressions, traitant de fonctionnalités du média, qui sont interprétées comme vraies ou fausses. Le résultat de la requête est vrai si le type de média indiqué dans la requête correspond au type de périphérique sur lequel le document est affiché <strong>et</strong> que toutes les expressions dans la requête sont vraies.</p>
<p>Lorsqu'une requête de média est vraie, la feuille de style ou les règles correspondantes sont appliquées selon les règles normales de la cascade. Les feuilles de styles ayant des media queries dans leur balisage &lt;link&gt; <a href="http://scottjehl.github.com/CSS-Download-Tests/" title="http://scottjehl.github.com/CSS-Download-Tests/">seront téléchargées</a>, même si leur media query est fausse (elle ne seront toutefois pas appliquées).</p>
<p>Le type média est optionnel et le type <code>all</code> est supposé, sauf si les opérateurs <code>not</code> ou <code>only</code> sont utilisés.</p>
<h3 id="Op.C3.A9rateurs_logiques">Opérateurs logiques</h3>
<p>Il est possible de composer des requêtes complexes à l'aide d'opérateurs logiques comme <code>not</code> <em>(non)</em>, <code>and</code> <em>(et)</em> et <code>only</code> <em>(uniquement)</em>. L'opérateur <code>and</code> est utilisé pour combiner plusieurs particularités médias en une seule media query, nécessitant que chacune des particularités soit vraie pour que la requête entière soit vraie. L'opérateur <code>not</code> est utilisé pour former la négation d'une requête entière. L'opérateur <code>only</code> est utilisé pour appliquer un style seulement si la requête est vraie, ce qui est utile pour empêcher des navigateurs plus anciens d'appliquer un ensemble de styles. Les opérateurs <code>not</code> et <code>only</code> nécessitent un type média afin d'être évalués, le type <code>all</code> n'est pas supposé.</p>
<p>En outre, plusieurs requêtes peuvent être combinées dans une liste séparée par des virgules. Si au moins une des requêtes de la liste est vraie, la feuille de style associée sera appliquée.&nbsp;C'est l'équivalent d'une opération logique «&nbsp;<em>ou</em>&nbsp;».</p>
<h4>and</h4>
<p>Le mot-clé and est utilisé pour combiner plusieurs particularités médias ensemble, ainsi que combiner les particularités médias avec les types médias. Une requête media basique, une particularité avec le type média <code>all</code> supposé, peut ressembler à ceci :</p>
<pre class="brush: css">
@media (min-dwidth: 700px) {…}</pre>
<p>Si toutefois, vous souhaitez que ceci s'applique seulement si l'écran est en orientation paysage, vous pouvez utiliser l'opérateur and pour lier les particularités ensemble.</p>
<pre class="brush: css">
@media (min-width: 700px) and (orientation: landscape) {…} </pre>
<p>Désormais, la requête média ci-dessus ne sera vraie que si la largeur d'affichage est de 700px ou plus et si l'écran est en orientation paysage. Si, toutefois, vous souhaiteriez que ceci ne s'applique que si l'écran est de type média TV, vous pouvez lier ces particularités avec le type media.</p>
<pre class="brush: css">
@media tv and (min-width: 700px) and (orientation: landscape) {…}</pre>
<p>Désormais, la requête ne s'applique plus que lorsque le type média est TV, la largeur supérieure ou égale à 700px et l'orientation en paysage.</p>
<p>Le mot-clé <code>not</code> inverse le résultat de la requête ; par exemple, « <span style="font-family: monospace;">all</span><code> and (not color)</code> » est vrai pour les périphériques monochromes quel que soit le type de média.</p>
<p>Le mot-clé <code>only</code> masquera les feuilles de style pour les anciens navigateurs ne gérant pas les media queries :</p>
<pre>
&lt;link rel="stylesheet"&nbsp;media="only screen and (color)" href="example.css" /&gt;
</pre>
<h3 id="Pseudo-BNF_(pour_ceux_qui_aiment_ce_genre_de_choses)">Pseudo-BNF (pour ceux qui aiment ce genre de choses)</h3>
<pre>
media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
  | &lt;expression&gt; [ and &lt;expression&gt; ]*
expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
 &nbsp;| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid</pre>
<p>Les media queries ne sont pas sensibles à la casse. Les requêtes contenant des types de médias inconnus sont toujours fausses.</p>
<div class="note">
  <strong>Note :</strong> les parenthèses sont obligatoires autour des expressions&nbsp;; leur oubli provoquera une erreur.</div>
<h2 id="Fonctionnalit.C3.A9s_de_m.C3.A9dias">Fonctionnalités de médias</h2>
<p>La plupart des fonctionnalités de média peuvent être précédées de « min- » ou « max- » pour exprimer des contraintes «&nbsp;<em>plus grand ou égal à</em>&nbsp;» ou «&nbsp;<em>plus petit ou égal à</em>&nbsp;».&nbsp; Ceci permet d'éviter les symboles «&nbsp;&lt;&nbsp;» et «&nbsp;&gt;&nbsp;» qui provoqueraient des conflits avec HTML et XML.&nbsp;Si une fonctionnalité de média est utilisée sans préciser de valeur, l'expression sera considérée comme vraie si la valeur de cette fonctionnalité est différente de zéro.</p>
<div class="note">
  <strong>Note :</strong> Si une fonctionnalité de média ne s'applique pas au périphérique sur lequel le navigateur s'affiche, les expressions contenant ce média seront toujours fausses.&nbsp;Par exemple, une requête sur le rapport hauteur/largeur d'un dispositif audio sera toujours fausse.</div>
<h3 id="color">color</h3>
<p><strong>Valeur&nbsp;:</strong> {{ Xref_csscolorvalue() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Indique le nombre de bits par composante de couleur sur le périphérique de sortie.&nbsp;S'il ne s'agit pas d'un périphérique couleur, cette valeur vaut zéro.</p>
<div class="note">
  <strong>Note&nbsp;:</strong> Si les composantes de couleur ont un nombre de bits différent par couleur, le plus petit nombre est utilisé.&nbsp;Par exemple, si un affichage utilise 5 bits pour le bleu et le rouge et 6 bits pour le vert, il sera considéré comme utilisant 5 bits par composante de couleur. Si le périphérique utilise des couleurs indexées, le nombre minimum de bits par composante de couleur dans la table des couleurs sera utilisé.</div>
<h4 id="Exemples">Exemples</h4>
<p>Pour appliquer une feuille de style sur tous les périphériques couleur&nbsp;:</p>
<pre>
@media all and (color) { ... }
</pre>
<p>Pour appliquer une feuille de style sur les périphériques avec au moins 4 bits par composante de couleur&nbsp;:</p>
<pre>
@media all and (min-color: 4) { ... }
</pre>
<h3 id="color-index">color-index</h3>
<p><strong>Valeur&nbsp;:</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Indique le nombre d'entrées dans la table de couleurs indexées pour le périphérique de sortie.</p>
<h4 id="Exemples">Exemples</h4>
<p>Pour indiquer qu'une feuille de style doit s'appliquer à tous les périphériques dont les couleurs sont indexées, vous pouvez utiliser :</p>
<pre>
@media all and (color-index) { ... }
</pre>
<p>Pour appliquer une feuille de style aux périphériques dont les couleurs sont indexées avec au moins 256 couleurs&nbsp;:</p>
<pre>
&lt;link rel="stylesheet" media="all and (min-color-index:&nbsp;256)" href="http://foo.bar.com/stylesheet.css" /&gt;
</pre>
<h3 id="aspect-ratio">aspect-ratio</h3>
<p><strong>Valeur&nbsp;:</strong> entier / entier<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Décrit le format d'image de la zone d'affichage du périphérique de sortie.&nbsp;Cette valeur est constituée de deux entiers positifs séparés par une barre oblique (« / »). Elle représente le nombre de pixels horizontaux sur le nombre de pixels verticaux.</p>
<h4 id="Exemple">Exemple</h4>
<p>L'instruction suivante sélectionne une feuille de style spéciale à utiliser lorsque la zone d'affichage est au moins aussi large qu'elle est haute.</p>
<pre>
@media screen and (min-aspect-ratio: 1/1) { ... }</pre>
<p>Ceci sélectionnera le style lorsque le format d'image est 1:1 ou supérieur.</p>
<h3 id="device-aspect-ratio">device-aspect-ratio</h3>
<p><strong>Valeur&nbsp;:</strong> entier / entier<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Décrit le format d'image du périphérique de sortie.&nbsp;Cette valeur est constituée de deux entiers positifs séparés par une barre oblique (caractère «&nbsp;/&nbsp;»). Elle représente le nombre de pixels horizontaux sur le nombre de pixels verticaux.</p>
<h4 id="Exemple">Exemple</h4>
<p>La requête suivante sélectionne une feuille de style spéciale pour les écrans larges.</p>
<pre>
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>
<p>La feuille de style sera utilisée lorsque le format d'affichage est 16:9 ou 16:10.</p>
<h3 id="device-height">device-height</h3>
<p><strong>Valeur&nbsp;:</strong> {{ Xref_csslength() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Décrit la hauteur du périphérique de sortie. C'est-à-dire l'écran ou la page entière, plutôt que simplement la zone de rendu comme la fenêtre du document.</p>
<h4 id="Exemple">Exemple</h4>
<p>Pour appliquer une feuille de style à un document lorsqu'il est affiché sur un écran de moins de 800 pixels de large, vous pouvez utiliser ceci :</p>
<pre>
&lt;link rel="stylesheet"&nbsp;media="screen and (max-device-width: 799px)" /&gt;
</pre>
<h3 id="device-width">device-width</h3>
<p><strong>Valeur&nbsp;:</strong> {{ Xref_csslength() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Décrit la largeur du périphérique de sortie. C'est-à-dire l'écran ou la page entière, plutôt que simplement la zone de rendu comme la fenêtre du document.</p>
<h3 id="grid">grid</h3>
<p><strong>Valeur&nbsp;:</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> tous<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Détermine si le périphérique de sortie est un périphérique en grille ou bitmap. Si le périphérique est basé sur une grille (comme un terminal ou un affichage de téléphone avec une seule police), la valeur est 1.&nbsp;Sinon elle vaut zéro.</p>
<div class="note">
  <strong>Note :</strong> Gecko (et donc Firefox) ne gère pas les périphériques en grille, cette fonctionnalité n'y est donc pas gérée non plus.</div>
<h4 id="Exemple">Exemple</h4>
<p>Pour appliquer un style aux périphériques portables avec un écran de 15 caractères ou plus étroit :</p>
<pre>
@media handheld and (grid) and (max-width: 15em) { ... }
</pre>
<div class="note">
  <strong>Note&nbsp;:</strong> l'unité «&nbsp;em&nbsp;» a une signification particulière pour ce type de périphérique&nbsp;; comme la largeur exacte d'un «&nbsp;em&nbsp;» ne peut pas être déterminée, 1em est supposé être la largeur d'une cellule de la grille horizontalement et la hauteur d'une cellule verticalement.</div>
<h3 id="height">height</h3>
<p><strong>Valeur&nbsp;:</strong> {{ Xref_csslength() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>La fonctionnalité de média <code>height</code> décrit la hauteur de la surface de rendu du périphérique de sortie (comme la hauteur de la zone de rendu à l'écran ou de la surface imprimable sur une imprimante).</p>
<div class="note">
  <strong>Note&nbsp;:</strong> Firefox changera de feuille de style si l'utilisateur redimensionne la fenêtre selon les requêtes utilisant les fonctionnalités de média <code>width</code> et <code>height</code>.</div>
<h3 id="monochrome">monochrome</h3>
<p><strong>Valeur&nbsp;:</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Indique le nombre de bits par pixels sur un périphérique monochrome (échelle de gris).&nbsp;Si le périphérique n'est pas monochrome, la valeur est zéro.</p>
<h4 id="Exemples">Exemples</h4>
<p>Pour appliquer une feuille de style à tous les périphériques monochromes :</p>
<pre>
@media all and (monochrome) { ... }
</pre>
<p>Pour appliquer une feuille de style aux périphériques monochromes avec au moins 8 bits par pixel :</p>
<pre>
@media all and (min-monochrome: 8) { ... }
</pre>
<h3 id="orientation">orientation</h3>
<p><strong>Valeurs :</strong> <code>landscape</code> | <code>portrait</code><br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Indique si l'appareil est en mode paysage (l'écran est plus large que haut) ou en mode portrait (l'écran est plus haut que large).</p>
<h4 id="Exemple">Exemple</h4>
<p>Pour appliquer une feuille de style uniquement en mode portrait :</p>
<pre>
@media all and (orientation:&nbsp;portrait) { ... }</pre>
<h3 id="resolution">resolution</h3>
<p><strong>Valeur&nbsp;:</strong> {{ Xref_cssresolution() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssbitmap() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>Indique la résolution (densité de pixels) du périphérique de sortie.&nbsp;La résolution peut être spécifiée soit en points par pouce (<em>dpi</em>) ou en points par centimètre (<em>dpcm</em>).</p>
<h4 id="Exemple">Exemple</h4>
<p>Pour appliquer une feuille de style à des périphériques avec une résolution d'au moins 300 points par pouce :</p>
<pre>
@media print and (min-resolution: 300dpi) { ... }
</pre>
<h3 id="scan">scan</h3>
<p><strong>Valeur&nbsp;:</strong> <code>progressive</code> |&nbsp;<code>interlace</code><br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_csstv() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>Décrit le processus de balayage des périphériques de sortie de type télévision.</p>
<div class="note">
  <strong>Note&nbsp;:</strong>Gecko (et donc Firefox) ne gère pas le type de média <code>tv</code>, cette fonctionnalité de média n'est pas conséquent pas gérée.</div>
<h4 id="Exemple">Exemple</h4>
<p>Pour appliquer une feuille de style uniquement aux télévisions à balayage progressif :</p>
<pre>
@media tv and (scan: progressive) { ... }
</pre>
<h3 id="width">width</h3>
<p><strong>Valeur&nbsp;:</strong> {{ Xref_csslength() }}<br />
  <span style="font-weight: bold;">Média</span><strong>&nbsp;:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> oui</p>
<p>La fonctionnalité de média <code>width</code> décrit la largeur de la surface de rendu du périphérique de sortie (comme la largeur de la zone de rendu à l'écran ou de la surface imprimable sur une imprimante).</p>
<div class="note">
  <strong>Note&nbsp;:</strong> Firefox changera de feuille de style si l'utilisateur redimensionne la fenêtre selon les requêtes utilisant les fonctionnalités de média <code>width</code> et <code>height</code>.</div>
<h4 id="Exemples">Exemples</h4>
<p>Pour spécifier une feuille de style pour les périphériques portables ou dont l'écran est plus large que 20em, vous pouvez utiliser cette feuille de style :</p>
<pre>
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
</pre>
<p>Cette requête spécifie une feuille de style à appliquer aux médias imprimés plus larges que 8,5 pouces :</p>
<pre>
&lt;link rel="stylesheet" media="print and (min-width:&nbsp;8.5in)"
    href="http://foo.com/mystyle.css" /&gt;
</pre>
<p>Cette requête spécifie une feuille de style utilisable lorsque la zone d'affichage est large de 500 à 800 pixels :</p>
<pre>
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
</pre>
<h2 id="Fonctionnalit.C3.A9s_de_m.C3.A9dias_sp.C3.A9cifiques_.C3.A0_Mozilla">Fonctionnalités de médias spécifiques à Mozilla</h2>
<p>{{ gecko_minversion_header("1.9.2") }}</p>
<p>Mozilla offre un certain nombre de fonctionnalités de médias spécifiques à Gecko. Certaines d'entre-elles pourront être proposées comme fonctionnalités officielles.</p>
<h3 id="-moz-images-in-menus">-moz-images-in-menus</h3>
<p><strong>Valeur :</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS&nbsp;pseudo class.</p>
<h3 id="-moz-mac-graphite-theme">-moz-mac-graphite-theme</h3>
<p><strong>Valeur :</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>If the user has configured their device to use the "Graphite" appearance on Mac OS&nbsp;X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS&nbsp;X, this is 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS&nbsp;pseudo class.</p>
<h3 id="-moz-maemo-classic">-moz-maemo-classic</h3>
<p><strong>Valeur :</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS&nbsp;pseudo class.</p>
<h3 id="-moz-scrollbar-end-backward">-moz-scrollbar-end-backward</h3>
<p><strong>Valeur :</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS&nbsp;pseudo class.</p>
<h3 id="-moz-scrollbar-end-forward">-moz-scrollbar-end-forward</h3>
<p><strong>Valeur :</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS&nbsp;pseudo class.</p>
<h3 id="-moz-scrollbar-start-backward">-moz-scrollbar-start-backward</h3>
<p><strong>Valeur :</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS&nbsp;pseudo class.</p>
<h3 id="-moz-scrollbar-start-forward">-moz-scrollbar-start-forward</h3>
<p><strong>Valeur :</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS&nbsp;pseudo class.</p>
<h3 id="-moz-scrollbar-thumb-proportional">-moz-scrollbar-thumb-proportional</h3>
<p><strong>Valeur :</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS&nbsp;pseudo class.</p>
<h3 id="-moz-touch-enabled">-moz-touch-enabled</h3>
<p><strong>Valeur :</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS&nbsp;pseudo class.</p>
<h4 id="Example">Example</h4>
<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p>
<h3 id="-moz-windows-classic">-moz-windows-classic</h3>
<p><strong>Valeur :</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS&nbsp;pseudo class.</p>
<h3 id="-moz-windows-compositor">-moz-windows-compositor</h3>
<p><strong>Valeur :</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>If the user is using Windows with the DWM&nbsp;compositor, this is 1; otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS&nbsp;pseudo class.</p>
<h3 id="-moz-windows-default-theme">-moz-windows-default-theme</h3>
<p><strong>Valeur :</strong> entier<br />
  <span style="font-weight: bold;">Média</span><strong> :</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepte les préfixes min/max&nbsp;:</strong> non</p>
<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS&nbsp;pseudo class.</p>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li>
  <li><a class="internal" href="/en/CSS/@media" title="En/CSS/@media">Media types</a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/Media_queries" } ) }}</p>
Revenir à cette révision