Les grilles CSS et l'amélioration progressive

En dehors d'Internet Explorer, les propriétés et valeurs relatives aux grilles CSS ne sont pas préfixées dans Safari, Chrome, Opera, Edge et dans Firefox. Toutes les propriétés et valeurs que nous avons vues dans ce guide fonctionnent de façon interopérable entre ces navigateurs. Cela signifie que si vous écrivez des règles CSS pour paramétrer une grille, le document doit avoir le même rendu dans Firefox, Opera et dans Chrome. Les grilles CSS ne sont plus une spécification expérimentale, elles peuvent donc être utilisées en production.

La première implémentation des grilles CSS a eu lieu avec Internet Explorer 10. La première version de la spécification ne contenait alors pas toutes les propriétés et valeurs décrites dans la spécification actuelle. Il existe également des différences importantes entre ce qui est disponible dans IE10 et la spécification actuelle, même si les propriétés et les valeurs se ressemblent à première vue. Cette implémentation initiale est également celle qui est en place dans Edge jusqu'à la version 15.

La version implémentée pour IE/Edge (≤15) est préfixée avec -ms et les propriétés ont les noms suivants :

• grid-template-columns est appelée -ms-grid-columns
• grid-template-rows est appelée -ms-grid-rows
• grid-row-start est appelée -ms-grid-row
• grid-column-start est appelée -ms-grid-column
• align-self est appelée -ms-grid-row-align
• justify-self est appelée -ms-grid-column-align

La version implémentée dans Internet Explorer dispose de propriétés supplémentaires qui ne font pas partie de la nouvelle spécification : -ms-grid-column-span et -ms-grid-row-span. La version implémentée dans IE ne profite pas du placement automatique ou des zones nommées. On peut implémenter certaines grilles simples pour IE10 et jusqu'à Edge 15, grâce à ces propriétés préfixées par -ms. Ces propriétés étant préfixées, elles ne seront pas reconnues (et n'auront aucun effet) pour les navigateurs qui implémentent la spécification actuelle.

L'outil autoprefixer a été mis à jour afin de prendre en charge les versions préfixées par -ms- lorsqu'on utilise les nouvelles propriétés. Par défaut, les préfixes liés à la grille sont désactivés mais vous pouvez les activer avec l'option grid: autoplace.

autoprefixer({ grid: "autoplace" });

Les préfixes relatifs aux grilles sont désactivés par défaut car certaines propriétés ne peuvent pas être préfixées

Comme pour les autres technologies front-end, la décision d'utiliser les grilles CSS se résume souvent au parc de navigateurs utilisés par le public de votre site ou votre application. S'ils ont tendance à utiliser des version à jour de Firefox, Chrome, Opera et Safari, il serait logique de commencer à utiliser les grilles CSS dès que la nouvelle version des navigateurs sera disponible. En revanche, si le marché visé repose sur d'anciens navigateurs, ce n'est peut-être pas le bon choix. Toutefois, je suggèrerai de ne pas prendre les mêmes hypothèses que pour la diffusion des autres spécifications par le passé : le travail d'implémentation et d'homogénéisation réalisés par les différents distributeurs de navigateur pour les fonctionnalités des grilles CSS est sans précédent.

On notera qu'il n'est pas nécessaire d'avoir une rupture brutale pour utiliser les grilles CSS. On peut commencer par améliorer quelques éléments avec une grille et conserver l'ancienne méthode d'affichage pour les navigateurs historiques. Surcharger ces méthodes historiques avec les grilles fonctionne très bien étant donné la façon dont les grilles interagissent avec ces autres méthodes.

Jusqu'à présent, pour créer une disposition sur plusieurs colonnes, on a utilisé des dispositions flottantes. Si vous avez un objet qui flotte et que celui-ci est également un objet d'une grille CSS : dans un navigateur qui prend en charge les grilles CSS, le flottement ne sera plus appliqué sur l'objet. En fait, la grille prend le pas sur le flottement. Dans l'exemple qui suit, on a simplement un objet média. Pour un navigateur historique, on utilise float, cependant, on a également défini un conteneur de grille dans lequel on pourra utiliser les propriétés d'alignement disponibles pour les navigateurs qui implémentent les grilles CSS.

Le mode float ne s'applique plus sur l'objet et on peut utiliser la propriété align-self afin d'aligner le contenu vers la fin du conteneur.

* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  display: block;
}
.media {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "img content";
  margin-bottom: 1em;
}
.media::after {
  content: "";
  display: block;
  clear: both;
}
.media .image {
  float: left;
  width: 150px;
  margin-right: 20px;
}
.media .text {
  padding: 10px;
  align-self: end;
}

<div class="media">
  <div class="image">
    <img src="http://placehold.it/150x150" alt="placeholder" />
  </div>
  <div class="text">
    Voici un exemple avec un média. On utilise le flottement pour les anciens
    navigateurs et une grille pour les nouveaux.
  </div>
</div>

Dans l'image qui suit, on voit à gauche ce qu'on obtient dans un navigateur qui ne prend pas en charge les grilles CSS et à droite le résultat obtenu pour un navigateur qui permet de les utiliser.

L'exemple que nous venons de voir est très simple et on peut résoudre le problème sans avoir à écrire de code qui gênerait les navigateurs historiques, le code historique ne pose pas non plus de problème pour les navigateurs qui prennent en charge les grilles CSS. Dans la réalité, on fait parfois face à des cas plus complexes.

Un exemple plus complexe

Dans le prochain exemple, nous aurons un ensemble de cartes disposées avec du flottement. On a défini une largeur (width) sur ces cartes afin de pouvoir appliquer le flottement float. Pour créer des espaces entre les cartes, on utilise une marge (margin) sur les objets puis une marge négative sur le conteneur.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 600px;
  margin: 0 auto;
}
.wrapper li {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper ul {
  overflow: hidden;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}
.wrapper li {
  float: left;
  width: calc(33.333333% - 20px);
  margin: 0 10px 20px 10px;
}

<div class="wrapper">
  <ul>
    <li class="card">
      <h2>Un</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Deux</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Trois</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Quatre</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Cinq</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Six</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
  </ul>
</div>

Dans la capture qui suit, on voit un problème classique qui est causé par les dispositions flottantes : si on ajoute du contenu à l'une des cartes, la disposition est chamboulée.

Pour gérer les anciens navigateurs dans une certaine mesure, on peut indiquer une hauteur minimale pour les boîtes avec min-height et espérer que les éditeurs n'ajouteront pas trop de contenu dans chaque boîte…

Voyons comment améliorer cette disposition avec une grille : on transforme l'élément <ul> en un conteneur de grille avec trois pistes en colonne. Malheureusement, la largeur qu'on avait affectée aux éléments de la liste s'applique toujours et désormais, chaque élément de la liste occupe uniquement un tiers de la piste correspondante.

Si on réinitialise la largeur avec auto, on n'aura plus le résultat souhaité dans les anciens navigateurs. Il faut donc trouver un moyen de définir la largeur pour les anciens navigateurs et de supprimer la largeur quand le navigateur prend en charge les grilles CSS. Grâce aux requêtes de fonctionnalité CSS, on peut le faire directement en CSS.

Une solution avec les requêtes de fonctionnalité

Les requêtes de fonctionnalité ressemblent beaucoup aux requêtes de média qu'on utilise pour créer des dispositions adaptatives. Ici, plutôt que de vérifier la largeur de la zone d'affichage ou telle caractéristique du navigateur ou de l'appareil, on vérifie la prise en charge d'une propriété CSS avec une certaine valeur grâce à une règle @supports. À l'intérieur de cette requête, on peut écrire le CSS nécessaire pour obtenir la nouvelle disposition et retiré tout ce qui est nécessaire pour l'ancienne mise en forme.

@supports (display: grid) {
  .wrapper {
    // ajouter les règles qu'on souhaite
    // pour les navigateurs qui prennent
    // en charge les grilles
  }
}

La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante.

On utilise donc @supports pour vérifier la prise en charge de display: grid;, ensuite on indique que <ul> est le conteneur de la grille, on définit la largeur et min-height avec auto pour les éléments <li>. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété gap. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également désormais lorsqu'une carte possède plus de contenu qu'une autre.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 600px;
  margin: 0 auto;
}
.wrapper li {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper ul {
  overflow: hidden;
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}
.wrapper li {
  float: left;
  width: calc(33.333333% - 20px);
  margin: 0 10px 20px 10px;
}
@supports (display: grid) {
  .wrapper ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    margin: 0;
  }
  .wrapper li {
    width: auto;
    min-height: auto;
    margin: 0;
  }
}

<div class="wrapper">
  <ul>
    <li class="card">
      <h2>Un</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Deux</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Trois</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Quatre</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Cinq</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Six</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
  </ul>
</div>

Étant donné ces problèmes pour créer des grilles d'objets avec du flottement, il est probable que nous aurions choisi un autre méthode initialement, par exemple display: inline-block.

Là encore, on peut utiliser les requêtes de fonctionnalité pour surcharger display: inline-block. Ici aussi, il n'est pas nécessaire de tout surcharger. Pour les éléments concernés par inline-block, ils deviendront des objets de la grille et inline-block ne s'appliquera plus. Dans l'exemple qui suit, on utilise la propriété vertical-align sur les éléments lorsqu'on utilise le mode inline-block, cette propriété n'étant pas appliquée aux éléments d'une grille, elle est ignorée lorsque l'élément devient un objet de la grille.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  max-width: 600px;
  margin: 0 auto;
}

.wrapper li {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper ul {
  margin: 0 -10px;
  padding: 0;
  list-style: none;
}

.wrapper li {
  display: inline-block;
  vertical-align: top;
  width: calc(33.333333% - 20px);
  margin: 0 10px 20px 10px;
}
@supports (display: grid) {
  .wrapper ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    margin: 0;
  }
  .wrapper li {
    width: auto;
    margin: 0;
  }
}

<div class="wrapper">
  <ul>
    <li class="card">
      <h2>Un</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Deux</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Trois</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Quatre</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Cinq</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
    <li class="card">
      <h2>Six</h2>
      <p>
        On peut utiliser la grille CSS pour surcharger d'anciennes méthodes.
      </p>
    </li>
  </ul>
</div>

Ici aussi, il faut reparamétrer la largeur de l'élément puis améliorer les autres propriétés. Dans cet exemple également on a utilisé grid-gap plutôt que des marges et des marges négatives pour créer les « gouttières ».

La spécification sur les grilles CSS détaille comment on peu surcharger le comportement de certaines propriétés lorsqu'un élément devient un objet d'une grille. Les sections principales sur ce sujet sont :

• La création de conteneurs de grille (Establishing Grid Containers)
• Les objets de la grille (Grid Items)
• L'affichage d'un objet de la grille (Grid Item Display)

Ce comportement est détaillé dans la spécification et on peut donc l'utiliser pour surcharger les règles utilisées pour les navigateurs qui ne prennent pas en charge les grilles CSS. Ce que nous avons appliqué n'est pas une bidouille, on tire simplement parti de l'interaction entre les différents modes de disposition, tel que décrit dans la spécification.

Lorsqu'un élément possède un parent pour lequel display: grid, cet élément devient un bloc (cf. la specification). C'est pour cela que, pour l'élément qui utilisait inline-block, display: inline-block ne s'appliquait plus.

Si la disposition historique utilise display: table, un élément avec display: table-cell génèrera des boîtes anonymes. Aussi, si on utilise display: table-cell sans élément parent avec display-table, un tableau implicite sera créé autour des cellules adjacentes (comme si on a avait enveloppé le tout dans un div ou autre pour lequel on aurait défini display: table). Si on a un objet pour lequel display: table-cell et que, dans une requête de fonctionnalité, on utilise display: grid pour l'élément parent, il n'y aura plus de création de boîtes anonymes. Cela signifie qu'on peut surcharger display: table sans avoir ces boîtes anonymes supplémentaires.

Comme nous l'avons déjà vu, float, ainsi que clear n'ont aucun effet sur un objet de grille. Il n'est donc pas nécessaire d'utiliser explicitement float: none sur les éléments.

La propriété d'alignement vertical-align n'a aucun effet sur un objet d'une grille. Pour les dispositions qui utilisent display: inline-block ou display: table, la propriété vertical-align était utilisée pour réaliser des alignements basiques. Avec une disposition en grille, on peut utiliser les propriétés d'alignement des boîtes sur la grille, plus puissantes.

Il est aussi possible de partir d'une disposition sur plusieurs colonnes car les propriétés column-* ne s'appliquent pas sur un conteneur de grille.

• Pour mieux comprendre comment utiliser les requêtes média en CSS, vous pouvez lire cet excellent article de Hacks.
• Un récapitulatif des différences d'implémentation entre celle utilisée par IE/Edge ≤15 et celle qui décrit la version moderne de la spécification. Cet article évoque également la prise en charge d'autoprefixer : Should I try to use the IE implementation of CSS Grid Layout?
• Autoprefixer et le placement automatique des grilles pour IE
• Les grilles CSS et la nouvelle version d'Autoprefixer

• Précédent
• Aperçu : Grilles CSS (CSS Grid)
• Suivant