RWD
Le “responsive web design” est un terme popularisé par Ethan Marcotte en 2010, d’abord lors de sa conférence “A Dao of Flexibility” (An Event Apart, Seattle, avril 2010), puis dans un article (mai 2010), puis dans un livre (2011).
Media Queries et RWD (Responsive Web Design)
L’élément-clé qui est au coeur de cette approche “responsive” du web design sont les Media Queries, un propriété introduite avec le CSS3.
L’ancêtre des Media Queries: les styles CSS pour l’impression
Depuis le standard HTML4/CSS2, introduit en 1997, un attribut media
est disponible, permettant de réserver des styles CSS à un certain type de médias. Voici leur liste:
all
aural
braille
embossed
handheld
print
projection
screen
tty
tv
En théorie, le CSS peut donc définir des styles particuliers pour des “médias” spécifiques – ces médias pouvant être des écrans (screen
), moniteurs de télévision (tv
), projecteurs (projection
), mais aussi des systèmes de synthèse vocale (aural
), voire des appareils rendant les contenus de manière tactile (braille
, embossed
).
Cependant, dans la pratique réelle, les seuls medias qui soient supportés par les navigateurs sont screen
et print
.
On utilise l’attribut media print
pour charger des styles CSS spécifiques pour l’impression d’une page web:
<link rel="stylesheet" media="print" href="impression.css">
Ou à l’intérieur d’une feuille de styles CSS, avec la syntaxe suivante:
@media print {
* {
background: #fff;
color: #000;
}
}
Pour un bon exemple de styles destinés à optimiser une page web pour l’impression, on peut se référer au HTML5 Boilerplate. Lire également cet article de Manuel Matuzovic.
Références concernant @print
- Faites bonne impression avec les CSS, par Eric A. Meyer, 2002
- Maîtriser l’impression CSS, par Nicolas Hoffmann, 2010
- La spécification CSS 2.1
- Les styles @print du HTML5Boilerplate - ces styles étaient aussi utilisés dans Bootstrap 4 (mais plus depuis la version 5).
Les Media Queries du CSS3
Avec l’évolution du HTML5 et CSS3, les possibilités de l’attribut “media” sont étendues: on peut charger des styles selon le format de la fenêtre du navigateur, la largeur, la hauteur, la densité des pixels…
Cela a rendu possible le “Responsive Web Design” (RWD).
Un exemple de Media Query:
@media screen and (min-width: 20em) {
.member-list {
column-count: 2;
}
}
On peut aussi omettre le mot-clé screen
si on souhaite que les styles s’appliquent sur tous les supports:
@media (min-width: 20em) {
/* Déclarations */
}
On peut cumuler différents critères avec le mot-clé and
:
@media (orientation: portrait) and (min-width: 20em) {
/* Déclarations */
}
@media (min-width: 30em) and (max-width: 50em) {
/* … */
}
Ce qu’on peut détecter avec des Media Queries:
- Les dimensions -
width
etheight
- avec les préfixesmin-
etmax-
. - L’orientation de l’écran, avec les valeurs
portrait
oulandscape
(paysage). - Le ratio hauteur/largeur de l’écran, avec
aspect-ratio
. - La résolution, mesurée en DPI, avec les préfixes
min-
etmax-
et une valeur comme144dpi
. On peut aussi mesurer la densité par pixel (dppx), avec des valeurs comme1.5dppx
ou2dppx
. - La préférence d’un mode sombre avec
prefers-color-scheme: dark
.
@media (aspect-ratio: 16/9) {
/* … */
}
@media (min-resolution: 144dpi) {
/* … */
}
@media (prefers-color-scheme: dark) {
/* … */
}
Concernant la résolution, selon Raphaël Goetter:
Il existe des tas de résolutions différentes à l’heure actuelle ; ça dépend entièrement de l’appareil. Certains, comme les ordinateurs non-retina sont à 1. Des téléphones sont à 1.3, d’autres à 1.5, des appareils de tout type sont à 2, certains sont à 3. C’est pour cette raison qu’il est préférable de tester une résolution supérieure à 1.3 ou 1.5, et de traiter tous ces écrans de la même façon.
Le design Mobile First
La méthode du design “Mobile First” consiste à prévoir un design pour les petits écrans en priorité, puis d’élargir le cadre pour les grands écrans. Cette méthode utilise une succession de Media Queries:
/**
* Styles hors d’une Media Query
* pour les petits écrans (smartphones)
*/
@media (min-width: 600px) {
/**
* Styles pour écrans à partir de 600 px de large,
* vraisemblablement les premières tablettes
*/
}
@media (min-width: 900px) {
/**
* Styles pour écrans à partir de 900 px de large,
* les ordinateurs portables et grandes tablettes
*/
}
@media (min-width: 1200px) {
/**
* Styles pour écrans à partir de 1200px de large,
* les écrans de bureau et grands portables
*/
}
Les valeurs-limite que l’on définit pour basculer d’un design (p.ex: petite tablette) vers un autre (p.ex: ordinateur) se nomment Breakpoints.
Tester la hauteur de l’écran
Bien que l’on teste souvent la largeur de l’écran, il peut parfois être utile de conditionner la mise en page en fonction de la hauteur de l’écran. Un cas d’usage intéressant serait de n’implémenter un en-tête fixe que lorsque l’écran fait une certaine hauteur.
.header {
height: 200px;
}
/**
* Uniquement les écrans ayant une hauteur
* d’au moins 800 pixels
*/
@media (min-height: 800px) {
.header {
position: fixed;
top: 0;
}
}
Petit détail important
Pour fonctionner en mode responsive, il faut que dans le <head>
de la page HTML figure la ligne suivante (balise meta viewport):
<meta name="viewport" content="width=device-width, initial-scale=1" />
Références:
- Responsive Web Design, par Ethan Marcotte, alistapart, 2010 (aussi en français)
- Responsive Webdesign – présent et futur de l’adaptation mobile, par Stéphanie Walter, openweb, 2013. Sujets abordés: images responsives,
<picture>
, srcset, image-set(), WebP, flexbox, CSS columns, Grid Layout, iframes, navigation…
Questions de détail
Faut-il les écrire les Media Queries en pixels ou en EM?
Un article qui préconise l’usage des EM:
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/