CSS3 media queries : adaptez vos styles au support

Tweet

Face à la recrudescence des smartphones et autres machins mobiles en 3G, il devient de plus en plus important de tenir compte des diverses résolutions possibles dans la mise en place de vos sites web. Il existe une fonctionnalité CSS3 vous permettant de tester des propriétés media du navigateur qui affichera votre site, et d’adapter vos styles en conséquence  : les media queries.
Cette miraculeuse fonctionnalité, qui consiste à limiter l’étendue d’application de styles CSS est dores et déjà compatible avec Firefox, Chrome, Safari, Safari Mobile, Android, Opera Mini, Opera Mobile, et Firefox mobile (Fennec). Que demande le peuple ?

L’autre bonne nouvelle est qu’en plus d’être utile, ce n’est pas sorcier à mettre en place, la syntaxe n’étant pas indigeste. Un peu d’anglais et hop !

Voici un exemple d’utilisation dans le HTML :

<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css" />

On limite ici la feuille de styles « 600px.css » aux écrans qui disposent de moins de 600px de large pour afficher le navigateur. Vous aurez vite compris en utilisant un peu ce système, que la largeur ou la hauteur testée n’est pas à proprement parlé la résolution du support, mais la taille du navigateur. Ces dernières sont souvent les mêmes, dans le cas des smartphones, mais c’est toujours utile de le savoir. Voyez plutôt : lancez un navigateur crédible sur votre ordinateur, et ouvrez le lien suivant :
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Redimensionnez la fenêtre dans tous les sens, vous verrez comment l’interface « réagit ». Vous saisissez ? Pas mal, hein ?

Si vous préférez tout gérer depuis votre CSS, voilà quelques exemples de syntaxe :

Simplicité absolue ; pour les navigateurs de moins de 600 pixels de large, j’encapsule mes styles redéfinis dans le bloc suivant :

@media (max-width: 600px) { mes styles redéfinis }

Même idée, mais uniquement pour les appareils mobiles :

@media only screen and (max-device-width:480px){ mes styles redéfinis }
@media screen and (max-device-width: 480px) { mes styles redéfinis }

Ici, encore mieux, je peux définir une « fourchette active », que vous ne trouverez pas chez Ikea :

@media screen and (min-width: 600px) and (max-width: 900px) { mes styles redéfinis }

Et là, la crème de la crème, je peux aussi limiter l’utilisation en fonction de l’orientation du support ! Je fais pivoter l’iPhone que je n’ai pas à l’horizontal, et hop, les styles changent ! Et voilà, mon site devient interactif, uniquement à l’aide de CSS :

@media only screen and (max-device-width:640px) and (orientation:landscape)  { mes styles redéfinis }

Il existe encore bien des subtilités aux media queries, que je vous laisse découvrir par vous-même.
Je ne vous quitte donc pas sans vous donner quelques liens de références.

Tags : CSS - CSS3 - Ergonomie - intégration - iphone - media queries - Pratique - smartphone - Webdesign

Tweet

A propos de l'auteur