recursal/MDN huggingface dataset:
CSS Layout cookbook
===================

Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fréquemment sur le Web et qu'on pourrait souhaiter implémenter pour son propre site. En plus de fournir du code qui peut servir de point de départ, ces recettes mettent en avant les différents outils et dispositions qui peuvent être utilisées et les choix à effectuer lors du développement.

**Note :** Si vous débutez en CSS, nous vous conseillons de consulter notre module sur l'apprentissage de la disposition en CSS. Ce guide vous fournira les informations de base pour comprendre le fonctionnement de chacune de ces recettes.

Les recettes
------------

| Recette | Description | Méthodes de disposition utilisées |
| --- | --- | --- |
| Objets avec média | Une boîte constituée de deux colonnes avec une image d'un côté et un texte descriptif de l'autre (par exemple un tweet ou une publication Facebook intégrée à une page). | Grilles CSS, `float` pour une méthode de recours, dimensionnement avec `fit-content` |
| Colonnes | Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu. | Grilles CSS, Disposition multi-colonnes, Flexbox |
| Centrer un élément | Comment centrer un élément horizontalement et verticalement. | Flexbox, Alignement des boîtes |
| Bas de page adhérant | Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (*viewport*) lorsque le contenu est plus petit que la zone ou le conteneur. | Grilles CSS, Flexbox |
| Navigation segmentée | Un motif de navigation où certains liens sont séparés des autres. | Flexbox, `margin` |
| Navigation avec un fil d'Ariane (*breadcrumb*) | Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages. | Flexbox |
| Liste de groupes avec indicateurs | Afficher une liste d'éléments avec chacun un indicateur numérique. | Flexbox, Alignement des boîtes |
| Pagination | Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple). | Flexbox, Alignement des boîtes |
| Carte | Un composant sous forme de carte. L'assemblage de tels composants formera une grille de cartes. | Grilles CSS |
| Envelopper une grille (*grid wrapper*) | Comment aligner certains éléments au centre d'une grille et permettre à d'autres d'être alignés sur les bords. | Grilles CSS |

Contribuer en créant une recette
--------------------------------

MDN est un wiki auquel vous pouvez contribuer, y compris en ajoutant une recette à celles-ci ! Voir cette page pour un modèle ainsi que les règles à suivre pour créer votre propre exemple.
<length-percentage>
===================

Le type de donnée **`<length-percentage>`** représente une valeur qui peut être une valeur de type `<length>` ou une valeur de type `<percentage>`.

Syntaxe
-------

Se référer à la documentation des types `<length>` et `<percentage>` pour plus de détails sur les syntaxes possibles pour chacun de ces types.

Utilisation avec `calc()`
-------------------------

Lorsqu'une valeur de type `<length-percentage>` peut être utilisée dans une déclaration, cela signifie que le pourcentage sera résolu comme une longueur et qu'il peut alors être utilisé au sein d'une expression `calc()`. Ainsi, toutes les valeurs qui suivent sont acceptables pour la propriété `width` :


```css
width: 200px;
width: 20%;
width: calc(100% - 200px);
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # mixed-percentages |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<shape>
=======

**Obsolète:** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

Le type de donnée CSS **`<shape>`** permet de représenter des formes. Ces formes (ou régions) sont utilisées pour définir les parties d'un élément sur lesquelles des propriétés comme `clip` s'appliquent. Ce type de donnée a été déprécié pour être remplacé par `<basic-shape>`.

**Note :** `<shape>` et `rect()` fonctionnent avec la propriété `clip` qui a été dépréciée pour être remplacée par `clip-path`. Il est donc préférable d'utiliser cette dernière si possible avec une valeur de type `<basic-shape>` à la place.

Syntaxe
-------

Les valeurs de type `<shape>` sont construites grâce à la notation fonctionnelle `rect()` qui permet de créer une zone en forme de rectangle.
```

rect(haut, droite, bas, gauche)
```


#### Valeurs

![rect.png](/fr/docs/Web/CSS/shape/rect.png)

`haut`

Une valeur de type `<length>` qui représente le décalage entre le côté haut du rectangle et le côté haut de la bordure de l'élément.


`droite`

Une valeur de type `<length>` qui représente le décalage entre le côté droit du rectangle et le côté gauche de la bordure de l'élément.


`bas`

Une valeur de type `<length>` qui représente le décalage entre le côté bas du rectangle et le côté haut de la bordure de l'élément.


`gauche`

Une valeur de type `<length>` qui représente le décalage entre le côté gauche du rectangle et le côté gauche de la bordure de l'élément.

Interpolation
-------------

Les valeurs de type `<shape>` sont des rectangles qui peuvent être interpolées lors des animations. Pour ces valeurs, l'interpolation s'effectue en interpolant chacune des valeurs `haut`, `droite`, `bas` et `gauche` comme des nombres réels (à virgule flottante). La vitesse de l'interpolation est définie grâce à la fonction de temporisation associée à l'animation.

Exemples
--------

### Exemple illustrant un usage correct de la fonction rect()


```css
img.clip04 {
  clip: rect(10px, 20px, 20px, 10px);
}
```

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # value-def-shape |

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

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

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

* `clip`
* La fonction spécifique à Gecko `-moz-image-rect()`
:-moz-ui-invalid
================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La pseudo-classe **`:-moz-ui-invalid`** représente n'importe quel élément de formulaire dont la valeur est invalide selon ses contraintes de validation (en-US).

Cette pseudo-classe est appliquée d'après les règles suivantes :

* Si le contrôle n'a pas le focus et que cette valeur est invalide, la pseudo-classe est appliquée.
* Si le contrôle a le focus et que la valeur était valide (même si elle était vide) lorsque le focus a été obtenu, la pseudo-classe n'est pas appliquée.
* Si le contrôle a le focus et que la valeur était invalide lorsque le focus a été obtenu, on revalide le contenu à chaque frappe.
* Si l'élément est obligatoire, les règles précédentes ne s'appliquent que si l'utilisateur a modifié la valeur ou tenté de soumettre le formulaire.

Si le contrôle était valide au moment où l'utilisateur a commencé à l'utiliser, la mise en forme liée à la validité est uniquement modifiée lorsque l'utilisateur interagit avec un autre contrôle. Toutefois, si l'utilisateur tente de corriger une valeur invalide, le contrôle indique immédiatement lorsque celle-ci devient valide. Les éléments obligatoires sont considérés comme invalides uniquement si l'utilisateur les modifie ou essaie de soumettre une valeur invalide non-modifiée.

Par défaut, Gecko applique un style qui crée un halo rouge (grâce à `box-shadow`) autour des éléments avec cette pseudo-clésse. Pour un exemple illustrant comment surcharger le style par défaut, on pourra utiliser la pseudo-classe `:invalid`.

Syntaxe
-------

Error: could not find syntax for this itemSpécifications
--------------

Cette pseudo-classe est une pseudo-classe propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification.

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

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

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

* `:valid`
* `:invalid`
* `:required`
* `:optional`
* `:-moz-ui-valid`
CSS Lists
=========

**CSS Lists** (listes CSS) est un module CSS qui définit la façon dont les listes sont mises en forme, comment des styles peuvent être appliqués aux marqueurs.

Référence
---------

### Propriétés

* `list-style-image`
* `list-style-type`
* `list-style-position`
* `list-style`
Guides
------

Indentation homogène des listes

Explique comment obtenir une indentation homogène dans les différents navigateurs.

Utiliser les compteurs CSS

Explique comment utiliser les propriétés CSS relatives aux compteurs pour numéroter les listes.

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3  |
::-webkit-progress-inner-element
================================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Le pseudo-élément **`::-webkit-progress-inner-element`** représente le cadre extérieur de l'élément `<progress>`. C'est un pseudo-élément parent du pseudo-élément `::-webkit-progress-bar`.

**Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que `-webkit-appearance` (en-US) vaille `none` sur l'élément `<progress>`.

Exemples
--------

### CSS


```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-inner-element {
  border: 2px solid black;
}
```

### HTML


```html
<progress value="10" max="50"></progress>
```

### Résultat

Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :

![](/fr/docs/Web/CSS/::-webkit-progress-inner-element/-webkit-progress-inner-element_example.png)

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

Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.

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

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

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

* Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments `<progress>`
    + `::-webkit-progress-bar`
    + `::-webkit-progress-value`
* `::-moz-progress-bar`
* `::-ms-fill`
:nth-last-of-type
=================

La pseudo-classe CSS **`:nth-last-of-type`** permet de cibler les éléments selon leur position parmi les voisins qui sont du même type (les mêmes balises) en partant de la fin.

Exemple interactif
------------------

Syntaxe
-------

La pseudo-classe `nth-last-of-type` prend un seul argument qui représente le motif de répétition des éléments correspondants, comptés à partir de la fin.

Voir `:nth-last-child` pour une explication plus détaillée de sa syntaxe.


```css
:nth-last-of-type(<an-plus-b> | even | odd) {
  /\* ... \*/
}
```

Exemples
--------

Ici, on souhaite mettre en avant le deuxième élément `<span>` en partant de la fin :

### HTML


```html
<div>
  <span>Ce span est le premier !</span>
  <span>Ce span ne l'est pas. :(</span>
  <em>Celui-ci est bizarre.</em>
  <span>Celui-ci l'est !</span>
  <strike>C'est un autre type</strike>
  <span>Malheureusement, celui-ci ne l'est pas.</span>
</div>
```

### CSS


```css
span:nth-last-of-type(2) {
  background-color: lime;
}
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # nth-last-of-type-pseudo |

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

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

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

* `:nth-last-child`
* `:nth-of-type`
:user-valid (:-moz-ui-valid)
============================

La pseudo-classe CSS **`:user-valid`** représente tout élément de formulaire validé donc la valeur respecte la validation des contraintes. Toutefois, à la différence de `:valid`, cette pseudo-classe ne cible l'élément qu'après que la personne a interagi avec.

**Note :** Cette pseudo-classe se comporte de la même façon que la pseudo-classe non-standard `:-moz-ui-valid`.

Cette pseudo-classe s'applique selon les règles suivantes :

* Si le contrôle n'a pas le focus et que sa valeur est valide, cette pseudo-classe s'applique.
* Si le contrôle a le focus, et que la valeur était valide (potentiellement vide) lorsque le focus a été acquis, cette pseudo-classe s'applique.
* Si le contrôle a le focus, et que la valeur était invalide à l'acquisition du focus, on revalide à chaque frappe clavier.
* Si l'élément est obligatoire, les règles précédentes s'appliquent uniquement si l'utilisatrice ou l'utilisateur a modifié la valeur ou tenté d'envoyer le formulaire.

Par conséquent, si la valeur du contrôle était valide lorsque la personne a commencé l'interaction avec, la mise en forme relative à la validité est uniquement changée lorsque les actions font passer le focus à un autre contrôle. En revanche, si la personne tente de corriger une valeur précédemment incorrecte, le contrôle indique immédiatement lorsque la valeur devient valide. Les éléments obligatoires sont indiqués comme invalides uniquement si l'utilisatrice ou l'utilisateur les modifie ou tente d'envoyer le formulaire avec une valeur invalide inchangée.

Syntaxe
-------
```

:user-valid
```

Exemples
--------

### Définir une couleur et un symbole dans le cas `:user-valid`

Dans l'exemple qui suit, la bordure verte et la coche s'affichent uniquement après une interaction avec le champ. Essayez de changer l'adresse électronique en une autre adresse valide pour observer l'effet obtenu.

#### CSS


```css
input:user-valid {
  border: 2px solid green;
}

input:user-valid + span::before {
  content: "✓";
  color: green;
}
```


#### HTML


```html
<form>
  <label for="email">Email *: </label>
  <input
 id="email"
 name="email"
 type="email"
 value="test@example.com"
 required />
  <span></span>
</form>
```


#### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # user-valid-pseudo |

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

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

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

* `:valid`
* `:invalid`
* `:required`
* `:optional`
* `:user-invalid`
mask-mode
=========

La propriété CSS **`mask-mode`** détermine si le masque défini par `mask-image` est considéré comme un masque de luminance ou un masque alpha (transparence).


```css
/\* Valeurs avec un mot-clé \*/
mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

/\* Gestion de plusieurs masques \*/
mask-mode: alpha, match-source;

/\* Valeurs globales \*/
mask-mode: inherit;
mask-mode: initial;
mask-mode: revert;
mask-mode: unset;
```

Syntaxe
-------

La propriété `mask-mode` est définie avec un ou plusieurs mots-clés parmi ceux de la liste suivante, séparés par des virgules.

### Valeurs

`alpha`

Ce mot-clé indique que ce sont les valeurs du canal alpha (le canal d'opacité) qui sont utilisées comme valeurs de masque.

`luminance`

Ce mot-clé indique que ce sont les valeurs de luminance qui sont utilisées comme valeurs de masque.

`match-source`

Si la propriété `mask-image` est de type `<mask-source>`, les valeurs de luminance de l'image doivent être utilisées comme valeurs pour le masque.

Si elle est de type `<image>`, ce seront les valeurs de transparence (canal alpha) qui seront utilisées.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `match-source` |
| Applicabilité | tous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments `defs` et des éléments graphiques |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

Syntaxe formelle
----------------
```

mask-mode =   
  <masking-mode>#    
  
<masking-mode> =   
  alpha         |  
  luminance     |  
  match-source    
  
```

Exemples
--------

### Utiliser le mode de masque alpha

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-mode |

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

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

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

* Rognage et masquage avec CSS (en anglais)
:indeterminate
==============

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

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

* Learn more
* See full compatibility
* Report feedback
La pseudo-classe **`:indeterminate`** permet de cibler un élément de formulaire dont l'état est indéterminé.


```css
/\* Cible n'importe quel élément <input> \*/
/\* dans un état indéterminé \*/
input:indeterminate {
  background: lime;
}
```


Cela inclut :

* un élément `<input type="checkbox">` dont la propriété du DOM `indeterminate` est fixée à `true` via du code JavaScript
* des éléments `<input type="radio">` dont tous les boutons radio du groupe sont décochés
* des éléments `<progress>` dans un état indéterminé.
Syntaxe
-------

Error: could not find syntax for this itemExemples
--------

### Case à cocher et bouton radio

#### CSS


```css
input,
span {
  background: red;
}

:indeterminate,
:indeterminate + label {
  background: lime;
}
```


#### HTML


```html
<div>
  <input type="checkbox" id="checkbox" />
  <label for="checkbox">L'arrière-plan devrait être vert.</label>
</div>
<div>
  <input type="radio" id="radio" />
  <label for="radio">L'arrière-plan devrait être vert.</label>
</div>
```


#### JavaScript


```js
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}
```


#### Résultat

### Élément `progress`

#### CSS


```css
progress:indeterminate {
  opacity: 0.5;
  box-shadow: 0 0 2px 1px red;
}
```


#### HTML


```html
<progress />
```


#### Résultat

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

| Specification |
| --- |
| HTML Standard # selector-indeterminate |
| Selectors Level 4 # indeterminate |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
animation-name
==============

La propriété **`animation-name`** définit une liste d'animations qui doivent être appliquées à l'élément ciblé. Chaque nom indique une règle @ `@keyframes` qui définit les valeurs des propriétés pour la séquence.

Exemple interactif
------------------

Généralement, on pourra utiliser la propriété raccourcie `animation` pour définir l'ensemble des propriétés liées aux animations.

Syntaxe
-------


```css
/\* Valeur avec un mot-clé \*/
animation-name: none;

/\* Valeur utilisant un identifiant \*/
animation-name: test_05;

/\* Gestion de plusieurs animations \*/
animation-name: test1, animation4;

/*  Valeurs globales * /
animation-name: initial
animation-name: inherit
animation-name: unset
```

### Valeurs

`none`

Un mot-clé qui indique qu'aucune étape (*keyframe*) ne sera utilisée. Il peut être utilisée pour désactiver une animation sans changer l'ordre des autres identifiants ou afin de désactiver les animations provenant de la cascade.

`<custom-ident>`

Une chaîne de caractères qui identifie l'animation. Un identifiant est une séquence, insensible à la casse, de lettres entre `a` et `z`, de nombres entre `0` et `9`, de tirets bas (`_`) et/ou de tirets (`-`). Le première caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets en début d'identifiant. Enfin, la chaîne de l'identifiant ne peut pas être `unset`, `initial`, `inherit` ou une combinaison analogue avec une casse différente.


**Note :** Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par `animation-name`. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | tous les éléments, ainsi que les pseudo-elements `::before` et `::after` |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |

Syntaxe formelle
----------------
```

animation-name =   
  [ none | <keyframes-name> ]#    
  
<keyframes-name> =   
  <custom-ident>  |  
  <string>          
  
```

Exemples
--------

### CSS


```css
p {
  animation-duration: 3s;
  animation-name: glissement;
  animation-iteration-count: infinite;
}
@keyframes glissement {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
```

### HTML


```html
<p>
  La Chenille et Alice se considérèrent un instant en silence. Enfin la Chenille
  sortit le houka de sa bouche, et lui adressa la parole d’une voix endormie et
  traînante.
</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-name |

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

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

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

* Manipuler les animations CSS
* `AnimationEvent`
Sélecteurs universels
=====================

L'astérisque (\*) est le sélecteur universel en CSS. Il correspond à un élément de n'importe quel type.


```css
\* {
  color: green;
}
```


En CSS 3, l'astérisque peut être combinée avec les espaces de nom :

* `ns|*` - correspond à tous les éléments de l'espace de noms `ns`
* `*|*` - correspond à tous les éléments
* `|*` - correspond à tous les éléments sans espace de noms déclaré
Syntaxe
-------
```

* { style properties }
```


L'astérisque est optionnelle lorsqu'elle est utilisée avec des sélecteurs simples. Par exemple, `*.warning` et `.warning` seront équivalents.

Exemples
--------

### CSS


```css
\* [lang^="fr"] {
  color: green;
}

\*.warning {
  color: red;
}

\*#maincontent {
  border: 1px solid blue;
}

.floating {
  float: left;
}

.floating + \* {
  clear: left;
}
```

### HTML


```html
<p class="warning">
  <span lang="fr">Un span vert</span> dans un paragraphe rouge.
</p>
<p id="maincontent" lang="fr">
  <span class="warning">Un span rouge</span> dans un paragraphe vert.
</p>
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # the-universal-selector |

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

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