Pages réactives¶

Voici quelques notions importantes à savoir lors de la création de pages réactives.

Meta : viewport¶

Le viewport représente la fenêtre d'affichage, donc l'espace visible d'une page web. La fenêtre d'affichage diffère d'un appareil à l'autre et c'est pourquoi on doit adapter nos interfaces aux différentes tailles de fenêtres possibles.

Par contre, les navigateurs sur les appareils mobiles créent le rendu des pages pour un écran d'ordinateur, puis tentent d'afficher la page dans l'espace disponible. Malheureusement, ceci peut causer bien des problèmes à l'affichage et nécessiter que l'utilisateur doive zoomer/dézoomer pour bien voir le rendu final.

Pour forcer le navigateur à effectuer le rendu pour l'espace dont il a bel et bien disponible, on ajoute une donné méta à notre page HTML. C'est une pratique recommandée entre autre par Google et MDN pour assurer que nos limites dites breakpoints que nous déclarerons en CSS pourront s'appliquer correctement.

L'information à ajouter dans la secion <head>d'une page HTMl est la suivante :

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

name=viewport indique que nous venons ici définir la fenêtre d'affichage.

width=device-width vient indiquer que la largeur de l'espace d'affichage est égale au nombre de pixels d'affichage de l'appareil utilisé

initial-scale=1.0 représente donc le zoom initial appliqué lorque la page est chargée dans le navigateur. Avec la valeur 1, on indique d'utiliser l'espace disponible avec un ratio 1:1 pour les pixels CSS appliqués sur les pixels physiques de l'appareil.

shrink-to-fit=no indique que si le contenu initial n'entre pas totalement sur la page, alors ne pas "dézoomer" pour faire entrer tout le contenu. En effet, une bonne page réactive s'occupe elle-même de la façon dont le contenu doit être traité sur petit écran, en cachant des portions de page ou en déplaçant des éléments. Ce ne devrait pas être le travail du navigateur qui, somme toute, ne fera que zoomer/dézoomer et offrira une expérience utilisateur indésirable.

Cette déclaration ne change rien sur ordinateur. C'est vraiment sur mobile qu'elle prend tout son sens.

Viewport

Source: Google: Responsive Web Design - Set the viewport

Source: MDN: The building blocs of responsive design - Viewport

Source: MDN: Utiliser la balise meta viewport pour contrôler la mise en page sur les navigateurs mobiles

Media query¶

Selon MDN :

Les requêtes média (media queries) permettent de modifier l'apparence d'un site ou d'une application en fonction du type d'appareil (impression ou écran par exemple) et de ses caractéristiques (la résolution d'écran ou la largeur de la zone d'affichage (viewport) par exemple).

Source: MDN: Media queries

En d'autres mots, les requêtes média sont une méthode CSS pour modifier les éléments de l'interface en fonction de la taille de la fenêtre d'affichage.

Syntaxe

La syntaxe d'une requête média est la suivante :

@media not|only mediatype and (mediafeature and|or|not mediafeature) 
{
  Code-CSS;
}

Pour connaître toutes les valeurs possibles de mediatype et mediafeature :

MDN : les Media queries

Exemple de base¶

Premier exemple avec des éléments HTML de base.

Ici, les objets se placent par défaut à la verticale, puis on modifie la taille, le positionnement, et l'image de fond de blocs <div> lorsque la zone d'affichage offre un minimum de 900 pixels de large :

HTML

<div id="bloc-un">
    <h1>Titre du bloc un</h1>
    <p>Nullam tortor odio, placerat sed pellentesque eget, consectetur id mauris. Cras eu ornare tortor, 
    at porta dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce id arcu et enim 
    efficitur sagittis. Suspendisse ac mollis tortor. Fusce porttitor, ex ac tincidunt rhoncus, est augue 
    tincidunt augue, in imperdiet eros magna non justo.</p>
</div>

<div id="bloc-deux">
</div>

CSS

* {
    box-sizing: border-box;
}

div {
    padding: 1em;
}

#bloc-un {
    width: 100%;
    background-color: plum;
}

#bloc-deux {
    width: 100%;
    height: 50vh;
    background-image: url(../img/skittles_640x960.jpg);
    background-clip:content-box;
    background-size: cover;
    background-position: center;
}

@media screen and (min-width: 900px) {

    #bloc-un {
        width: 50%;
        float: left;
    }

    #bloc-deux{
        width: 50%;
        float: left;
        background-image: url(../img/gummies_1280x853.jpg);
    }
}

Media small Media large

Exemple avec un grid¶

Les media queries sont aussi très utiles avec les grid.

Dans l'exemple suivant, lorsqu'on a au moins 600 pixels de large, on affiche les cellules sur 3 colonnes. À moins de 600 pixels, les cellules s'affichent à la verticale, en une seule colonne.

HTML

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

CSS

.wrapper {
  border: 0.2rem solid #f76707;
  border-radius: 0.3rem;
  background-color: #fff4e6;

  display: grid;
}

@media screen and (min-width:600px) {
  .wrapper {
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 6em 6em;
  }
}

Media small

Une feuille CSS par taille d'écran¶

Selon la complexité de nos feuilles de style, il arrive que l'utilisation des media queries allourdissent d'avantage le code CSS. Pour alléger le code, on opte alors plutôt pour la création de feuilles CSS séparées pour chaque taille limite à supporter. Ainsi, plutôt que d'utiliser des media queries à l'intérieur du CSS, on créera plusieurs liens HTML dans l'en-tête tel que :

<link rel="stylesheet" media="screen and (min-width: 900px)" href="mediumscreen.css">

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

Attention à l'ordre!

Lorsqu'on opte pour cette solution, il faut vraiment porter une attention particulière à l'ordre dans lequel on appelle les feuilles CSS.

Rappelons-nous que la dernière appelée, si elle répond au critère de taille d'écran, sera appliquée!