CSS:@media

Un article de MDC.

« Référence CSS

[modifier] 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ées par des accolades).

[modifier] Syntaxe

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

[modifier] 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 (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 correspondant 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 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 du type télévision (basse résolution, couleur, défilement limité, sonorisé).

[modifier] 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

[modifier] Exemples

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

[modifier] 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.

[modifier] Spécifications

• CSS 2 ou CSS 2.1 (en)

[modifier] Compatibilité des navigateurs

[modifier] Voir également

@import, @font-face