CSS : les media queries - Responsive Web Design

Un site qui s'affiche correctement sur un écran d'ordinateur ou sur une tablette voire un smartphone. Une vue de l'esprit ???
Non pas du tout ! C'est désormais possible à condition d'utiliser dans la feuille de style les media queries (requêtes de média) c'est à dire de produire une feuille de style avec des tests ! On parle de responsive web design (site web adaptatif).

Prenons un exemple. Imaginons un site dont chaque page comprend quatre grandes divisions :

Le corps de la page comprend beaucoup de texte répartis dans quatre petites boîtes (conteneur article).

Aspect attendu de la page sur un grand écran (largeur supérieure à 900 pixels)

Les boîtes "article" sont toutes de front.

Aspect attendu de la page sur une tablette en mode portrait

Les boîtes "article" sont deux de front.

Aspect attendu de la page sur un smartphone

Les boîtes "article" apparaissent les unes en dessous des autres et elles sont "repliées".
Il faut survoler une boîte pour la déplier. Les images sont masquées !

Le code HTML : structure

... <meta name="viewport" content= "width=device-width, user-scalable=yes" /> </head> <body> <header>.. </header> <nav>... </nav> <section> ... <article>... </article> <article> ... </article> <article> ... <article> <article>... </article> </section> <footer> ...</footer> </body> </html>

La structure de la page est très simple.
Le conteneur BODY contient les divisions HEADER, NAV, SECTION et FOOTER
La boîte SECTION inclut 4 fois la boîte ARTICLE.

Notez cependant dans la partie HEAD une instruction basée sur la balise : meta name = "viewport ... . J'aurai l'occasion de revenir sur cette instruction HTML fondamentale mais un peu compliquée à expliquer ...

La feuille de style avec les media queries (extraits)

@media screen { /* pour tous les écrans */ *{margin: 0px ; padding : 0px ; text-decoration : none ; border : none ; } body {margin-left : auto ; margin-right : auto ; } header, nav, section, footer {width : 100%; border : 1px solid black ; background : lime ; height : auto ; } article {display : inline-block ; background-color : white ; overflow : auto ; } img {display :block ; width : 80%; margin : auto; } ... } /* fin alors */ @media screen and (min-width: 900px) { /* fenêtre d'affichage dont la largeur est au moins égale à 900 pixels */ * {font-size : 14px ;} body {width : 900px ;} header, nav, section, footer {margin-top : 20px ; } article {width : 22% ; margin : 1% ; height : 250px ; } } /* fin alors */ @media screen and (max-width: 900px) and (min-width : 480px ) { /* fenêtre d'affichage dont la largeur est comprise entre 481 et 900 */ * {font-size : 12px ; } body {width : 100% ;} header, nav, section, footer {margin-top : 10px ; } article {width : 44% ; margin : 2% ; height : 150px ; } } /* fin alors */ @media screen and (max-width: 479px) { /* fenêtre d'affichage dont la largeur est inférieure ou égale à 480 */ * {font-size : 10px ; } body {width : 100% ;} header, nav, section, footer {margin-top : 5px ; } article {width : 94% ; margin : 2% ; height : 50px ; } article:hover {height : auto ; } img {display : none ; } } /* fin alors */

Commentaire de cette feuille de style

Grâce aux commentaires le code CSS est assez facile à comprendre.
Les media queries structurent cette feuille de style externe en quatre parties ; chaque partie comprenant des règles de style.

Attention ne confondez pas width (largeur de la fenêtre d'affichage) avec device-width (largeur de l'écran du terminal).

Dans la partie commune à tous les écrans la boîte article est redéfinie en inline-block.

Tests

Visualisez la page en lien sur un grand écran puis sur un écran de tablette et enfin sur un écran de smartphone.


Testez la page

Si vous utilisez une tablette orientez celle-ci.
Tantôt vous aurez 4 images de front (orientation paysage) et tantôt 2 images de front (orientation portrait).

La balise meta dans la partie head

Vous avez sans doute remarqué que la partie HEAD de la page il y a une instruction HTML très étrange :

<meta name="viewport" content = "width=device-width, user-scalable=yes" />

A quoi sert cette instruction ?
Cette instruction est fondamentale dans le cadre du web mobile !

Les écrans des mobiles sont beaucoup plus étroits que les écrans de PC (seulement quelques centaines de pixels de large). Pour s'adapter, les navigateurs mobiles affichent le site en « dézoomant », ce qui permet d'avoir un aperçu de l'ensemble de la page mais alors c'est c'est tellement écrit petit que c'est illisible ...

Cette zone d'affichage simulée est appelée le viewport.

Attention la valeur du viewport ne dépend pas du terminal mais du navigateur mobile installé sur ce terminal.
Ainsi le viewport est compris entre 800 pixels (Android 3) et 980 (Android 4 et Safari).

Prenons un exemple simple. Votre iphone5 a une largeur utile d'écran de 320 par 568 pixels ; le viewport possible est de 980 pixels grâce au navigateur safari mobile qui est installé.
Mais grâce à l'instruction meta name ="viewport" ... la largeur effective sera de 320 ou (568 selon l'orientation).

Dans un futur proche la gestion du viewport pourra être effectuée non pas via le HTML mais directement dans la feuille de style (donc en CSS). Déjà certains navigateurs ont implémenté ce nouveau sélecteur CSS.

Les images

Pour que les images ne soient jamais rognées sur un petit écran tel celui d'un smartphone il ne faut pas que les dimensions de l'image soient exprimées en pixels mais en pourcentage.

Exemple

<style> body {width : 90% ; margin : auto ; } img.grand {display : block ;width : 80% ; margin : auto ; } img.petit {display : inline-block ;width : 40%; margin :1% ; } ... <body> <p>Une grande image centrée dans son container : <img src ="..." class ="grand" /> ... <p>Deux petites images de front : <img src ="..." class ="petit" /> <img src ="..." class ="petit" /> ...

Ainsi les images auront toujours une taille relative par rapport à son conteneur qui lui même à une largeur relative par rapport à la largeur de l'écran.

Les images vectorielles et le responsive web design

Pour que les images vectorielles (format SVG) produites avec un éditeur de textes ou avec Inkscape (ou les deux) ne soient jamais rognées il suffit de modifier certains attributs de la balise SVG.

Imaginons qu'avec Inkscape vous ayez créé un document de 600 par 400 pixels.
Dans le code de la balise SVG on retrouve : ...width ="600" height="400" viewBox ="0 0 600 400"

Avant d'insérer cette image dans une page web il faut le modifier comme suit le code du fichier SVG :
...width ="100%" height="100%" viewBox ="0 0 600 400"

Gérer le viewport en CSS

L'entreprise éditrice du navigateur OPERA a imaginé un sélecteur CSS qui remplace la balise HTML meta name ="viewport" ...

Le code

Au lieu d'écrire en HTML :

<meta name="viewport" content="width=device-width,initial-scale=1" />

Il suffit d'écrire en CSS :

@viewport { width: device-width; zoom: 1; }

Il est conseillé de préfixer cette règle :

@-webkit-viewport{ width: device-width; ...} @-moz-viewport{ width: device-width; ...} @-ms-viewport{ width: device-width; ...} @-o-viewport{ width: device-width;...} @viewport{ width: device-width; ...}

Implémentation

Il semble prématuré d'utiliser cette règle CSS car l'implémentation chez les navigateurs n'est pas satisfaisante.
Retour menu