Les bases du CSS - Les media queries - Html/Css

Il reste un dernier point à voir, ce sont les media queries

Les media queries? C'est quoi ça?

C'est un moyen d'appliquer des règles css uniquement selon certaines conditions. On peut par exemple dire que telle règle ne s'appliquera que si l'écran fait une taille précise.

Mouais et ça sert à quoi?

Je vais te montrer ça.

Les type de media

Pour commencer, on peut préciser une media query pour trois type de média :

• screen : pour l'affichage à l'écran.


• print: pour l'impression de la page.


• speech: pour les outils de lecture de page.

Mais on peut aussi préciser qu'une media query est pour l'ensemble de ces méthodes avec le media "all".

Jusque là je te suis, mais je ne vois pas où tu veux en venir. Et pourquoi le print?

Le print peut être très pratique, pour faire économiser de l'encre à l'utilisateur. On peut retirer certaines couleurs, ou ne pas faire apparaitre des logo, la barre de navigation ou d'autres choses inutiles à l'impression.

Je n'avais pas vu ça comme ça, effectivement.

Les conditions

Et bien, si un élément doit s'afficher en rouge sur un grand écran, mais qu'on souhaite l'adapter en bleu en version mobile, on peut le faire facilement avec une media query. Par exemple :



Avec max-width, on précise que cette règle ne s'applique que si la fenêtre ne fait au maximum que 800 pixels. Ainsi, au dessus de 800px la <div> sera en rouge, mais en dessous, elle sera en bleu.

Ok, effectivement ça peut être pratique dans certains cas.

Mais on peut aussi écrire d'autres conditions, comme par exemple le hover.

Ce n'est pas une pseudo classe pour changer une règle lorsque la souris est au dessus d'un élément ça?

Si on l'utilises comme pseudo classe, c'est bien ça. Mais on peut aussi l'utiliser dans une media query, et ça permettra de changer des règles si le navigateur de l'utilisateur permet le hover. Ainsi on peut prévoir un affichage particulier pour les ordinateurs avec une souris, et un autre affichage pour les tablettes et smartphones tactiles qui n'ont pas de souris.



Ici le carré apparaitra en bleu si le navigateur permet le hover, sinon en rouge.

Ok, et il en existe beaucoup des conditions comme ça?

Un certains nombre oui, pour ne t'en citer que quelques unes :

• aspect-ratio : s'applique si la fenêtre respecte un certain ratio entre la largeur et la hauteur. (Par exemple, pour du 16/9 ou 4/3)


• aspect-ratio : s'applique si l'écran est en couleur ou en noir et blanc


• orientation : s'applique si l'écran est en portrait ou paysage (valable pour les écrans avec rotation comme les tablettes ou smartphones)


• scripting: s'applique si le navigateur permet le javascript ou non

Ah oui, il y a du choix

Et il en existe bien d'autres. Le plus étant que l'on peut aussi les combiner avec des opérateurs.

Les opérateurs

• and : combine des conditions et n'applique la media query que si l'ensemble des conditions est respecté.


• not : inverse la condition. (@media not screen and (hover: hover) inverse l'exemple précédent.)


• only : ne s'applique que si la media entière est valide (et permet d'éviter des problèmes sur d'anciens navigateurs qui gèrent mal les media query)


• , : combine des conditions et n'applique la media query si l'une d'entre elle est respectée

On peut vraiment faire beaucoup de choses avec les media query en fait.

Tout à fait. Et on a fait le tour des bases du CSS, il ne te reste plus qu'à t'entrainer avant que l'on passe à des outils plus avancés.

Parfait, je vais travailler là dessus et je reviens vers toi dès que je maitrise tout ça ! J'ai terminé cette partie