@media{} CSS règle

Définition de la CSS @media{}.

La règle CSS @media permet de créer d'autres propriétés pour divers supports appelé aussi média (print, screen) au sein d'une même feuille de style.
On peut spécifier le ou les médias après la déclaration de la règle de feuille de style @media css

div { font-size : 12px;}
@media print, screen{
  div { color : red;}
}
// Depuis CSS3
@media screen and (min-width: 700px) and (orientation: landscape) {
  div { color : red;}
}

la règle de feuille de style @media CSS accepte comme média :

• all : convient pour tous les appareils ;
• aural : pour les synthétiseurs de parole (désapprouvé en CSS 2.1).
• braille : pour les appareils braille à retour tactile.
• handheld : pour les appareils portatifs (typiquement ceux avec petits écrans, monochromes et à bande passante limitée).
• print : destiné à un support paginé opaque et aux documents vus sur écran en mode aperçu avant impression.
• projection : pour les présentations en projection, par exemple avec des projecteurs ou des impressions pour des transparents.
• screen : pour principalement les moniteurs couleurs.
• tty : pour les médias utilisant une grille de caractères fixe, tels les télétypes, les terminaux ou les appareils portatifs 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 : pour les appareils du type télévision (avec ces caractéristiques : basse résolution, couleur, défilement des pages limité, sonorisé).
• embossed : pour les appareils à impression braille (ajouté en CSS 2.1).
• speech : pour les synthétiseurs de parole (ajouté en CSS 2.1).
• la règle CSS @media accepte plusieurs médias séparés par une virgule.

Exemple de code @media{} CSS

Conditions d'application de la CSS @media{}.

La règle de feuille de style @media CSS permet de cacher de certaines propriétés CSS qui ne seraient pas compatibles avec les vieux navigateurs.
La règle CSS @media n'a pas d'équivalence en HTML ou XHTML.

Problème d'interprétation de @media{} en Css.

La règle de feuille de style @media CSS pose des problèmes car tous les médias ne sembles pas être pris en comptes par certains navigateurs.
Pour les valeur screen, print et all sont interprétées par Internet Explorer 6+, Firefox 1+, Chrome 1+, et Safari 1.3+
FireFox ne prend pas en compte la règle si le média n'est pas spécifié.

Evolutions de la syntaxe CSS de @media{}.

En CSS 3, la règle CSS @media CSS accepte une "Media Query" qui permet de mettre des règles supplémentaires autre que les médias (tailles, résolutions, orientation, etc...).