Les Media Queries CSS3

Faisant parti des nouveautés CSS3, les Media Queries nous permet de cibler le périphérique utilisé par l'internaute pour naviguer sur une page Web. Cela nous permettra d'utiliser des styles CSS différents selon l'appareil utiliser. Avec l'avenement du Web mobile, les Media Queries vont nous aider à créer une feuille de style CSS pour chaque média (Ecran d'ordinateur de bureau 19 pouces, Ordinateur portable, mobile, tablette, etc).

Nous allons voir ici quelques exemples pour cibler nos appareils.
Voici comment appeler nos CSS :

<link type="text/CSS" rel="stylesheet" href="screen_global.css" _cke_saved_href="screen_global.css" media="screen" />
<link type="text/CSS" rel="stylesheet" href="screen_1024.css" media="screen and (max-width: 1024px)" />
<link type="text/CSS" rel="stylesheet" href="screen_portrait.css" media="screen and (max-width: 1024px) and (orientation:portrait)" />

J'ai défini ici 3 balises link avec chacun un media différent. Le premier (media="screen") s'applique sur tous les écrans (comportement normal). Les 2 suivants sont intéressants :

media="screen and (max-width: 1024px)" va me permettre de cibler les écrans qui ont une taille maximale de 1024 pixels. Cela peut s'avérer très utile quand on met en place un design pour une largeur de 1280 pixels par exemple, et qui explose complètement lorsque nous n'avons pas l'écran adéquat. La feuille de style "screen_1024.CSS" permettra de rectifier mes styles pour avoir un design cohérent sur un petit écran.

La troisième va plus loin en ajoutant un critère "orientation" en portrait. Cela permet en plus de cibler les écrans en portrait, idéal pour les mobiles non ?

Voici une liste de critères (non exhaustive) pour les Media Queries :

device-height et device-width : dimensions du périphérique.
resolution : résolution du périphérique.
height et width : dimensions de la zone d'affichage (par exemple, la fenêtre de votre navigateur).
orientation : portrait ou paysage ?

A noter que les version inférieures d'Internet Explorer 9 ne prennent pas en compte les Media Queries.

Pour voir ce que cela donne, WebDesignerWall a recensé plusieurs sites web mettant en place les Media Queries. Il suffit de redimensionner la fenêtre de votre navigateur pour voir les changements.

CSS3