Vous avez sûrement déjà entendu parler des media queries CSS, peut-être même les utilisez-vous déjà ! Mais savez-vous exactement ce qu’ils sont ? Comment les utiliser à leur plein potentiel ?
Souvent utilisés pour faire du web responsive par les développeurs freelance, les media queries sont bien plus complètes que ce que vous pensez.
Vous voulez en apprendre plus ? Devenir un expert de cette fonctionnalité CSS 3 ? Cet article est fait pour vous !
Les media queries CSS, qu’est-ce que c’est ?
Avant toute chose, reprenons depuis le début. Les media queries, c’est une fonctionnalité apparue avec CSS 3, permettant d’adapter le rendu d’un contenu en fonction de règles que nous expliquerons.
Ces adaptations sont devenues une norme W3C en 2012. Depuis, l’utilisation des media queries est devenue presque obligatoire lorsque l’on parle de site responsive, ou de site web adaptatif.
L’utilisation des media queries
Les règles
On vient de le dire, les media queries servent à adapter le rendu d’un contenu en fonctions de règles, de paramètres.
Parmi ces règles, on retrouve :
color: pour gestion de la couleur ;height: hauteur de la zone d’affichage ;width: largeur de la zone d’affichage ;device-height: hauteur du périphérique ;device-width: largeur du périphérique ;orientation: orientation du périphérique (portrait ou paysage) ;media: type d’écran de sortie. Quelques-unes des valeurs possibles :screen: écran « classique » ;handheld: périphérique mobile ;print: impression ;tv: télévision ;projection: projecteur ;all: tous les types d’écrans.
Si vous utilisez déjà les media queries, vous reconnaissez forcément les règles (max-)width et media.
Prenons cette dernière en exemple, media. Via ce mot-clé, on peut sélectionner sur quel type de média (ou d’afficheur) nos règles CSS vont être appliquées.
On peut donc appliquer un style particulier uniquement aux écrans (c’est ce qu’on fait lorsqu’on fait du responsive web design), mais aussi aux projecteurs, aux télévisions, ou en cas d’impression.
Par exemple, si on veut créer une feuille de style spécifique pour adapter un contenu pour une impression, on utilisera les media queries avec la règle media print. Exemple concret, pour cacher certains éléments non imprimables d’une page web, on aura besoin (entre autres) du code suivant :
@media print {
video, audio {
display: none;
}
}
De cette manière, lors d’une impression, tous les tags video et audio seront cachés sur la page imprimée.
Les opérateurs
Ces règles peuvent être combinées grâce à des des opérateurs logiques. Les voici :
only: « uniquement » ;and: « et » ;not: « non ».
C’est exactement ce qu’on fait lorsqu’on crée du CSS pour de l’adaptation mobile. Ainsi, du code qu’on aimerait appliquer aux fenêtres qui font au plus 1024px de large sera à écrire à l’intérieur de ce media query :
@media screen and (max-width: 1024px)
{
/* Règles CSS à écrire ici */
}
Si on découpe la déclaration de ce media query, on a :
- @media screen : le style s’appliquera uniquement sur les écrans (pas les télévisions, ni projecteurs, etc.) ;
- and : on combine cette règle avec une autre ;
- max-width: 1024px : c’est la deuxième règle ; le code ne s’appliquera que si la fenêtre fait au plus 1024px.
Les media queries et le responsive web design
La plupart du temps, on utilise les media queries pour faire du CSS responsive, du RWD (Responsive Web Design).
C’est exactement ce qu’on a fait dans le dernier exemple de code de la section précédente.
Faire du responsive, ça revient à déclarer tout un tas de media queries différents, et d’y associer du code CSS spécifique, pour adapter l’affichage des éléments en fonctions des appareils et de leurs tailles d’écrans.
Les différentes tailles d’écran
Mais quelles tailles d’écran, exactement ? Avec la multiplications des devices (ordinateurs plus ou moins grands, smartphones, tablettes, phablettes, bientôt smartphones pliables, etc.), on peut facilement se perdre lorsqu’on veut faire du CSS adaptatif.
Car, en effet, le contenu qu’on veut afficher sur un smartphone, une tablette ou un ordinateur n’est pas forcément le même. Il peut y avoir d’importantes différences, par exemple :
- Passer d’un affichage de blocs en colonnes à un affichage de blocs en lignes ;
- Cacher ou afficher certaines images mieux visibles sous l’un ou l’autre type de périphérique ;
- Cacher des données inutiles (par exemple, un QR Code sur un site mobile – mettre un lien à la place).
Il faut donc découper notre style en fonction de ces différentes tailles d’écran, et pour ça définir des breakpoints. Ces breakpoints, correspondant à des largeurs d’écran en pixels, vont être déclarés dans le code CSS pour discriminer les types de devices.
Le choix de ces breakpoints est plutôt subjectif, il n’y a pas aujourd’hui de règles vraiment définies sur la taille d’écran que doit faire un smartphone, par exemple.
Mais, par convention, on définit en général les règles suivantes :
- En dessous de 320 pixels, il s’agit d’un smartphone de petite taille en mode portrait ;
- Entre 320 et 767 pixels, il s’agit d’un smartphone ;
- Entre 768 et 991 pixels, d’une tablette ;
- Au-delà de 992 pixels, d’un ordinateur.
N’oubliez pas que vous pouvez également cumuler les règles pour n’appliquer du style CSS uniquement lorsqu’un périphérique est en mode portrait ou paysage ! Pour une tablette en mode portrait, on pourrait avoir quelque chose comme :
@media only screen and (min-width : 768px) and (max-width : 991px) and (orientation : portrait) {
/* Styles */
}
Ajouter les media queries à son projet
Maintenant qu’on a vu la théorie, parlons un peu pratique ! Voyons déjà comment intégrer des styles définis grâce aux media queries à votre code.
La première étape consiste à ajouter une ligne dans le tag <head> de votre fichier HTML. C’est la suivante, et elle sert à “activer” les media queries :
<head>
<!-- Activer les CSS Media Queries -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Ensuite, il y a plusieurs manières d’importer les media queries à votre projet. Comme il s’agit de CSS, le plus simple est d’écrire toutes les règles spécifiques dans un fichier CSS, puis d’importer ce fichier de style dans votre code HTML, comme pour tout CSS.
Toutefois, il est possible d’avoir des fichiers CSS ne contenant que les règles de style à appliquer (c’est-à-dire, le CSS brut, sans déclaration des médias), et de les associer uniquement à la taille d’écran voulue. Cela se fait dans la ligne d’inclusion de votre feuille de style, directement dans le HTML :
<link rel="stylesheet" media="screen and (max-width: 320px)" href="small_screens.css" />
Ainsi, le code inclut dans le fichier small_screens.css ne sera appliqué que lorsqu’un smartphone muni d’un écran de moins de 320 pixels sera détecté.
Les responsive en media queries par l’exemple
On a déjà cité quelques cas d’utilisations spécifiques au responsive web. Voyons un exemple concret de code pour l’illustrer.
Une des différences d’affichage les plus courantes lorsqu’on veut faire de l’affichage responsive entre un ordinateur et un smartphone, c’est le sens de lecture.
Si, sur un site web, il est courant de voir des informations affichées sous forme de colonnes. Elles deviennent cependant illisibles sous smartphone ; on choisira donc un affichage sous forme de lignes : une lecture verticale plutôt qu’horizontale.
En voici un exemple :
En CSS, il est facile de gérer ce type d’affichage via la règle flex. Pour avoir un affichage qui s’adapte automatiquement en fonction de la taille du périphérique, on pourrait imaginer le code suivant :
.container {
display: flex;
}
/* smartphone et tablettes */
@media only screen and (min-width: 320px) and (max-width: 991px) {
.container {
flex-direction: colmun;
}
}
/* ordinateurs */
@media only screen and (min-width: 992px) {
.container {
flex-direction: row;
}
}
Comme on le voit, lorsqu’on sera sur un smartphone, l’affichage se fera sur une colonne (donc en vertical), alors qu’il sera sur une ligne (horizontal) sur un ordinateur.
Les alternatives aux media queries CSS
Voilà comment fonctionnent les media queries, et comment les intégrer dans votre code. Cependant, il n’est aujourd’hui plus nécessaire de faire soi-même entièrement le responsive d’un site web.
Si on utilise par exemple des frameworks CSS, certains éléments sont déjà pensés pour être adaptables ; il n’y aura pas besoin de code supplémentaire pour qu’ils s’affichent correctement sur tous les devices.
Tous les frameworks CSS incluent les media queries et partent souvent d’une logique mobile-first. Et des frameworks CSS, il en existe plein ! Bootstrap, Tailwind, Foundation, etc.
Si vous voulez en savoir plus, nous avons dédié un article complet aux frameworks CSS.
On espère que cet article aura pu vous aider à mieux comprendre les media queries CSS, et surtout à mieux les utiliser. Si vous avez toujours des questions, n’hésitez pas à les poster en commentaire !
