CSS

Les Media Queries CSS3

Article par (Alsacréations, Strasbourg)
Créé le , mis à jour le (309873 lectures)
Tags : css, html, css3, media queries, media, @media, query

La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS.

Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc.

Approche historique

Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. C'est ainsi que l'on a pu associer des règles CSS complémentaires pour l'impression, modifiant la mise en page, favorisant tel élément ou faisant disparaître un autre inutile à la sortie sur papier, par exemple un menu de navigation. La balise <link> est alors dupliquée pour autant de feuilles de style que nécessaire, et comporte un attribut media précisant le contexte dans lequel les styles doivent être appliqués :

<!doctype html>
<head>
<meta charset="utf-8">
<title>Media Queries !</title>
<link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
<link rel="stylesheet" media="print" href="print.css" type="text/css" />
</head>
<body>
...
</body>

L'attribut media peut prendre (depuis CSS2) les valeurs suivantes :

screen
Écrans
handheld
Périphériques mobiles ou de petite taille
print
Impression
aural (CSS 2.0) / speech (CSS 2.1)
Synthèses vocales
braille
Plages braille
embossed
Imprimantes braille
projection
Projecteurs (ou présentations avec slides)
tty
Terminal/police à pas fixe
tv
Téléviseur
all
Tous les précédents
Braille
Une impression braille (embossed)

Ces directives peuvent parfaitement être intégrées au sein même d'une feuille de style grâce à une règle @media suivie directement du type. La syntaxe sera alors légèrement différente :

@media print {
  #menu, #footer, aside {
    display:none;
  }
  body {
    font-size:120%;
    color:black;
  }
}

Note : d'autres variantes peuvent exister avec la règle @import, cependant celle-ci pose quelques problèmes de performance sur d'anciens navigateurs et se voit ignorée lorsqu'elle est utilisée en combinaison avec les media queries sur Internet Explorer versions inférieures à 8. Ce point ne sera donc pas approfondi ici.

Or, les médias peuvent être très variés, surtout en ce qui concerne les écrans. De surcroît, tout dépend du support de l'interprétation de ces définitions. Rien n'oblige un périphérique ou un navigateur à appliquer ce qui semblerait le plus indiqué. Par exemple, la règle media handheld est ignorée par la grande majorité des navigateurs mobiles, y compris par Safari Mobile sur iOS qui se considère comme un média screen.

Syntaxe des Media Queries CSS3

La philosophie des Media Queries (ou requêtes de media) en CSS3 est d'offrir un panel de critères plus vaste et plus précis, à l'aide de propriétés et de valeurs numériques, ainsi que de combinaisons multiples de ces mêmes critères. Le but est de cibler plus finement les périphériques de destination en fonction de leurs capacités intrinsèques.

L'écriture de ces requêtes est relativement explicite (en anglais) : une media query est une expression dont la valeur est toujours vraie ou fausse. Il suffit d'associer les différentes déclarations possibles avec un opérateur logique pour définir l'ensemble des conditions à réunir pour l'application des styles compris dans le bloc adjacent.

Les opérateurs logiques peuvent être :

  • and "et",
  • only "uniquement"
  • not "non".

Pour obtenir l'équivalent du "ou", il suffit d'énumérer différentes media queries à la suite, séparées par des virgules : si l'une d'entre elles est valable, alors l'ensemble de la règle sera appliquée.

En général, on combine ensemble un type de média (screen, all...) et une expression grâce à and, bien qu'une expression seule puisse être utilisée. L'expression est toujours écrite entre parenthèses.

Les deux exemples suivants ciblent les écrans de largeur inférieure à 640 pixels grâce à la règle max-width associée à la valeur 640px.

<link rel="stylesheet" media="screen and (max-width: 640px)" href="smallscreen.css" type="text/css" />
@media screen and (max-width: 640px) {
  .bloc {
    display:block;
    clear:both;
  }
}

Les combinaisons peuvent être multiples. Ici l'on s'adresse à un écran dont la résolution en largeur est comprise entre 200 et 640 pixels :

@media screen and (min-width: 200px) and (max-width: 640px) {
  .bloc {
    display:block;
    clear:both;
  }
}

Fonctionnalités

La plupart des critères (ou fonctionnalités) peuvent être préfixés par min- et max- lorsqu'elles acceptent des valeurs numériques pour définir des valeurs minimales ou maximales à respecter.

color
support de la couleur (bits/pixel)
color-index
périphérique utilisant une table de couleurs indexées
aspect-ratio
ratio du périphérique de sortie (par exemple 16/9)
device-aspect-ratio
ratio de la zone d'affichage
device-height
dimension en hauteur du périphérique
device-width
dimension en largeur du périphérique
grid
périphérique bitmap ou grille (ex : lcd)
height
dimension en hauteur de la zone d'affichage
monochrome
périphérique monochrome ou niveaux de gris (bits/pixel)
orientation
orientation du périphérique (portait ou landscape)
resolution
résolution du périphérique (en dpi, dppx, ou dpcm)
scan
type de balayage des téléviseurs (progressive ou interlace)
width
dimension en largeur de la zone d'affichage

Les dimensions pourront être évaluées avec des unités (px, em). Les ratio avec des fractions (entier/entier). Une résolution sera définie en dpi (points par pouce) ou en dpcm (points par centimètres).

Certaines de ces propriétés peuvent être testées d'une façon raccourcie sans valeur, par exemple (color) qui sera équivalent à (min-color: 1) ou considérée comme vraie pour une valeur différente de 0. La fonctionnalité monochrome n'est pas uniquement booléenne avec la syntaxe raccourcie (monochrome), on peut aussi considérer un nombre de niveaux de gris, par exemple (min-monochrome: 2) pour 2 bits par pixel.

Démonstrations

Avec les navigateurs modernes (Firefox, Chrome, Opera, Safari) il est tout à fait possible de tester les media queries "en direct" simplement en redimensionnant la fenêtre. Vous verrez les feuilles de style s'appliquer dynamiquement :


Démonstration CSS media queries

Voici un exemple de disposition changeante en 3 étapes avec min-width et max-width.

Media Queries CSS Layout
Démonstration CSS media queries avec mise en page

Au service des mobiles

Dans la majorité des cas, on utilise les media queries pour produire des améliorations spécifiques à l'affichage sur les mobiles, qui sont directement concernés par des critères sur les dimensions de l'écran (en terme de résolution et d'espace disponible) et sur l'utilisation tactile. Les périphériques sous iOS (iPhone, iPod, iPad...) supportent relativement bien les media queries.

Ainsi on retrouvera le plus fréquemment des règles pour :

  • agrandir la taille du texte
  • agrandir la taille des contrôles et zones cliquables (pour une utilisation au doigt)
  • faire passer le contenu sur une seule colonne
  • masquer ou afficher des éléments spécifiques
  • ajuster les dimensions et marges

La fonctionnalité orientation a été introduite pour des périphériques pouvant être orientés, par exemple l'iPad. On peut alors déclarer une feuille de style spécifique pour ajuster l'affichage :

<link rel="stylesheet" media="(orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation:landscape)" href="paysage.css">

Certains navigateurs classiques l'implémentent également en version bureau et calculent le ratio hauteur/largeur pour simuler un affichage "orienté".

Autres exemples

Impression sur un support plus large que 5 pouces :

print and (min-width: 5in)

Ecrans possédant un ratio 16/9 ou 16/10e :

tv, (device-aspect-ratio: 16/9), (device-aspect-ratio: 16/10)

Support et alternatives

Les navigateurs sont inégaux face aux media queries, mais cela tend à s'améliorer.

  • Mozilla Firefox : 3.5+
  • Internet Explorer : 9+
  • Google Chrome : 5+
  • Opera : 10.5+, Opera Mobile : 10+, Opera Mini : 5+
  • Apple Safari : 4+ et iOS (mobile) 3.2+
  • Android : 2.1+
  • WebKit en général

Globalement, si un navigateur ne les supporte pas du tout, il continuera à appliquer la règle concernant le type de média qui figure en début de chaîne.

<link rel="stylesheet" media="screen and (max-width: 640px)" href="smallscreen.css" />

On peut choisir d'exclure tous ceux ne supportant pas les media queries en utilisant comme préfixe de déclaration l'opérateur only.

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

Le retardataire le plus marquant est encore une fois Internet Explorer. Il existe quelques alternatives en JavaScript néanmoins pour ce navigateur et les plus anciens, telles que des plugins jQuery (MediaQueries) ou une librairie JavaScript nommée Respond.js qui apporte un support minimaliste des media queries par la lecture de la feuille de style et des propriétés du document HTML pour IE 6 à 8, Firefox 1 à 3 et Safari 2. Cette méthode est appliquée par Raphaël sur la page Playing with CSS3 Media Queries.

Exemples

Voici, parmi tant d'autres, un site appliquant ces principes à bon escient, dans le cadre d'une surface d'affichage réduite :

Juslisen (gagnant du dernier concours Alsacreations)

Juslisen CSS media queries

Les sites web alsacreations.fr (agence web) et alsacreations.com bénéficient eux aussi de ce mécanisme pour affiner l'affichage sur petits écrans.

Ressources

Commentaires

Skoua a dit le

Superbe article, ça faisait longtemps que je voulais clarifier un peu tout ce qu'on peut et ne peut pas faire avec les media queries.

Merci dew !

Victor BRITO a dit le

Un article à garder bien au chaud.

En ce qui concerne la fonctionnalité orientation sous les navigateurs pour bureau, elle est prise en charge par Opera 10.6 et versions ultérieures (mais pas par Opera Mini 5 ni par Opera Mobile 10), Firefox 3.5 et versions ultérieures, Safari 4 et versions ultérieures, Google Chrome (du moins la version 8) et… IE 9.

Raphael a dit le

C'est pas pour dire du bien, mais voilà enfin un article de fond sur des technologies CSS3 qui - pour une fois - ne parlent pas de border-radius ou de font-face :)

doc mcfly a dit le

Parfait. Je dois maintenant créer un design spécial !
Il faudrait un tuto

Oziris a dit le

Enfin l'article sur les media queries...C'est depuis la victoire de Juslisen que je m'y suis interessé. En fait, çà remet vraiment en question le code initial, qui équivaut presque à le refaire.
Mais le jeu en vaut la chandelle, c'est vraiment agréable sur un smartphone, et desfois mieux !

Raphael a dit le

@doc mcfly : un tuto me semble jouable, mais il y a vraiment beaucoup de points dont il faut tenir compte.
A vrai dire, nous avons une journée de formation entière sur ce thème sur formations.alsacreations.fr

Vaxilart a dit le

Merci, ça clarifie vraiment énormément toutes les possibilités des media queries !

En passant, les deux liens de la section démonstrations mènent à la même page. J'ai eu l'impression que c'était une erreur en lisant et pensant devoir associé les liens à l'image les précédent

N-J a dit le

Très intéressant, ne pas oublier les "min-device-pixel-ratio" pour détecter les écran à haute densité de pixels.
A voir absolument pour bien supporter le maximum de supports :
http://forabeautifulweb.com/blog/about/hardbo...

hicman a dit le

merci c'est ce que je cherchais depuis une éternité

rousselinthomas a dit le

Superbe article, très bien écrit et très compréhensible pour un newbie :)
Ce site est pour moi une référence dans mon auto-formation, merci à vous pour tout ce partage de savoir !

Nadegal a dit le

Enfin un peu de lumière sur ce sujet
Merci