Outils CSS de base pour le design adaptatif

Alexandre Niveau
GREYC — Université de Caen
En partie adapté du cours de Jean-Marc Lecarpentier
TODO: multicolumn est bien supporté maintenant

Contexte

Jusqu'en 2007, un site web se visitait sur un écran d'ordinateur
  • Différentes tailles d'écran, mais pas suffisamment importantes pour qu'un design prévu pour une largeur de 800 pixels soit vraiment inadapté
  • Quelques terminaux mobiles (PDA, Blackberry), mais rares, et affichent les pages web assez différemment

Arrivée de l'iPhone, puis des autres smartphones, puis des tablettes : les sites web doivent s'adapter à de multiples tailles d'écran

En parallèle, taille et définition des écrans d'ordinateur augmente

Il n'est plus pertinent de proposer une « version mobile » et une « version desktop » de son site web…

un seul site, qui doit s'adapter à toutes les possibilités

Responsive design

  • « Design adaptatif » : styles qui s'adaptent en fonction de la place disponible, de la résolution, de l'orientation de l'écran…
  • Adaptabilité en termes de :
    • mise en page : colonnes, placement des menus
    • contenu : montrer plus ou moins en fonction de l'espace
    • images : réduire leur taille
    • polices : à adapter selon l'écran

Media queries

  • Objectif : appliquer des règles CSS uniquement lorsque certains critères sont remplis
  • Exemple : « lorsque la largeur de la fenêtre est en-dessous de 800 pixels, je veux que mes paragraphes soient en jaune sur fond noir »
    @media (max-width: 800px) {
      p {
        background: black;
        color: yellow;
      }
    }
    
  • N.B.: la règle spéciale @media contient des règles CSS !
  • Référence complète : Media Queries W3C Recommendation

Critères possibles

Les propriétés sont de la forme critère: valeur

Nombreux critères possibles :
  • Couleur : color, color-index, monochrome
  • Caractéristiques de l'appareil (valeurs fixées) : device-height, device-width, device-aspect-ratio, resolution
  • Affichage (valeurs dynamiques) : height, width, orientation, aspect-ratio

La plupart des critères peuvent prendre les opérateurs min- et max-

Par exemple, min-width: 400px signifie « largeur supérieure à 400px » (autrement dit, la largeur minimale pour laquelle la propriété s'applique est 400px)

Utilisation des requêtes média en pratique

En pratique, on ne va quasiment utiliser que max-width et min-width

Si on met des media queries un peu partout dans son CSS et dans plusieurs sens (max/min), impossible de s'y retrouver !

On va plutôt avoir un CSS de base, modifié ensuite avec des requêtes média — si possible dans une seule direction

Soit on part de la version mobile et on fait des modifications pour des largeurs de plus en plus grandes, soit l'inverse

Exemple (simpliste) :
/* version par défaut: sur grand écran */
.menu { width: 30em; /* etc. */ }

/* écran plus petit: on passe le menu en horizontal */
@media (max-width: 100em) {
	.menu { width: 100%; }
	.menu li { display: inline-block; }
	/* etc. */
}

/* écran encore plus petit: on cache le menu */
@media (max-width: 50em) {
	.menu { display: none; }
}

Requêtes média dans le HTML

Remarque : on peut aussi utiliser les media queries dans l'attribut media de l'élément link, pour choisir quelle feuille de style charger

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

Ajustement automatique

  • Navigateurs mobiles : zoom automatique pour ajuster la page dans la largeur. À désactiver seulement si votre site est responsive !
  • Cela se fait dans le HTML avec une balise meta :
    <meta name="viewport" content="initial-scale=1" />
  • Autre valeur possible, pour empêcher l'internaute de modifier le niveau de zoom (uniquement sur terminal mobile) :
    <meta name="viewport" content="maximum-scale=1.0,
                                   minimum-scale=1.0" />
    
    Très déconseillé (sauf si vous savez ce que vous faites) : la possibilité de zoomer est indispensable pour l'accessibilité !
  • Plus de détails sur le viewport dans cet article en français
À regarder : @viewport en CSS, où ça en est ?

Largeur adaptable sans requête media

  • On peut utiliser les propriétés CSS max-width et min-width
  • Exemple, pour que le body ne fasse jamais plus de 60 em de large :
    body { max-width: 60em; }
    
    ou pour que le menu fasse 30% de la largeur de l'écran, mais ne soit ni trop petit ni trop grand :
    #menu {
      width: 30%;
      max-width: 50em;
      min-width: 10em;
    }
    
    ou pour que les images ne dépassent jamais de leur conteneur (et donc ne soient jamais plus larges que l'écran) :
    img { max-width: 100%; }
    
  • Dans les cas complexes où on donne des valeurs « dynamiques » aux trois propriétés, max-width gagne contre width mais perd contre min-width
  • La façon dont la largeur finale est calculée peut être complexe à comprendre, voir la spécification
  • Pas grave, en général seuls les cas simples (comme les exemples ici) nous intéressent

Unités de longueur : rappel

  • Recommandation W3C
  • Pas besoin d'unité pour zéro
  • Longueur absolue :
    • pt : point, utilisé pour les médias destinés à l'impression
    • in : pouce (2,54cm, 1/72in = 1pt)
    • px : pixel = 1/96 in (un pixel CSS peut recouvrir plusieurs pixels de l'écran)
    • mm, cm
  • Longueur relative : taille calculée par rapport à l'élément parent
    • em : taille dépendant de la police de caractères.
    • % : relatif au bloc parent (par ex. taille de la police du bloc parent, largeur du bloc parent)

Unités de longueur pour le responsive design

  • Compromis entre relatif et absolu : rem, correspond à la valeur font-size de l'élément racine
  • Unités de longueur qui dépendent de la taille de la fenêtre :
    • vw: 1% de la largeur courante de la fenêtre (viewport width)
    • vh: 1% de la hauteur courante de la fenêtre (viewport height)
  • Par exemple, si la fenêtre fait 1200 pixels de large, un vw vaut 12 pixels
  • C'est une unité comme une autre ! Techniquement, rien n'empêche d'utiliser des vw et des vh partout à la place des px ou des em
  • Explications sur l'intérêt de ces unités (en particulier pour la taille de police et pour la hauteur des blocs)

Paliers

Content is like water. You put water into a cup it becomes the cup. You put water into a bottle it becomes the bottle. You put it in a teapot, it becomes the teapot.
Illustration par Stéphanie Walter (licence CC-BY-SA)

Conclusion

  • Responsive design : design qui s'adapte
  • Design bien fait = adaptabilité de base ! exemple: design avec des tableaux. NB: si HTML propre, garantit la possibilité d'accès minimal depuis n'importe quoi. à part les images ou les tableaux, le HTML pur est très responsive !
  • Attention aux frameworks qui permettent de faire du responsive, comme Bootstrap ou Foundation :