recursal/MDN huggingface dataset:
Envelopper une grille
=====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
Ce motif permet d'aligner le contenu d'une grille au centre grâce à un élément qui l'enveloppe. On peut également choisir quels éléments aligner au centre et lesquels adosser aux côtés.

Spécifications sommaires
------------------------

Les éléments placés sur la grille devraient pouvoir être alignés au centre et/ou sur les bords.

Recette
-------

**Note :** Télécharger cet exemple.

Choix effectués
---------------

Cette recette utilise la fonction `minmax()` afin de définir les tailles des pistes pour la propriété `grid-template-columns`.

Les deux colonnes extérieures ont une taille maximale de `1fr`, ce qui signifie qu'elles occuperont tout l'espace disponible dans le conteneur de grille.

Méthodes de recours ou alternatives
-----------------------------------

Si cette recette est utilisée pour une page entière, il peut s'avérer utile de définir `max-width` et des marges horzontales avec `auto` afin que le contenu soit centré horizontalement :


```css
.grid {
  max-width: 1200px;
  margin: 0 auto; // on centre le conteneur en horizontal
  display: grid;
  /\* Other grid code goes here \*/
}

/\* On retire max-width et les marges si le navigateur \*/
/\* prend en charge les grilles \*/
@supports (display: grid) {
  .grid {
    max-width: none;
    margin: 0;
  }
}
```


Pour qu'un élément soit isolé et colle au bord du *viewport*, on peut utiliser cette astuce de Una Kravets :


```css
.item {
  width: 100vw;
  margin-left: 50%;
  transform: translate3d(-50%, 0, 0);
}
```


On a ainsi une méthode plus compatible mais qui ne permet pas d'aligner les éléments aussi facilement que sur une grille CSS.

Accessibilité
-------------

Bien que les grilles CSS nous permettent potentiellement de positionner n'importe où on le souhaite, il est important que l'ordre des éléments dans le document soit le même que l'ordre visuel, utilisé pour la navigation (voir les grilles CSS et l'accessibilité pour plus de détails).

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `grid-template-columns`
* Les grilles CSS sur MDN
* Article : Les grilles CSS, plus de flexibilité avec `minmax()` (en anglais)
* Article : Isoler des éléments sur une grille CSS (en anglais)
Pagination
==========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
Dans cette recette, nous verrons comment utiliser une méthode de navigation où l'utilisateur peut passer d'une page à une autre pour un ensemble donné via les numéros de ces pages (généralement affichés en bas de page).

![Links to sets of pages in a paged listing](/fr/docs/Web/CSS/Layout_cookbook/Pagination/pagination.png)

Spécifications sommaires
------------------------

Pour cette méthode de navigation, les éléments sont généralement affichés sur une ligne. Afin de s'assurer que la pagination est compréhensible pour les utilisateurs d'outils d'assistance, on balise les éléments dans une liste avec un élément `<nav>` et on utilise CSS afin d'organiser visuellement l'ensemble sur une ligne.

Généralement, l'outil de navigation sera centré horizontalement et placé sous le contenu.

Recette
-------

**Note :** Télécharger cet exemple.

Choix effectués
---------------

Pour obtenir ce résultat, on utilise les boîtes flexibles avec une conteneur flexible imbriqué dans un autre. L'élément `<nav>` est utilisé comme conteneur flexible afin de pouvoir en centrer le contenu grâce à la propriété `justify-content`.

La liste est elle-même un conteneur flexible qui permet d'organiser ces éléments sur une lignes. Pour espacer les éléments, on utilise la propriété `margin` pour espacer les éléments entre eux.

Méthodes alternatives
---------------------

Lorsque la propriété `column-gap` sera plus largement implémentée par les navigateurs, celle-ci pourra être utilisée à la place des marges pour espacer les éléments flexibles.


```css
.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  column-gap: 2px;
}
```

Accessibilité
-------------

Il est nécessaire qu'une personne utilisant un lecteur d'écran comprenne comment la navigation fonctionne et que cliquer sur un lien envoie vers une autre page. Aussi, on ajoute `aria-label="pagination"` sur l'élément `<nav>`.

On a également ajouté du contenu qui pourra être lu par le lecteur d'écran mais qui est masqué visuellement et on a ajouter l'attribut `aria-hidden` sur les flèches de pagination.

Voir la section « Voir aussi » en fin d'article pour divers liens portants sur l'accessibilité.

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `justify-content`
* `column-gap`
* *Know your ARIA: 'Hidden' vs 'None' (en anglais)*
* Utiliser le contenu invisible pour les lecteurs d'écran (en anglais)
* Écrire du CSS sans oublier l'accessibilité (en anglais)
* Guide stylistique d'accessibilité : la pagination
Navigation segmentée
====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
Une barre de navigation divisée consiste en un ou plusieurs éléments de navigation séparés des autres éléments de navigation.

![Items separated into two groups.](/fr/docs/Web/CSS/Layout_cookbook/Split_Navigation/split-navigation.png)

Spécifications sommaires
------------------------

Une telle barre de navigation consiste généralement à avoir un élément écarté des autres. Pour cela, on va pouvoir utiliser les boîtes flexibles sans avoir besoin de deux conteneurs flexibles.

Exemple appliqué
----------------

**Note :** Télécharger cet exemple.

Choix effectués
---------------

Ce composant utilise les marges automatiques et les boîtes flexibles pour séparer l'élément voulu.

Une marge automatique absorbe tout l'espace disponible sur la direction à laquelle elle est appliquée. C'est comme cela qu'on peut centrer un bloc avec des marges automatiques, de chaque côté du bloc, la marge essaye de consommer le plus d'espace possible et *pousse* le bloc au milieu.

Dans notre exemple, c'est la marge à gauche du dernier élément qui est automatique et qui consomme l'espace, poussant ainsi l'élément sur la droite. Pour déplacer la séparation, on peut appliquer la classe `push` à n'importe quel élément de la liste.

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le module de spécification *CSS Flexible Box Layout*
Liste de groupes avec indicateurs
=================================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
Dans cet article, nous verrons comment créer une liste de groupes dont chaque élément possède un compteur sous la forme d'un indicateur (*badge*).

![A list of items with a badge indicating a count displayed to the right of the text.](/fr/docs/Web/CSS/Layout_cookbook/List_group_with_badges/list-group-badges.png)

Spécifications sommaires
------------------------

Les éléments de la liste doivent être affichés avec les indicateurs alignés à droite, quel que soit le volume de contenu pour un élément. L'indicateur doit être centré verticalement s'il y a plus d'une ligne de contenu.

Exemple appliqué
----------------

**Note :** Télécharger l'exemple.

Choix effectués
---------------

Les boîtes flexibles sont un outil plutôt pratique pour constituer ce motif et permettent d'adapter simplement la disposition.

Pour s'assurer que le texte et l'indicateur soient bien alignés, on utilise la propriété `justify-content` avec la valeur `space-between`. Ainsi, l'espace supplémentaire est placé entre les éléments. Vous pouvez retirer cette propriété dans l'exemple ci-avant pour voir le badge se déplacer à la fin du texte.

Pour aligner le contenu horizontalement, on utilise la propriété `align-items` afin d'aligner le texte et l'indicateur sur l'axe secondaire. Si on veut que l'indicateur soit aligné en haut du contenu, on pourra utiliser `align-items: flex-start` à la place.

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Alignement des boîtes avec les boîtes flexibles
* Aligner des objets dans un conteneur flexible
Bas de page adhérant
====================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
Un bas de page adhérant est un motif où le bas de page reste en bas de la zone d'affichage (*viewport*) lorsque le contenu est moins haut que la zone d'affichage. Dans cet article, nous verrons quelques techniques pour parvenir à ce résultat.

![A sticky footer pushed to the bottom of a box](/fr/docs/Web/CSS/Layout_cookbook/Sticky_footers/cookbook-footer.png)

Spécifications sommaires
------------------------

Voici les spécifications rapides pour décrire le résultat qu'on souhaite obtenir :

* Le pied de page est en bas de la zone d'affichage lorsque le contenu est suffisamment petit
* Si le contenu est plus grand que la zone d'affichage, le pied de page est situé sous le contenu.
Recette
-------

**Note :** Télécharger cet exemple

**Note :** Dans cet exemple, ainsi que dans le suivant, on utilise un élément enveloppant avec `min-height: 100%` afin que l'exemple intégré à la page fonctionne. Pour reproduire cela sur une page complète, on peut utiliser `min-height` avec la valeur `100vh` sur l'élément `<body>` qu'on utilise comme conteneur de grille.

Choix effectués
---------------

Dans l'exemple précédent, on utilise une grille CSS pour réaliser ce bas de page adhérant. L'élément `.wrapper` a une hauteur minimale de `100%`, ce qui signifie qu'il est aussi grand que le conteneur dans lequel il est placé. On crée ensuite une grille avec une seule colonne et trois lignes, une pour chaque partie de la disposition.

Le placement automatique de la grille placera les objets selon l'ordre du document source. Le titre vient donc se placer sur la première piste (dimensionnée automatiquement), le contenu vient se placer sur la piste `1fr` et le pied de page se retrouve dans la troisième région (dimensionnée automatiquement). La piste du milieu, dimensionnée avec `1fr`, occupera tout l'espace disponible et grandira pour remplir l'espace disponible.

Méthodes alternatives
---------------------

Si vous devez prendre en charge des navigateurs qui ne permettent pas d'utiliser les grilles CSS, vous pouvez utiliser les boîtes flexibles (*flexbox*) pour avoir une note de bas de page adhérante.

On commence de la même façon mais on utilise `display:flex` plutôt que `display:grid` sur `.wrapper`. On définit `flex-direction` avec la valeur `column` afin d'avoir une organisation verticale. Pour le contenu principal, on utilise `flex-grow: 1` et pour les deux autres éléments, on utilise `flex-shrink: 0`. Cela évite de les réduire encore lorsque le contenu remplit la zone principale.

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Les concepts de base des grilles CSS
Cookbook template
=================

**Note :** Voici un modèle de contenu pour les pages de « recette » CSS. Vous êtes invité⋅e à utiliser cette page comme modèle lorsque vous créez une nouvelle recette.

*Les commentaires en italiques sont des informations sur l'utilisation de telle ou telle partie du modèle.*

*Une description du problème qu'on souhaite résoudre ou du motif qu'on illustre avec cette recette.*

Spécifications sommaires
------------------------

*Que cherche-t-on à faire avec cette recette ? Quel problème résout-on ici ? Il faut expliquer de façon concise ce que l'on souhaite faire.*

Recette
-------

*Il faudra changer le chemin de la macro pour correspondre à celui de votre exemple une fois que celui-ci a été fusionné sur le dépôt principal. Le dernier paramètre correspond à la hauteur qui peut être adaptée si besoin.*

*Il faut modifier le lien pour cibler la version téléchargeable de votre exemple.*

**Note :** Télécharger cet exemple.

Choix effectués
---------------

*Expliquez ici les décisions prises pour réaliser cette recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement.*

Méthodes de recours ou alternatives
-----------------------------------

*S'il existe d'autres méthodes ou des méthodes qui permettent une amélioration progressive pour les navigateurs qui ne prennent pas en charge les fonctionnalités récentes utilisées, vous pouvez les décrire ici.*

Accessibilité
-------------

*Inclure ici les aspects spécifiquement liés à l'accessibilité pour cette recette. Cette section peut être omise si rien de notable ne concerne l'accessiblité pour cette recette.*

Compatibilité des navigateurs
-----------------------------

{{Compat}}Voir aussi
----------

* *Liste de liens sur les propriétés concernées : `example-property`*
* *Liens vers des articles qui expliquent comment utiliser telles propriétés en contexte*
* *Liens vers des ressources externes. Il ne faut pas hésiter à pointer vers de bonnes ressources externes mais leur contenu ne doit pas se limiter à des points de détail.*
Comprendre z-index en CSS
=========================

* Aperçu : Comprendre z-index
* Suivant

Généralement, les pages HTML sont vues comme des objets en deux dimensions et le texte, les images et les autres éléments sont disposés sans se chevaucher. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.

> 
> *Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un axe Z et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement.*
> 
> 
> 

Source : Section 9.9.1. de CSS 2.1 - La présentation en couches

Cela signifie que les règles de style CSS permettent de positionner des boîtes sur différentes couches, la couche « normale » étant la couche située en 0 sur l'axe Z. La position de chaque couche sur l'axe Z est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier sera grand, plus la couche sera haute dans la pile. Cette valeur se contrôle via la propriété CSS `z-index`.

`z-index` peut sembler simple d'utilisation : il ne s'agit que d'une seule propriété, exprimée avec un entier et un comportement plutôt simple de prime abord. Cependant, lorsque `z-index` est appliquée à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire imprévisible. Ceci est dû aux règles complexes d'empilement.

Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples.

1. L'empilement sans `z-index` : Règles d'empilement par défaut
2. L'empilement et `float` : Comportement des éléments flottants
3. Ajouter `z-index` : Utiliser `z-index` pour modifier l'empilement par défaut
4. L'empilement de couches : Remarques sur l'empilement de couches
5. Exemple d'empilement n°1 : Hiérarchie HTML à 2 niveaux, `z-index` sur le dernier niveau
6. Exemple d'empilement n°2 : Hiérarchie HTML à 2 niveaux, `z-index` sur tous les éléments
7. Exemple d'empilement n°3 : Hiérarchie HTML à 3 niveaux, `z-index` sur le deuxième niveau
* Aperçu : Comprendre z-index
* Suivant
Exemple d'empilement 2
======================

* Précédent
* Aperçu : Comprendre z-index
* Suivant
Deuxième exemple
----------------

Ce deuxième exemple est très simple, mais il est essentiel à la compréhension du concept de *contexte d'empilement*. Nous avons les 4 mêmes blocs que l'exemple précédent, mais maintenant, nous appliquons des propriétés `z-index` aux deux niveaux de la hiérarchie.

Vous pouvez voir que le bloc *DIV #2* (z-index : 2) est au dessus du bloc *DIV #3* (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de `z-index` régissent l'empilement des éléments.

Ce qui peut apparaitre comme étrange, c'est que le bloc *DIV #2* (z-index : 2) est au dessus du bloc *DIV #4* (z-index : 10), malgré leurs valeurs de `z-index`. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc *DIV #4* appartient au contexte d'empilement créé par le bloc *DIV #3*, et, comme expliqué précédemment, le bloc *DIV #3* (et tout son contenu) est au dessous du bloc *DIV #2*.

Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement :

* Contexte d'empilement racine
    + DIV #2 (z-index 2)
    + DIV #3 (z-index 1)
        - DIV #4 (z-index 10)

**Note :** Il est important de se souvenir qu'en général, la hiérarchie HTML est différente de la hiérarchie du contexte d'empilement. Dans la hiérarchie du contexte d'empilement, les éléments qui ne créent pas un contexte d'empilement sont regroupés avec leur parents.

Exemple
-------

### CSS


```css
div {
  font: 12px Arial;
}

span.bold {
  font-weight: bold;
}

#div2 {
  z-index: 2;
}

#div3 {
  z-index: 1;
}

#div4 {
  z-index: 10;
}

#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#div2 {
  opacity: 0.8;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#div4 {
  opacity: 0.8;
  position: absolute;
  width: 200px;
  height: 70px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}
```

### HTML


```html
<br />

<div id="div1">
  <br /><span class="bold">DIV #1</span> <br />position: relative;
  <div id="div2">
    <br /><span class="bold">DIV #2</span> <br />position: absolute;
    <br />z-index: 2;
  </div>
</div>

<br />

<div id="div3">
  <br /><span class="bold">DIV #3</span> <br />position: relative;
  <br />z-index: 1;
  <div id="div4">
    <br /><span class="bold">DIV #4</span> <br />position: absolute;
    <br />z-index: 10;
  </div>
</div>
```

* Précédent
* Aperçu : Comprendre z-index
* Suivant
Ajouter z-index
===============

* Précédent
* Aperçu : Comprendre z-index
* Suivant
Ajouter `z-index`
-----------------

Dans le premier exemple, « empilement sans `z-index` », illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS `z-index`.

Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de `z-index` est affichée par dessus toutes celles dont la valeur est inférieure à la sienne.

**Attention :** `z-index` a un effet sur les éléments uniquement si ceux-ci sont positionnés.

* *Bas : couche la plus lointaine de l'observateur*
* …
* Couche -3
* Couche -2
* Couche -1
* Couche 0 *couche de rendu par défaut*
* Couche 1
* Couche 2
* Couche 3
* …
* *Haut : couche la plus proche de l'observateur*

**Note :**

* Lorsque la propriété `z-index` n'est pas définie, les éléments sont rendus sur la couche 0 par défaut.
* Si plusieurs éléments possède la même valeur de `z-index` (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans empilement sans `z-index` s'appliquent.

Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant `z-index`. Le `z-index` du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné.

Code source de l'exemple
------------------------

### HTML


```html
<div id="abs1">
  <b>DIV #1</b>
  <br />position: absolute; <br />z-index: 5;
</div>

<div id="rel1">
  <b>DIV #2</b>
  <br />position: relative; <br />z-index: 3;
</div>

<div id="rel2">
  <b>DIV #3</b>
  <br />position: relative; <br />z-index: 2;
</div>

<div id="abs2">
  <b>DIV #4</b>
  <br />position: absolute; <br />z-index: 1;
</div>

<div id="sta1">
  <b>DIV #5</b>
  <br />no positioning <br />z-index: 8;
</div>
```

### CSS


```css
div {
  padding: 10px;
  opacity: 0.7;
  text-align: center;
}

b {
  font-family: sans-serif;
}

#abs1 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#rel1 {
  z-index: 3;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  z-index: 2;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  z-index: 8;
  height: 70px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}
```

* Précédent
* Aperçu : Comprendre z-index
* Suivant