CSS (Cascading Style Sheets)

Auteur: Mohamed CHINY Durée necessaire pour le cours de CSS (Cascading Style Sheets) Niveau recommandé pour le cours de CSS (Cascading Style Sheets) Supports vidéo non disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 14: Les Media Queries (Responsive Design)

Toutes les pages

Les Média Queries pour un "Responsive Design"

Depuis l'arrivée des appareils mobiles (smartphones, tablettes...) et les smart TV, les règles du Web ont changé de font en comble. En effet, il y a quelques années, les critères d'un bon design se jouaient sur la répartition des éléments sur la page, l'imagerie, des objets entrelacés (comme des images qui se croisent) et des animations Falsh qui ajoutaient une touche joyeuse à la page. Or, les choses on changé. Un grand nombre d'internautes ne consultent le Web qu'à travers leurs téléphones. Les Téléviseurs sont désormais connectés à Internet et les tablettes gagnent du terrain jour après jour. Alors finis les pages Web qu'il faut faire défiler à l'horizontale pour accéder à un texte ou un bouton. Le Responsive Design est arrivé!

Il existe une technique (de moins en moins utilisée) qui permet d'adapter l'affichage à la page. Elle s'appelle le design fluide, où quasiment tous les éléments sont redimensionnés en pourcentage, de telle manière à ce qu'elles s’adaptent à la largeur de l'écran qui affiche la page. Cependant, avec les nouveaux périphériques cette technique révèle ses limites.

Les Media Queries (ou requêtes média) est une technique (apparue avec les spécifications CSS3) qui permet de définir des conditions pour appliquer des styles CSS. Ces conditions ont un rapport avec la nature et les propriétés du périphérique de sortie (écran, smartphone, imprimante...). Les Média Queries permettent de réussir ce qui est communément connu par le Responsive Design qui consiste à adapter dynamiquement de design à l'aide de CSS.
Ce site par exemple vérifie le Responsive Design. Essayez de réduire la fenêtre ou changer de périphérique pour voir comment il réagit.

A quoi ressemble du code CSS où les Media Queries sont pris en compte?

Le code CSS reste le même, mais au lieu de définir un seul style figé, on en défini plusieurs, et pour sélectionner lequel appliquer, on recours à des règles qui constituent le cœur des Media Queries.

Imaginons que nous disposons de deux feuilles de styles, une s'appelle ecran.css et l'autre imprimante.css. Vous en avez sans doute compris l'utilité. En fait, la première feuille s'appliquera quand c'est un écran qui affiche la page Web, et la deuxième c'est quand on veut imprimer la même page. Pour définir l'appel à ces feuilles de styles on peut utiliser la balise
<link> de cette façon:
<link rel="stylesheet" type="text/css" href="ecran.css" media="screen" />
<link rel="stylesheet" type="text/css" href="imprimante.css" media="print" />
Pour que le navigateur décide quelle feuille de style faut-il appliquer, il se réfère à l'attribut media.

Attribut media

L'attribut media est déclaré sur la balise <link> pour indiquer au navigateur dans quel cas il faut appliquer la feuille de style associée. Les valeurs qu'elle peut accueillir sont nombreuses, mais voici les plus courantes:
  • screen: signifie les écrans.
  • print: pour les imprimantes.
  • handheld: désigne les appareils mobiles ou écrans de petite taille.
  • projection: signifie les projecteurs.
  • tv: pour les téléviseurs.
  • tty: signifie terminal (on peut visualiser une page Web sur un terminal comme l'invite de commande).
  • all: qui désigne tous les périphériques.

Vous avez donc compris qu'il faut créer une feuille de style pour chaque type de périphérique. Cependant on peut recourir à une autre méthode plus pratique. C'est la règle-at media (@media).

Règle @media

Au lieu de créer plusieurs feuilles de styles, chacune pour un type de périphérique, on peut créer une seule qui renferme tous les styles groupés par les conditions Media Queries commençant par @media.

Exemple:
@media screen{
   h1{
      font-size:24pt;
      font-weight:normal;
   }
   nav{
      display:inline-block;
   }
}
@media print{
   h1{
      font-size:18pt;
      font-weight:bold;
   }
   nav{
      display:none;
   }
}
La règle @media est suivie du type de périphérique puis deux accolades ({}) qui contiennent l'ensemble des styles CSS à appliquer. Dans cet exemple, si on affiche la page sur un écran, alors les titres H1 sont sans graisse et le menu de navigation est affiché en tant qu'élément inline-block. Par contre, si on veut imprimer la page, les titres H1 deviennent gras mais plus petits, et le menu disparaît.

Cependant, le fait de savoir que le périphérique est un écran ne suffit pas à définir les styles adéquats, car il y a des écrans larges et des petits écrans. Heureusement, les Media Queries proposent des opérateurs logiques qui permettent de mieux affiner la cible du style.

Opérateur logiques et critères

Opérateurs logiques

Les opérateurs logiques disponibles pour les Media Queries sont:
  • and: qui signifie un ET logique. Par exemple, la règle A and B est vraie si A et vrai et B est vrai aussi.
  • only: qui signifie UNIQUEMENT. Par exemple, la règle only A est vraie si A tout seul est vrai.
  • not: qui signifie NON. Par exemple, la règle not A est vraie si A est fausse.

Exemple:
@media screen and (min-width:1280px){
   .pub{
      diaplay:inline-block;
   }
}
Ce code signifie qu'on peut afficher la publicité (désignée par la classe pub) si le périphérique est un écran et la largeur de la fenêtre (du navigateur) est supérieure ou égale à 1280 pixels.
Les Media Queries sont des règles logiques. Si elles sont vraies le style associé est appliqué, sinon il est ignoré.

Critère des Media Queries

Les critères sont placés entre des parenthèses pour constituer un élément de la condition à vérifier. Il existe plusieurs critères sur lesquels reposent les Media Queries. Mais je vais vous lister ceux dont vous aurez le plus besoin.
  • width: signifie la largeur de la fenêtre d'affichage (est pas celle de l'écran). Si par exemple nous spécifions (width:800px) cela veut dire que cet élément de la condition est vrai si la largeur de la fenêtre est exactement égale à 800 pixels. On peut préfixer ce critère par min- ( pour min-width) ou max- (pour max-width) pour désigner respectivement la largeur minimale et la largeur maximale.
  • height: signifie la hauteur de la fenêtre d'affichage. On peut préfixer ce critère par min- ( pour min-height) ou max- (pour max-height) pour désigner respectivement la hauteur minimale et la hauteur maximale.
  • device-width: signifie la largeur de l'écran. On peut préfixer ce critère par min- ( pour min-device-width) ou max- (pour max-device-width) pour désigner respectivement la largeur minimale de l'écran et la largeur maximale de l'écran.
  • device-height: signifie la hauteur de l'écran. On peut préfixer ce critère par min- ou max-.
  • aspect-ratio: signifie le ratio (rapport entre la largeur et la hauteur) de la fenêtre d'affichage.
  • device-aspect-ratio: signifie le ratio de l'écran (par exemple: 16/9 ou 4/3).
  • orientation: signifie l'orientation de la zone d'affichage et peut prendre deux valeurs: portrait pour l'affichage vertical ou landscape pour l'affichage horizontale (ou paysage).

Exemple:
@media all and (max-width:1280px){
   .header{
      width:100%;
      height:50px;
      text-align:center;
      background-image:url("../images/back_header_sr.png");
      border-bottom:solid 1px #E1E1E1;
      background-repeat:repeat-x;
   }
   #sfooter{
      width:100%;
      text-align:left;
      font-family:eras, "Century Gothic", verdana, sans-serif;
      color:#AAAAAA;
   }
}
@media all and (min-width:960px){
   .contdercours{
      width:30%;
      min-height:600px;
      background-color:#F4F4F4;
      float:right;
   }
   .contaccueil{
      width:68%;
      min-height:600px;
      float:left;
      border-left:dotted 1px #165877;
   }
}
Il s'agit là d'un extrait de code CSS utilisé sur ce site. Je suis sûr que vous comprenez sa signification.
Vu que le marché regorge de modèles de smartphones et de tablettes, il est un peu dur d'éditer des règles Media Queries qui couvrent toutes les résolutions existantes. C'est pourquoi la plupart des designers recourent aux bibliothèques et frameworks qui facilitent le travail. Le plus célèbre pour CSS s'appelle Bootstrap.

Le viewport

Le viewport correspond à la surface sur laquelle une page Web est visible (ou la surface de la fenêtre utilisée par le navigateur). Cette notion a été introduite suite à l’avènement des appareils mobiles (smartphones et tablettes) sur lesquelles on ne peut pas redimensionner la fenêtre du navigateur (comme on peut le faire sur un écran classique).

Parmi les caractéristiques clé d'un appareil mobile, il y a la définition de l'écran (qu'on appelle à tort la résolution). La définition représente le nombre de pixels que renferme l'écran sur la largeur et sur la hauteur. Par exemple le iPhone 6+ en contient 1080x1920 pixels (C'est de la vraie HD).

Cependant, pour afficher du contenu (les pages Web en particulier), les appareils mobiles se basent sur une autre définition tout à fait différente de celle qu'ils ont réalité. C'est la définition en pixel CSS connue également sous le nom device-width. Elle représente le nombre de pixels que l'appareil pense avoir. Par exemple le iPhone 6+ pense avoir 414x736 pixels.

Le viewport quant à lui est tout à fait différent des deux dernières notions. En effet, il est souvent supérieur à la définition réelle de l'appareil. Si c'est le cas, c'est pour y introduire une page Web entière quelque soit sa largeur, en lui appliquant un facteur de zoom inférieur à 1. C'est ce qui explique le fait que si vous visitez une page Web ne satisfaisant pas le Responsive Design depuis votre téléphone, vous constatez qu'elle est très petite et se tient toute entière dans la largeur de votre appareil. Le contenu est par conséquent trop petit et les textes sont quasiment illisibles. Il faut donc que vous zoomiez sur la page pour arriver à lire. Et bien sûr il faut défiler à droite et à gauche pour suivre le texte jusqu'au bout. C'est très gênant!

Et comme si tous ces détails ne suffisaient pas, sachez que le viewport ne dépend pas de l'appareil comme on l'aurait pensé, mais du navigateur.

Pour palier ce problème, c'est à nous de renseigner au navigateur la valeur du viewport à appliquer aux pages Web. Et comme vous l'avez certainement deviné, la valeur initiale typique du viewport doit être égale à la largeur en pixel de l'appareil (la définition que l'appareil pense avoir).

Balise META viewport

Pour déclarer la nouvelle valeur du viewport, on fait appel à la balise <meta>:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Ce code signifie que la valeur du viewport initiale correspond à la largeur en pixel CSS de l'appareil (la largeur qu'il pense avoir) et le zoom initial est égal à 1x (ce qui signifie: aucun zoom).

On peut aussi ajouter les sous-propriétés: height, maximum-scale et minimum-scale qui signifient respectivement hauteur, zoom maximal, et zoom minimal.
La valeur de maximum-scale et minimum-scale est comprise entre 0.0 et 10.0.

Règle-at viewport

Pour définir le viewport, on peut aussi le faire en CSS grâce à une règle-at comme ceci:
@viewport{
   width:device-width;
   zoom:1;
}
Comme cette syntaxe n'est pas compatible avec tous les navigateurs, il faut penser à déclarer le préfixe vendeur. Le code devient donc:
@-webkit-viewport{
   width:device-width;
   zoom:1;
}
@-moz-viewport{
   width:device-width;
   zoom:1;
}
@-o-viewport{
   width:device-width;
   zoom:1;
}
@-ms-viewport{
   width:device-width;
   zoom:1;
}
@viewport{
   width:device-width;
   zoom:1;
}
La propriété zoom applique un zoom initial, dans ce cas il vaut 1 ce qui signifie: aucun zoom.

Il existe aussi les propriétés: min-width, max-width, height, min-height, max-height, min-zoom et max-zoom, dont la signification est exprimée par leurs noms.

Ces règles CSS ne sont pas encore largement implémentées au sein des navigateurs, il faut donc prévoir de déclarer la balise META viewport au cas où.
Quiz (Pour tester vos connaissances)
  1. Si on veut adapter l'affichage d'un contenu selon la largeur de l'écran, quelle propriété doit-on déclarer ans la règle @media?
width
screen-width
device-width
  1. Serait-il judicieux d'inclure des images et des vidéos au sein d'une page déstinée à un média du type tty?
Oui
Non
  1. Que signifit le code suivant?
    @media screen and (min-width:960px){
       #conteneur{
          width:920px;
       }
    }
La balise identifiée par "conteneur" aura une largeur de 920px si la fenêtre du navigateur fait au minimum 960px de largeur.
La balise identifiée par "conteneur" aura une largeur de 920px si la fenêtre du navigateur fait au maximum 960px de largeur.
La balise identifiée par "conteneur" aura une largeur de 960px si la fenêtre du navigateur fait au minimum 920px de largeur.
La balise identifiée par "conteneur" aura une largeur de 960px si la fenêtre du navigateur fait au maximum 920px de largeur.
  1. Si nous n'appliquons pas la balise META VIEWPORT comme ceci:
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
Le texte de la page Web sera trop petit sur un appareil mobile.
Le texte de la page Web sera trop grand sur un appareil mobile.
Le texte s'affichera normalement sur un appareil mobile.
  1. Que signifit le code suivant?
    @media print{
       *{
          font-family:serif;
       }
    }
Tous les textes seront écrits en police de la famille générique Sérif si c'est un équipement, autre qu'une imprimante, qui affiche le document.
Tous les textes seront écrits en police de la famille générique Sérif si c'est une imprimante qui imprime le document.