@media

La règle @ @media permet d'associer un ensemble d'instructions imbriquées (délimité par des accolades) avec une condition définie par une requête média. La règle @media peut être utilisé au niveau le plus haut de la feuille de style et également à l'intérieur d'un groupe de règles conditionnel.

Il est possible de manipuler la règle @ @media via le CSSOM, notamment grâce à l'interface CSSMediaRule.

Syntaxe

@media <media-query-list> {
  <group-rule-body>
}

Une requête média (type <media-query>) est composée d'un type de média (optionnel) et/ou de différentes caractéristiques relatives au média.

Les types de média

all: Peut être appliqué quel que soit l'appareil.
print: Destiné aux œuvres paginés et aux documents qui sont vus sur des écrans pour l'aperçu avant impression. Se référer aux pages sur les médias paginés et au tutoriel médias pour les problématiques liées aux médias paginés.
screen: Destiné aux écrans d'ordinateur en couleurs.
speech: Destiné aux synthétiseurs vocaux. CSS2 possédait un type de média similaire : aural.

Note : CSS2.1 et Media Queries 3 définissaient d'autres types de média (tty, tv, projection, handheld, braille, embossed, aural) qui ont été déprécis avec la spécification Media Queries 4, ces types ne doivent plus être utilisés

Les caractéristiques relatives au média

Chaque caractéristique média teste une caractéristique donnée pour le navigateur ou l'appareil afin de savoir si les règles conditionnelles s'appliquent.

Nom	Résumé	Notes
`width`	Largeur de la zone d'affichage (viewport).
`height`	Hauteur de la zone d'affichage (viewport).
`aspect-ratio`	Proportion de la largeur sur la hauteur pour la zone d'affichage (viewport).
`orientation`	Orientation de la zone d'affichage (viewport).
`resolution`	Densité de pixels pour l'appareil d'affichage
`scan`	Méthode de composition de l'image sur l'appareil d'affichage.
`grid`	Est-ce que l'appareil fonctionne avec un affichage en grille ou un affichage matricielle (bitmap) ?
`update-frequency`	La vitesse à laquelle l'appareil d'affichage peut modifier l'apparence du contenu.	Ajouté avec la spécification sur les requêtes média de niveau 4
`overflow-block`	La façon dont l'appareil d'affichage gère le contenu qui dépasse de la zone d'affichage (viewport) dans le sens de bloc (sens « logique » orthogonal au sens de lecture).	Ajouté avec la spécification sur les requêtes média de niveau 4
`overflow-inline`	Est-ce que le contenu qui dépasse de la zone d'affichage dans le sens inline (sens logique qui suit le sens de lecture) peut être lu en utilisant le défilement (scrolling) ?	Ajouté avec la spécification sur les requêtes média de niveau 4
`color`	Le nombre de bits pour chaque composante de couleur de l'appareil d'affichage (zéro si l'appareil ne rend pas les couleurs).
`color-index`	Le nombre d'éléments dans le tableau des couleurs de l'appareil d'affichage (ou zéro si l'appareil n'utilise pas de tel tableau).
`display-mode`	Le mode d'affichage de l'application tel que défini dans le manifeste de l'application web (via display).	Défini dans la spécification des manifestes pour les applications web.
`monochrome`	Le nombre de bits par pixel pour le tampon de rendu monochrome de l'appareil d'affichage (zéro si l'appareil n'est pas monochrome).
`inverted-colors`	Détermine si l'agent utilisateur ou si le système d'exploitation sous-jacent inverse les couleurs.	Ajouté avec la spécification sur les requêtes média de niveau 4
`pointer`	Est-ce que le mécanisme de saisie principal est un pointeur et si oui, quelle est sa précision ?	Ajouté avec la spécification sur les requêtes média de niveau 4
`hover`	Est-ce que le mécanisme de saisie principal permet à l'utilisateur de survoler les éléments ?	Ajouté avec la spécification sur les requêtes média de niveau 4
`any-pointer`	Est-ce que l'un des mécanismes de saisie est un pointeur et si oui, quelle est sa précision ?	Ajouté avec la spécification sur les requêtes média de niveau 4
`any-hover`	Est-ce que l'un des mécanismes de saisie permet à l'utilisateur de survoler les éléments ?	Ajouté avec la spécification sur les requêtes média de niveau 4
`light-level`	Le niveau de lumière ambiante actuel.	Ajouté avec la spécification sur les requêtes média de niveau 4
`scripting`	La manipulation via les scripts (ex. JavaScript) est-elle disponible ?	Ajouté avec la spécification sur les requêtes média de niveau 4
`device-width`	La largeur de la surface de rendu sur l'appareil d'affichage.	Déprécié dans la spécification sur les requêtes média de niveau 4
`device-height`	La hauteur de la surface de rendu sur l'appareil d'affichage.	Déprécié dans la spécification sur les requêtes média de niveau 4
`device-aspect-ratio`	La ratio entre la largeur et la hateur de la surface de rendu sur l'appareil d'affichage.	Déprécié dans la spécification sur les requêtes média de niveau 4
`-webkit-device-pixel-ratio`	Le nombre de pixels physique par pixel CSS.	Non-standard. Spécifique à WebKit/Blink. On préfèrera utiliser `resolution`.
`-webkit-transform-3d`	Indique la prise en charge des transformations CSS 3D (`transform`)	Non-standard. Spécifique à WebKit/Blink.
`-webkit-transform-2d`	Indique la prise en charge des transformations CSS 2D (`transform`	Non-standard. Spécifique à WebKit.
`-webkit-transition`	Indique la prise en charge des transitions CSS (`transition`)	Non-standard. Spécifique à WebKit.
`-webkit-animation`	Indique la prise en charge des animations CSS (`animation`)	Non-standard. Spécifique à WebKit.

Exemples

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

@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    body { line-height: 1.4 }
}

Spécifications

Spécification	État	Commentaires
Web Compatibility Standard La définition de 'CSS Media Queries' dans cette spécification.	Standard évolutif	Standardisation des caractéristiques `-webkit-device-pixel-ratio` et `-webkit-transform-3d`.
CSS Conditional Rules Module Level 3 La définition de '@media' dans cette spécification.	Candidat au statut de recommandation	Définition de la syntaxe basique de `@media`.
Media Queries Level 4 La définition de '@media' dans cette spécification.	Version de travail	Ajout des caractéristiques `scripting`, `pointer`, `hover`, `light-level`, `update-frequency`, `overflow-block`, et `overflow-inline`. Dépréciation de de tous les types de mdéia à l'exception de `screen`, `print`, `speech` et `all`.
Media Queries La définition de '@media' dans cette spécification.	Recommendation	Aucune modification.
CSS Level 2 (Revision 1) La définition de '@media' dans cette spécification.	Recommendation	Définition initiale.

Fonctionnalité	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Support simple (`all`, `print`, `screen`)	1.0	1.0 (1.7 ou moins)	6.0	9.2	1.3
`speech`	Pas de support	Pas de support	Pas de support	9.2	Pas de support
Caractéristiques média	1.0	1.0 (1.7 ou moins)	9.0	9.2	1.3
Caractéristique `display-mode`	?	47 (47)	?	?	?

Fonctionnalité	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Support simple (`all`, `print`, `screen`)	1.0	1.0 (1.7)	(Oui)	9.0	3.1
`speech`	Pas de support	Pas de support	Pas de support	9.0	Pas de support
Caractéristiques média	1.0	1.0 (1.7)	(Oui)	9.0	3.1
Caractéristique `display-mode`	?	(Oui)	?	?	?

Voir aussi

Les requêtes média
L'interface CSSOM CSSMediaRule qui est associée avec cette règle @.