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 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 ?  
any-hover Est-ce que l'un des mécanismes de saisie permet à l'utilisateur de survoler les éléments ?  
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.

Compatibilité des navigateurs

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

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, fscholz, Chealer, teoli, wakka27, FredB, VincentN, ethertank, Fredchat
 Dernière mise à jour par : SphinxKnight,