Que sont les Media Queries css
Les Media Queries sont apparues avec les spécifications CSS3.
La Media Queries va vous permettre de définir des conditions pour appliquer des propriétés css.
On pourrait faire la comparaison avec le if(condition){} des langages de programmation :
- la condition est vraie (true) alors j'interprète ce qui est entre accolade ("{}"),
- la condition est fausse (false) alors je n'interprète pas ce qui est entre accolade ("{}").
L'augmentation des périphériques tel que les téléphones, les tablettes, etc.., on fait que le type de media (screen, print) ne suffisait plus d'ou l'apparition des spécifications des media queries . En effet le Webdesigner avait de plus en plus besoins de s'adapter au support d'affichage ce qui a donné le terme Responsive Web Design. Quand on utilise les Media Queries, on fait du Responsive Web Design.
Le Responsive Web Design est comparable Design fluide, c'est à dire s'adapter l'affichage aux dimensions du périphérique de sortie. Mais contrairement au Design fluide qui n'est que des tailles qui s'adaptent à la taille de l'écran, le Responsive Web Design permet de tout "re-charter" suivant des critères un peu plus précis.
La Media Queries s'utilise avec la propriété css @media, @import ou l'attribut media de la balise HTML LINK ou STYLE.
La Media Queries est composé de plusieurs éléments : le media et les propriétés, le tout est lié avec des opérateurs logiques.
Le premier critère de votre Media Queries : le support d'affichage
Le premier critère de votre Media Queries qui va constituer votre condition est le média. Le média, c'est lui qui va définit le support affichage pour lequel vont s'appliquer des propriétés css spécifiques. Pour prendre les plus utilisés, nous avons :
- print, destiné à un support paginé, aux documents vus sur écran en mode aperçu avant impression;
- screen, pour principalement les moniteurs couleurs;
- pour les autres je vous laisse allez voir sur la Zone CSS (voir toutes les valeurs de media).
Pas de nouveauté, cela existait déjà en CSS2, petit rappel : @media print { .page{ width:100%; font-size:12pt; } } Si le média est homis, alors le navigateur considère qui est à all
<link rel="stylesheet" media="print" href="print.css" type="text/css" /> @media { .page{ width:100%; font-size:12pt; } }
<link rel="stylesheet" href="print.css" type="text/css" />
Le second critère de votre Media Queries : la propriété.
Le second critère de votre Media Queries qui va constituer votre condition est la propriété. Une propriété, c'est par exemple une largeur de la zone d'affichage, une orientation du périphérique, etc...
Je détaille toutes ces propriétés plus bas.
Une propriété s'écrit toujours entre parenthèse comme cela : "(nom de la propriété : valeur)", par exemple : (width:150px) ou (orientation:landscape) Les propriétés sont précédées d'un opérateur logique et peuvent être cumulées.
Les opérateurs logiques de la Media Queries
Les opérateurs logiques sont : and qui peut être traduit par "et", only qui peut être traduit par "uniquement" not qui peut être traduit comme la négation "n'est pas égale à", "," (virgule) qui peut être traduit par "ou".
L'opérateur logique "and".
Lorsque vous utilisez des requêtes séparées par and, il faut obligatoirement media et une propriété ou une propriéte et une propriété. and vous permet de lier plusieurs conditions et il faut quelles soient toutes vrai (true), pour que ce qui est entre accolade ("{}") soit interprété @media (min-width: 700px), handheld and (orientation: landscape) { }
@media (min-width: 700px) and (orientation: landscape) { }
@media tv and (min-width: 700px) and (orientation: landscape) { }
@media screeen and handheld { }
L'opérateur logique "only".
L'utilisation de only est pour moi assez énigmatique, d'après mes lectures, sa seule utilité est de cacher la media queries aux anciens navigateurs. En clair, on devrait toujours le mettre?
Les anciens navigateurs sans le only sont capables de lire le screen et la suite leur posent problème, le fait de mettre only les empêcheraient d'aller plus loin et d'éventuellement buger. @media only screen and (max-device-width: 480px) { }
L'opérateur logique "not".
L'utilisation de not inverse les conditions.
Si la requête renvoi vrai (true) alors je n'interprète pas ce qui est entre accolade ("{}"), Si la requête renvoi faux (false) alors j'interprète ce qui est entre accolade ("{}") @media not screen and (max-device-width: 480px) { } L'utilisation de not a le même effet que only sur anciens navigateurs.
identique à :
@media not (screen and (max-device-width: 480px)) { }
mais différent de :
@media (not screen) and (max-device-width: 480px) { }
Requêtes séparées par des "virgules".
Lorsque vous utilisez des requêtes séparées par des virgules, alors chaque requête entre les virgules est analysée individuellement et si une des requêtes est valide alors j'interprète ce qui est entre accolade ("{}") @media (min-width: 700px), handheld and (orientation: landscape) { }
