11) Media queries : howto

Les medias queries peuvent être déclarées de plusieurs façons différentes. Survol de ces possibilités.

Précédent | 13/16 | Suivant

Une media query est une condition

Techniquement, mettre en place une media query se fait par l’énonciation d’une condition. En informatique, une condition est une question à laquelle est répondu oui ou non.

"Est-ce que la page est vue sur un écran dont la taille est plus petite que 800 ?" est un exemple de condition. La réponse sera bien oui ou non, et en fonction de la réponse, des déclarations CSS supplémentaires seront prises en compte ou pas.

@media screen and (max-device-width:800px) {
body {
font-size:120%;
}
}

Il y a une syntaxe précise à respecter pour formuler la condition. Les opérateurs logiques séparent les conditions : and, only et not permettent de construire la condition. 0n associera généralement un type de média (ici screen, mais on a aussi print et all par exemple) et une expression grâce à and. L’expression sera toujours écrite entre parenthèses.

L’exemple plus haut peut être traduit comme ceci : "si le media de sortie est un écran et que la largeur de cet écran est de maximum 800 pixels, applique les déclarations css que voici".

Les termes utilisables dans les conditions :
-  height et width : permettent de réagir à taille de la zone d’affichage (la fenêtre).
- device-height et device-width : permettent de tester largeur et hauteur du périphérique.
- orientation teste l’orientation du périphérique (portrait ou landscape).
- media concerne type d’écran de sortie : screen pour l’écran d’ordinateur, handheld pour les périphériques mobiles ("tenu en main"), print pour impression, tv pour les écrans de télévision, projection pour les projecteurs, all pour tous les types d’écran.

Ajouter une CSS conditionnelle en HTML ou en CSS

On peut ajouter les media queries dans le code html. On aura alors une feuille de style spécifique qui sera chargée ou non suivant que la condition soit remplie ou pas. Ceci permet de séparer les css dans des fichiers séparés.

<link rel="stylesheet" media="screen and (min-width:1200px)" href="style-big.css" />
<link rel="stylesheet" media="screen and (max-width: 640px)" href="style-small.css" type="text/css" />

Ce code chargera le fichier "style-big.css" si la taille de la fenêtre est au minimum de 1200 pixels. La css "style-small.css" sera, elle, chargée si l’écran fait 640 pixels ou moins.

Ajouter une query à sa CSS

On peut aussi ajouter des medias queries dans une css déjà existante, ce qui permet de garder un seul fichier pour toutes les déclarations. On procédera alors comme suit :

@media screen and (min-width: 780px) and (max-width: 1024px) {
 body {
   display:block;
   clear:both;
 }
}

La déclaration css sur le body sera disponible si la page est vue sur un écran, et que fenêtre fait au moins 780 pixels de large mais aussi un maximum de 1024 pixels.

La syntaxe complète sur la page dédiée du W3C

Quels éléments affecter ?

Les media queries permettent d’ajouter des déclarations css. La plupart du temps, on va s’en servir pour affecter :
- Les images (leur taille principalement), pour éviter qu’elles deviennent trop petites ou trop grandes à l’affichage
- la taille des blocs principaux et secondaires : colonnes de texte principal, sidebar, mais aussi le header et la navigation vont changer de largeur, de hauteur, de taille de typo.
- la taille et contraste des textes : en fonction de la largeur de colonne, on va adapter les tailles de typo. Plus de confort sur grand écran, plus contrastée sur mobile, etc.
- la visibilité de certains éléments : en version mobile, on cachera certains éléments trop chargés visuellement pour être affiché en petit. Un nuage de mot-clés, par exemple, qui ne ressemblera à rien, peut être caché plutôt que réduit en taille.

Bonnes pratiques

L’écriture html + css orientée vers le "responsive design" cherche encore ses bonnes pratiques. Cette période est aussi excitante qu’épuisante : la norme html5 n’est pas encore définitivement déclarée, CSS3 n’est encore que partiellement implémenté et chaque semaine une révolution apparait dans l’aide à l’écriture : nouveaux frameworks css, nouveaux outils javascript, etc.
Le conseil est donc de lire quelques articles sur le sujet avant de lancer un nouveau projet, que ce soit sur alsacréations, sur alistapart, et on ira voir quelques outils comme bootstrap, initializr, ou boilerplate.