Que sont les Media Queries css

Les Media Queries sont apparues avec les spécifications .
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 . 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 , ou l'attribut de la balise HTML ou .
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; }  }
<link rel="stylesheet" media="print" href="print.css" type="text/css" />
Si le média est homis, alors le navigateur considère qui est à all @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) { }
identique à :
@media not (screen and (max-device-width: 480px)) { }
mais différent de :
@media (not screen) and (max-device-width: 480px) { }
L'utilisation de not a le même effet que only sur anciens navigateurs.

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) { }

Liste des définitions des propriétés.

Dans la majorité des cas vous n'aurez pas besoin de toutes ces propriétés css. Les propriétés css les plus importantes sont : width et ces dérivés, device-width et ces dérivés, device-aspect-ratio et ces dérivés, resolution et orientation.

width
Spécifie la largeur de la zone d'affichage dans le navigateur. Nombre positif suivit d'une .
La propriété width est influencée par la balise , ainsi que par l'orientation du téléphone (portrait ou paysage). width est utilisable pour le de type visual et tactile.
min-width
Spécifie la largeur minimale de la zone d'affichage dans le navigateur. Nombre positif suivit d'une .
max-width
Spécifie la largeur maximale de la zone d'affichage dans le navigateur. Nombre positif suivit d'une .
device-width
Spécifie la largeur de la zone d'affichage de l'écran du terminal. Nombre positif suivit d'une . La propriété device-width par l'orientation du téléphone (portrait ou paysage), sauf sous . device-width est utilisable pour le de type visual et tactile.
min-device-width
Spécifie la largeur minimale de la zone d'affichage de l'écran du terminal. Nombre positif suivit d'une .
max-device-width
Spécifie la largeur maximale de la zone d'affichage de l'écran du terminal. Nombre positif suivit d'une .
device-aspect-ratio
Spécifie le ratio de la zone d'affichage de l'écran du terminal. Accepte par exemple la valeur "1280/720" identique à "16/9" (device-width / device-height). La propriété device-aspect-ratio influencée par l'orientation du téléphone (portrait ou paysage). device-aspect-ratio est utilisable pour le de type bitmap .

min-device-aspect-ratio
Spécifie le ratio minimal de la zone d'affichage de l'écran du terminal. Accepte par exemple la valeur "1280/720".
max-device-aspect-ratio
Spécifie le ratio maximal de la zone d'affichage de l'écran du terminal. Accepte par exemple la valeur "1280/720".
monochrome
Spécifie le nombre de bits par pixels sur un périphérique monochrome ou niveaux de gris. Accepte un entier positif. monochrome est utilisable pour le de type visual.
min-monochrome
Spécifie le nombre minimal de bits par pixels sur un périphérique monochrome ou niveaux de gris. Accepte un entier positif.
max-monochrome
Spécifie le nombre maximal de bits par pixels sur un périphérique monochrome ou niveaux de gris. Accepte un entier positif.
resolution
Spécifie la résolution du périphérique. Nombre positif suivit d'une unité en dpi, dppx ou dpcm.
Chrome et Safari ne reconnaissent pas cette propriété, utilisez -webkit-device-pixel-ratio,. Firefox < 16 n'accepte pas l'unité dppx, utilisez -moz-device-pixel-ratio.
resolution est utilisable pour le de type bitmap.
min-resolution
Spécifie la résolution minimale du périphérique. Nombre positif suivit d'une unité en dpi, dppx ou dpcm.(infos complémentaires sur w3c). Les incompatibilités navigateurs sont identiques à resolution.
max-resolution
Spécifie la résolution maximale du périphérique. Nombre positif suivit d'une unité en dpi, dppx ou dpcm (infos complémentaires sur w3c). Les incompatibilités navigateurs sont identiques à resolution.
orientation
Spécifie la zone d'affichage. Accepte la valeur "portait" ou "landscape". orientation est utilisable pour le de type visual.
Exemple orientation des media queries
grid
spécifie si le périphérique est de type bitmap ou grille. Accepte la valeur "1" ou "0". grid est utilisable pour tous les types de
scan
Spécifie le type de balayage des téléviseurs. Accepte la valeur "progressive" ou "interlace". scan est utilisable pour le de type tv.
height
Spécifie la hauteur de la zone d'affichage dans le navigateur. Nombre positif suivit d'une .
height est influencée par la balise , ainsi que par l'orientation du téléphone (portrait ou paysage).height est utilisable pour le de type visual et tactile.
min-height
Spécifie la hauteur minimale de la zone d'affichage dans le navigateur. Nombre positif suivit d'une .
max-height
Spécifie la hauteur maximale de la zone d'affichage dans le navigateur. Nombre positif suivit d'une .
device-height
Spécifie la hauteur de la zone d'affichage de l'écran du terminal. Nombre positif suivit d'une . La propriété device-height par l'orientation du téléphone (portrait ou paysage). device-height est utilisable pour le de type visual et tactile.
min-device-height
Spécifie la hauteur minimale de la zone d'affichage de l'écran du terminal. Nombre positif suivit d'une .
max-device-height
Spécifie la hauteur maximale de la zone d'affichage de l'écran du terminal. Nombre positif suivit d'une .
aspect-ratio
Spécifie le ratio de la zone d'affichage dans le navigateur. Accepte par exemple la valeur "16/9" identique à "1280/720" (window.innerWidth / window.innerHeight), varie suivant la valeur de width et est influencée par la balise et par l'orientation du téléphone (portrait ou paysage).aspect-ratio est utilisable pour le de type bitmap.
min-aspect-ratio
Spécifie le ratio minimal de la zone d'affichage dans le navigateur. Accepte par exemple la valeur "16/9".
max-aspect-ratio
Spécifie le ratio maximal de la zone d'affichage dans le navigateur. Accepte par exemple la valeur "16/9".
color
Spécifie le nombre de bits par composante de couleur. Accepte un entier positif par exemple la valeur "1". color est utilisable pour le de type visual.
min-color
Spécifie le nombre minimal de bits par composante de couleur. Accepte un entier positif par exemple la valeur "0".
max-color
Spécifie le nombre maximal de bits par composante de couleur. Accepte un entier positif par exemple la valeur "1".
color-index
Spécifie le nombre de couleurs indexées utilisé par le périphérique. Accepte un entier positif par exemple la valeur "256", peut ne pas avoir de valeur (qui utilise des couleurs indexées). color-index est utilisable pour le de type visual.
min-color-index
Spécifie le nombre minimal de couleurs indexées utilisé par le périphérique. Accepte un entier positif par exemple la valeur "0".
max-color-index
Spécifie le nombre maximal de couleurs indexées utilisé par le périphérique. Accepte un entier positif par exemple la valeur "256".

Liste des définitions des propriétés Webkit.

-webkit-device-pixel-ratio
Spécifie la résolution du périphérique en dppx.
Accepte une valeur de 2 pour un écran et 1 pour un affichage standard. 1 et 2 sont les seules valeurs selon la .
Pour , elle accepte les valeurs de 0.75, 1 et 1.5 qui correspondent aux appareils avec des écrans à haute densité, basse densité ou moyenne densité.
La valeur du ratio est équivalente à la propriété window.devicePixelRatio et équivalente à resolution en dppx (si elle était interprétée)
Compatible Safari 4.0+ et sur Android
-webkit-max-device-pixel-ratio
Spécifie la densité d'écran maximale. Accepte les mêmes valeurs que -webkit-device-pixel-ratio.
-webkit-min-device-pixel-ratio
Spécifie la densité d'écran minimale. Accepte les mêmes valeurs que -webkit-device-pixel-ratio.

Liste des définitions des propriétés Opera.

-o-device-pixel-ratio
Spécifie la résolution de l'écran, et décrit le format d'image du dispositif de sortie.
Accepte deux nombre entiers positifs séparé part "/" : le nombre de pixels horizontaux / le nombre de pixels verticaux. Par exemple "2/1".
La valeur du ratio est équivalente à la propriété window.devicePixelRatio ou à la propriété resolution en dppx
Compatible Opera 11.10+ (Presto 2.8)
-o-min-device-pixel-ratio
Spécifie la résolution minimale du périphérique en dppx. Accepte les mêmes valeurs que -o-device-pixel-ratio.
-o-max-moz-device-pixel-ratio
Spécifie la résolution maximale du périphérique en dppx. Accepte les mêmes valeurs que -o-device-pixel-ratio.
resolution
La propriété resolution n'est reconnue qu'a partir d'Opéra 10+ (presto 2.3)
orientation
La propriété orientation n'est reconnue qu'a partir d'Opéra 11+ (presto 2.7)
color, color-index et monochrome
Les propriétés color, color-index et monochrome ne sont reconnues qu'a partir d'Opéra 10+ (presto 2.4)
scan et grid
Les propriétés scan et grid ne sont reconnues qu'a partir d'Opéra 10+ (presto 2.4)

Liste des définitions des propriétés Firefox.

-moz-device-pixel-ratio
Spécifie la résolution du périphérique en dppx.
Accepte un nombre entier ou décimal.
La valeur du ratio est équivalente à la propriété window.devicePixelRatio ou à la propriété resolution en dppx
Compatible Firefox 3.5+
min--moz-device-pixel-ratio
Spécifie la résolution minimale du périphérique en dppx. Accepte les mêmes valeurs que -moz-device-pixel-ratio.
max--moz-device-pixel-ratio
Spécifie la résolution maximale du périphérique en dppx. Accepte les mêmes valeurs que -moz-device-pixel-ratio.

Compatibilité des Media Queries avec les navigateurs

Les navigateurs Mobiles (Firefox, Safari,Opera et Internet Explorer) semblent prendre en compte Media Queries
Pour ce qui est des navigateurs de bureau voici la compatibilité.

Media Queries CSS compatible avec le navigateur Chrome 21+
Chrome 21+
Media Queries CSS compatible avec le navigateur FireFox 3.5+
FireFox 3.5+
Media Queries CSS compatible avec le navigateur Safari 4+
Safari 4+
Media Queries CSS compatible avec le navigateur Internet Explorer 9+
Internet Expl. 9+
Media Queries CSS compatible avec le navigateur Opera 9+
Opera 9+