Avec l’avènement des smartphones et des tablettes, il est possible d’accéder à un site avec des « devices » de résolution très différentes. Voyons comment via CSS modifier l’affichage de votre site en fonction de la résolution du terminal utilisé, sans pour autant modifier le code HTML.
C’est ce que l’on appelle le responsive design. Il existe 2 approches :
- Mobile First ou amélioration progressive : cela consiste à concevoir votre site pour les petits terminaux et ajouter des améliorations pour les résolutions plus grande.
- Desktop First ou dégradation élégante : dans cette approche, il s’agit de concevoir pour de grands écrans et supprimer les effets et éléments superflus pour les petits écrans.
La notion de responsive design ne se limite pas seulement aux media queries. L’adaptation pouvant se faire par d’autres moyens, par JavaScript notamment.
En terme de performance, les petits écrans sont souvent associés à des smartphones, moins performant que les ordinateurs de bureau par exemple. L’approche Mobile First sera moins gourmande. En effet, dans le cas du Desktop First, l’affichage par défaut sera adapté pour les grands écrans. La feuille de style sera appliquée puis ensuite les couches pour l’adaptation pour les petits écrans. Ainsi, plusieurs règles pour les mêmes éléments seront interprétées.
En HTML4/CSS2, il est possible de définir des styles en fonction du média (écran, imprimante, projecteur, …).
Les Media Queries CSS3 vont plus loin et permettent d’adapter votre site en fonction de paramètres comme :
- l’orientation du terminal (portrait ou paysage) : orientation
- la hauteur : height
- la largeur : width
- la hauteur du terminal : device-height
- la largeur du terminal : device-width
- le ratio : aspect-ratio
- …
Syntaxe
Les media queries désignent l’expression qui permet de définir dans quel cas le code CSS doit être utilisé. Ce sont des expressions logiques qui peuvent contenir plusieurs conditions. Les opérateurs logiques disponibles sont :
- and : et
- only : seulement
- not : non
A noter que le ou se fait via la virgule. En effet, on pourra définir plusieurs cas pour lesquels le style est applicable en séparant plusieurs media queries par une virgule.
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
/* Code CSS */
}
Utilisation
L’utilisation des media queries dans votre page peut se faire via plusieurs techniques.
Fichier CSS unique
Le code CSS pour vos différentes adaptations peut être inclus dans un seul fichier. Le code spécifique pour une « adaptation » (résolution, orientation, …) étant inclus dans un sous bloc définissant les règles d’application. Dans l’exemple ci-dessous, la couleur de fond change pour les terminaux de type écran dont la largeur est inférieure à 480px.
/* fond gris par défaut */
body {
background : #CCC;
}
@media only screen and (max-device-width: 480px) {
/* fond blanc pour les terminaux de type écran dont la largeur est inférieure à 480px */
body {
background : #FFF;
}
}
Fichiers séparés
Il est également possible de mettre le code spécifique dans des fichiers séparés. La règle d’application étant définie dans l’attribut média de la balise link.
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
Configuration du viewport pour les terminaux mobiles
Dans le cas des terminaux mobiles comme des smartphones, il est nécessaire de configurer ce qu’on appelle le viewport afin de s’assurer que la résolution cible soit la résolution du terminal. En effet, afin d’assurer une compatibilité des sites pour les smartphones, le navigateur est configuré avec une résolution plus grande que celle de l’écran. Ainsi le site s’affiche pour une résolution plus grande ce qui oblige l’utilisateur a zoomer. La configuration se fait via la balise meta viewport.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Pour en savoir plus, je vous conseille l’article Comprendre le Viewport dans le Web mobile d’Alsacreations.
Maj du 1er Novembre 2012 :
Il est maintenant possible de déclarer le viewport directement en CSS via la directive @viewport.
@viewport{
width: device-width;
zoom: 1;
}
Pour en savoir plus, je vous invite à lire l’article Utilisez @viewport pour le Responsive!
Exemples
Voici une petite liste d’exemples qui montre la puissance des media queries :
- L’exemple typique : Un gabarit de site qui s’adapte à la résolution du navigateur (exemple issus du site Alsacreations)
- Des exemples plus originaux :
- Santa’s Media Queries : le nombre des membres de la famille Simpson diminue avec la résolution
- Too many fish is the sea : Le nombre de poisson diminue avec la résolution avec une animation (fonctionne seulement sous Firefox)
- CSS3 Cherry Blossom : Animation de floraison d’un arbre lors de l’agrandissement de la résolution.
Liens
Voici quelques liens/ressources qui m’ont servi pour cet article :
Conclusion
L’utilisation des media queries permet d’adapter facilement un site à différents médias. Il est ainsi possible d’adapter votre site en fonction de la résolution, l’orientation, l’aspect ratio, … afin que ce dernier soit utilisable quelque soit le terminal (ordinateur, smartphone, tablette, TV, ..) sans pour autant modifier le code HTML. Il faut bien prendre en compte ce dernier point. En effet, si les fonctionnalités de la version mobile sont beaucoup plus réduites, il sera plus performant d’avoir une version dédiée à ces supports afin de ne pas charger un trop grand nombre d’éléments inutiles.
Le support des Media Queries est bon pour les navigateurs modernes mais peut poser problème sur les anciennes versions (IE 6/7/8, Firefox < 3.5, Safari 2 notamment). Il existe des solutions (polyfills) afin d’utiliser cette technologie sur les navigateurs non compatibles comme les librairies JavaScript Respond.js ou Enquire.js.
