Media Queries : une réponse responsive avec les CSS3 !

CSS3 et Media Queries

Les CSS3 n’en finissent pas d’intégrer les sites actuellement, même si en l’état la norme n’est pas encore totalement définie, et que son support reste tributaire en partie de notre cher Explorer (8/9 surtout) dont Mozilla déplore l’état de non modernité, il faut utiliser des solutions multiples pour assurer le support de cette norme (selectivizr ou la librairie jQuery MediaQueries par exemple) et lister l’état du support chez Microsoft suivant les versions.

Mais nous sommes en présence d’avancés notable dans les techniques du WEB, HTML5 + CSS3 vont donner un coup de fouet dans les possibilités offertes aux webdesigners et développeurs.

Une des grandes nouveautés se nomme Media Queries. On trouve sous cet intitulé (avec son synonyme Responsive Design) les techniques pour l’application de feuilles de styles en fonction des périphériques de consultation utilisés pour des pages HTML.

Il s’agit d’adapter dynamiquement le design à l’aide de CSS.

Il devient possible de pouvoir satisfaire les contraintes de dimensions, de résolutions et d’autres critères variés pour améliorer l’apparence graphique et la lisibilité (voire l’utilisabilité) d’un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc.

Dans le passé avec le couple CSS2 et HTML4, il était possible de spécifier un média de destination pour l’application d’une ou plusieurs feuilles de style. C’est ainsi que l’on a pu associer des règles CSS complémentaires pour l’impression, modifiant la mise en page, favorisant tel élément ou faisant disparaître un autre inutile à la sortie sur papier, par exemple un menu de navigation.

Mais, les médias peuvent être très variés, surtout en ce qui concerne les écrans, tout dépend du support de l’interprétation de ces définitions. Rien n’oblige un périphérique ou un navigateur à appliquer ce qui semblerait le plus indiqué. Par exemple, la règle media handheld est ignorée par la grande majorité des navigateurs mobiles, y compris par Safari Mobile sur iOS qui se considère comme un média screen.

Syntaxe des Media Queries CSS3

La philosophie des Media Queries (ou requêtes de media) en CSS3 est d’offrir un choix de critères plus vaste et plus précis, à l’aide de propriétés et de valeurs numériques, ainsi que de combinaisons multiples de ces mêmes critères. Le but est de cibler plus finement les périphériques de destination en fonction de leurs capacités intrinsèques.

L’écriture de ces requêtes est relativement explicite (en anglais) : une media query est une expression dont la valeur est toujours vraie ou fausse. Il suffit simplement d’associer les différentes déclarations possibles avec un opérateur logique pour définir l’ensemble des conditions à réunir pour l’application des styles compris dans le bloc adjacent.

Les opérateurs logiques peuvent être and (et), only (uniquement) et not (non). Pour obtenir l’équivalent du « ou », il suffit d’énumérer différentes media queries à la suite, séparées par des virgules : si l’une d’entre elles est valable, alors l’ensemble de la règle sera appliquée.

En général, on combine ensemble un type de média (screen, all…) et une expression grâce à and, bien qu’une expression seule puisse être utilisée. L’expression est toujours écrite entre parenthèses.

On obtiendra un comportement d’affichage bien plus pertinent selon la résolution de navigation, un exemple ci-dessous du site juslisen.com géré avec des Media Queries :

www.juslisen.com

Avec l’avènement du surf sur terminal mobile il devient indispensable de proposer une lecture facilité sur résolution réduite, la mise en œuvre de cette solution (et son support généralisé – sauf partiel pour Explorer) simplifie grandement la gestion d’un développement web, elle reste effectivement tributaire d’Explorer, comme l’a toujours été le Web, mais les quelques astuces avec des librairies javascript ou des patchs (fichier htc) permettent son utilisation dès aujourd’hui pour le plaisir de surfer du plus grand nombre.

Ainsi le web mobile pourra bien se tenir à l’avenir…

Sources : AlsacréationsW3C.org

Laisser un commentaire