Les médias queries CSS : Qu'est-ce que c'est ?

Les médias queries CSS, vous les connaissez déjà sans doute. Toutefois, avez-vous connaissance de son vrai potentiel, sûrement pas. Les médias queries sont souvent utilisés, mais pas dans tout son attribut.

Média queries CSS : Qu'est-ce c'est ?

Tout d'abord, définissons le concept de média queries CSS. Les médias queries CSS, ce concept est une option ou une fonctionnalité qui est apparu avec CSS 3. Elle permet d'adapter certaines règles au rendu d'un contenu.

A voir aussi : Achat tabourets ergonomiques : votre allié au bureau

Au fil des temps, l'adaptation est devenue une norme, une norme W3C en 2012. Alors dans certains cas, l'utilisation des médias queries est presque inéluctable si on parle de site Web adaptatif ou de sites responsive.

Les règles

Comme on l'a dit ci-dessus, c'est une adaptation du rendu d'un contenu en fonction des règles ou des paramètres. Ces règles ou paramètres sont entre autre :

Sujet a lire : Comment télécharger des images à partir de la recherche d'images Google ?

Device-width : cette règle est par rapport à la largeur du périphérique ;
Orientation : c'est l'orientation du périphérique en mode paysage ou portrait ;
Device-height : c'est par rapport à la hauteur du périphérique utilisé ;
Width : cette règle concerne la largeur de la zone d'affichage ;
Height : cette règle concerne en partie la hauteur de la zone d'affichage ;
Color : cette règle a été initiée dans le but de gérer la couleur ;
Média : elle concerne les différents types d'écran de sortie.

Quelques-unes des valeurs d'écran possibles :

Screen : les écrans classiques ;
Handheld : les impressions ;
TV : les écrans de télévision ;
Projection : les projecteurs ;
All : tous les différents types d'écran.

Les règles comme celle du média width ne sont pas inconnus aux utilisateurs des médias queries. Par exemple, la règle média, est une règle très facile et très simple. Par cette règle, on fait la sélection du type d'affichage ou du type de média et on applique les règles CSS.

On a la possibilité d'appliquer un style en particulier, unique aux écrans comme dans le cas du responsive web design. Il est aussi possible de l'appliquer aux télévisions, aux projecteurs ou dans le cas d'une impression.

Nous prenons l'exemple d'une feuille spécifique à qui vous voudriez adapter un contenu dans le cas d'une impression, alors on fera recours aux médias queries avec la règle du média print. Des codes interviennent aussi pour faciliter l'impression. Ainsi, lors de l'impression, les tags vidéo et audio sont camouflés sur le contenu imprimé.

Les opérateurs

La combinaison des règles à des outils comme les opérateurs logiques est possible.

Quelques opérateurs logiques :

Only : uniquement ;
And : et
Not : non.

Pour une adaptation mobile, c'est ce qui est fait quand on utilise du CSS pour la création.

Le code que l'on appliquera à la fenêtre de plus de 1024 px de large sera à l'intérieur du média queries.

@media print { video, audio { display: none; }}

La décomposition du média querie donne :

@ média screen: le style s'appliquera uniquement sur les écrans sauf les télévisions, les 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 1024 px.

Les médias queries et le RWD

Souvent, on utilise les médias queries pour faire du RWD ou du CSS responsive. Faire du responsive, c'est adapté, l'affichage des élèves, fonction de l'appareil d'affichage, aux médias queries combiner, aux codes CSS spécifiques.

Différentes tailles d'écrans

Pour le CSS adapting, les types d'écran sont très importants. Il existe de nombreux types d'écrans, les écrans comme les phablettes, les smartphones, les tablettes, les smartphones pliable et les écrans d'ordinateur plus ou moins grands.

Le contenu que l'on voudrait afficher sur un smartphone, un ordinateur ou sur une tablette peut présenter de grandes différences. Les différences sont entre autres :

Le passage d'un affichage en bloc à un affichage en colonne ;
Cacher ou afficher des images dont la qualité dépend d'un périphérique à un autre ;
Cacher des fichiers ou données inutiles comme des codes QR, des liens ou autres références de l'image ;
Cacher des images ou afficher des images. La visibilité des images dépend du périphérique utilisé.

Il faut donc faire le découpage de notre style en fonction de ces différentes tailles d'écran présentés. Pour cela, il faut définir des breakpoints. Les breakpoints, correspondant à des largeurs d'écran en pixels ou px. Ils vont être déclarés dans le code CSS pour discriminer les différents types de devices.

Le choix de ces breakpoints est plutôt subjectif. Aujourd'hui, il n'y a pas de règles vraiment définies sur la taille d'écran que doit faire un smartphone, par exemple.