CSS Intermédiaire

Dans cette partie plus poussée, nous verrons des techniques de mise en page avancée comme les grilles CSS ainsi que des fonctionnalités CSS dynamiques telles que les variables.

Les variables CSS

Depuis quelques années, le langage CSS permet de définir et d'utiliser des variables. Une variable est un élément qui stocke une valeur.
L'intérêt des variables réside principalement, mais pas uniquement, dans le fait de pouvoir utiliser une même valeur dynamique à plusieurs endroits. Ainsi, si la variable doit être modifiée, elle modifiera toutes ses instances en une seule fois.

Par exemple, si la couleur principale d'une marque change, il suffira de mettre la variable à jour et pas de chercher et modifier chaque occurrence de la couleur en question dans le code.

Une variable peut stocker n'importe quelle valeur. Qu'il s'agisse d'une couleur, d'une suite de chiffre ou encore d'une fonction entière.

Syntaxe

Pour définir une variable en CSS, il convient de respecter la nomenclature suivante :
-- NOM-DE-VARIABLE : VALEUR

Les variables globales sont généralement définies dans un sélecteur :root Par exemple :

:root {
  --text-color: #222222;
  --bg-color: white;
}

Utilisation

Une fois définies, les variables sont disponibles mais n'auront pas d'effet tant qu'elles ne seront pas appliquées à un propriété CSS. Pour utiliser une variable, il faut utiliser la fonction CSS var()

body {
  color: var(--text-color); // #222222
  background-color: var(--bg-color); // white
}

Afin d'éviter d'utiliser une variable qui n'existe pas ou qui pourrait être supprimée, on peut définir une deuxième valeur dans la fonction var() qui servira de valeur de secours.

body {
  color: var(--text-color, black); // #222222
  background-color: var(--brand-color, #f0f0f0); // #f0f0f0
}

CSS Grid

La propriété display: grid permet de créer des grilles de mise en page, c'est-à-dire des colonnes, des lignes et des cellules dans lesquelles placer le contenu HTML.

Je vous recommande la lecture détaillée et l'utilisation des exemples dynamiques de cet article sur les grilles CSS.

Utilisation

La grille se déclare sur un élément (parent) contenant d'autres éléments (enfants). Toute la structure de la grille sera également déclarée sur la parent.

.parent {
  // On initialise la grille
  display: grid;
  // On créé des colonnes
  grid-template-columns: 1fr 3fr; // 2 colonnes
  // On créé des lignes
  grid-template-rows: 100px 1fr 50px; // 3 lignes
}

L'unité fr utilisée ici permet de dire aux colonnes et lignes de répartir l'espace disponible selon des fractions. Ainsi, la deuxième colonne bénificiera des 3 quart de l'espace disponible alors que la première n'en aura qu'un quart.

La répétition de colonnes

Si nos colonnes doivent partager l'espace de manière égale, il est possible d'utiliser la fonction repeat() afin d'optimiser la déclaration.

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr); // 3 colonnes de 1fr chacune
}

La répétition responsive

Bien que pratique, cette déclaration n'est pas responsive. On peut la modifier dans une règle @media en fonction de la taille de la fenêtre. On peut également définir une grille fluide qui s'adaptera d'elle-même à l'espace disponible dans le navigateur.

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

• auto-fit permet de dire aux cellules de grandir afin de remplir l'espace disponible dans la ligne
• minmax() est une fonction qui permet de définir une valeur minimum et une valeur maximum
  • 300px est la largeur minimum d'une cellule
  • 1fr est la largeur maximum

Ainsi, la grille va calculer dynamiquement combien d'enfants peuvent rentrer côte-à-côte dans l'espace disponible en se basant sur les valeurs min et max. Lorsqu'un enfant n'a plus la place, il passe à la ligne.

Optimisation finale

Pour éviter de causer un débordement horizontal à cause de la valeur min sur les petits écrans, on préfèrera utiliser un garde-fou qui garantira que les enfants resteront contenus dans la page.

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

• min() est une fonction qui permet de choisir la plus petite valeur entre deux
  • 300px est la largeur minimum idéale d'une cellule
  • 100% est la largeur minimum permise pour éviter un débordement horizontal