115 lines
4.6 KiB
Markdown
115 lines
4.6 KiB
Markdown
|
# 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 :
|
||
|
|
|
||
|
|
```css
|
||
|
|
: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()`
|
||
|
|
|
||
|
|
```css
|
||
|
|
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.
|
||
|
|
|
||
|
|
```css
|
||
|
|
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.](https://www.joshwcomeau.com/css/interactive-guide-to-grid/)
|
||
|
|
|
||
|
|
### 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.
|
||
|
|
|
||
|
|
```css
|
||
|
|
.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 **fr**actions. 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.
|
||
|
|
|
||
|
|
```css
|
||
|
|
.parent {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(3, 1fr); // 3 colonnes de 1fr chacune
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
### La répétition <span lang="en">responsive</span>
|
||
|
|
|
||
|
|
Bien que pratique, cette déclaration n'est pas <span lang="en">responsive</span>. 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.
|
||
|
|
|
||
|
|
```css
|
||
|
|
.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.
|
||
|
|
|
||
|
|
```css
|
||
|
|
.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
|