recursal/MDN huggingface dataset:
CSS Display
===========

**L'affichage CSS** (*CSS Display)* est un module CSS qui définit la façon dont l'arbre des boîtes pour la mise en forme est généré à partir de l'arbre des éléments du document et qui définit les propriétés qui le contrôlent.

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

### Propriétés CSS

* `display`
### Types de donnée CSS

* `<display-outside>`
* `<display-inside>`
* `<display-listitem>`
* `<display-box>`
* `<display-internal>`
* `<display-legacy>`
Guides
------

### Disposition en flux (`display: block`, `display: inline`)

* Les dispositions de bloc et en ligne dans le flux normal
* La disposition en flux et les dépassements
* La disposition en flux et les modes d'écriture
* Explications sur les contextes de formatage (en-US)
* Être ou non dans le flux
### Les boîtes flexibles (`display: flex`)

* Concepts de base des boîtes flexibles
* Aligner des objets dans un conteneur flexible
* Contrôler les proportions des objets flexibles le long de l'axe principal
* *Mixins* Flexbox pour les différents navigateurs
* Maîtriser le passage à la ligne des objets flexibles
* Ordonner les objets flexibles
* Les relations entre les boîtes flexibles et les autres méthodes de disposition
* La rétrocompatiblité des boîtes flexibles
* Les cas d'usage type pour les boîtes flexibles
### Les grilles CSS (`display: grid`)

* Concepts de base des grilles
* Les relations entre les grilles et les autres méthodes de disposition
* Le placement sur les lignes
* Les modèles de zone de grilles
* Les dispositions utilisant les lignes nommées
* Le placement automatique dans les grilles
* L'alignement des boîtes dans les grilles
* Les grilles, les valeurs logiques et les modes d'écriture
* Les grilles et l'accessibilité
* Les grilles et l'amélioration progressive
* Réaliser des dispositions courantes à l'aide de grilles
Spécifications
--------------

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
scroll-margin-block-end
=======================

La propriété **`scroll-margin-block-end`** définit la marge de défilement de l'élément sur la fin de l'axe de bloc. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

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

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
scroll-margin-block-end: 10px;
scroll-margin-block-end: 1em;

/\* Valeurs globales \*/
scroll-margin-block-end: inherit;
scroll-margin-block-end: initial;
scroll-margin-block-end: unset;
```

### Valeurs

`<length>`

Un décalage par rapport au côté correspondant du conteneur de défilement.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

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

scroll-margin-block-end =   
  <length>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-logical |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
margin-block-end
================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété **`margin-block-end`** définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour `writing-mode`, `direction`, and `text-orientation`, elle peut correspondre à `margin-top`, `margin-right`, `margin-bottom` ou `margin-left`.

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

Cette propriété est à rapprocher de `margin-block-start`, `margin-inline-end` et de `margin-inline-start` qui définissent les autres marges appliquées à l'élément.Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
margin-block-end: 10px; /\* Une longueur absolue \*/
margin-block-end: 1em; /\* Une longueur relative à la taille du texte \*/
margin-block-end: 5%; /\* Une largeur relative à la
 largeur du bloc englobant \*/

/\* Valeurs avec un mot-clé \*/
margin-block-end: auto;

/\* Valeurs globales \*/
margin-block-end: inherit;
```

### Valeurs

La propriété `margin-block-end` peut prendre les mêmes valeurs que la propriété `margin-left`.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | identique à `margin` |
| Héritée | non |
| Pourcentages | dépend du modèle en couches |
| Valeur calculée | si spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, `auto` |
| Type d'animation | une longueur |

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

margin-block-end =   
  <'margin-top'>    
  
```

Exemples
--------

### CSS


```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exemple {
  writing-mode: vertical-lr;
  margin-block-end: 20px;
  background-color: #c8c800;
}
```

### HTML


```html
<div>
  <p class="exemple">Texte d'exemple</p>
</div>
```

### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-properties |

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

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

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

* Les propriétés physiques correspondantes :
    + `margin-top`,
    + `margin-right`,
    + `margin-bottom`
    + `margin-left`
* `writing-mode`
* `direction`
* `text-orientation`
transition-property
===================

La propriété **`transition-property`** désigne les noms des propriétés CSS sur lesquelles un effet de transition devrait être appliqué.

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

**Note :** L'ensemble des propriétés CSS qui peuvent être animées évolue. Vous devriez donc éviter de lister ici des propriétés qui, actuellement, ne sont pas animées car elles pourraient l'être demain et cela pourrait affecter votre document.

Si vous définissez une propriété raccourcie (par exemple `background`), toutes les propriétés détaillées correspondantes seront animées de la même façon.

Syntaxe
-------


```css
/\* Avec un mot-clé \*/
transition-property: none;
transition-property: all;

/\* Valeurs utilisant un identifiant \*/
/\* <custom-ident> \*/
transition-property: test1;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/\* Valeurs multiples \*/
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property:
  all,
  -moz-specific,
  sliding;

/\* Avec des valeurs globales \*/
transition-property: inherit;
transition-property: initial;
transition-property: unset;
```

### Valeurs

`none`

Aucune propriété n'est concernée par les transitions.

`all`

Toutes les propriétés qui peuvent avoir une transition animée seront concernées.

`<custom-ident>`

Une chaîne de caractère qui identifie la propriété pour laquelle on doit appliquer un effet de transition lorsque sa valeur change. Pour plus de détails sur la forme de cet identifiant, voir la page sur le type `<custom-ident>`.

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

|  |  |
| --- | --- |
| Valeur initiale | tous |
| 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
----------------
```

transition-property =   
  none                           |  
  <single-transition-property>#    
  
<single-transition-property> =   
  all             |  
  <custom-ident>    
  
```

Exemples
--------

Il y a plusieurs exemples sur les transitions CSS qui se trouvent dans l'article sur les transitions CSS.

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

| Specification |
| --- |
| CSS Transitions # transition-property-property |

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

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

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

* Utiliser les transitions CSS
* `TransitionEvent`
:right
======

La pseudo-classe **`:right`**, liée à la règle `@page`, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite.


```css
/\* Sélectionne le contenu des pages droites \*/
/\* lorsqu'on imprime le document \*/
@page :right {
  margin: 2in 3in;
}
```


La position de la page (à gauche ou à droite) dépend de la direction d'écriture appliquée au document. Si la première page est écrite de la gauche vers la droite, alors ce sera une page droite, sinon ce sera une page gauche (qui pourra alors être ciblée avec `:left`).

**Note :** Il n'est pas possible de modifier toutes les propriétés CSS. Seules les propriétés `margin`, `padding`, `border`, and `background` **de la boîte correspondant à la page** peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées, et seulement la boîte correspondant à la page, et en aucun cas le contenu du document pourront être affectés.

Syntaxe
-------

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


```css
@page :right {
  margin: 2cm 3cm;
}
```

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

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

* `@page`
* `:first`
* `:left`
caret-color
===========

La propriété CSS **`caret-color`** définit la couleur du curseur visible à l'endroit où l'utilisateur peut ajouter du texte ou un autre contenu dans l'élément lorsqu'il saisit au clavier ou qu'il édite les informations.

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

**Note :** Les agents utilisateurs peuvent considérer que d'autres objets doivent être impactés par cette propriété : par exemple le curseur de navigation, qui ressemble au curseur de saisie et qui peut être déplacé sur un texte non-éditable. En revanche, bien que l'icône du curseur de la souris puisse ressembler à un curseur de saisie lorsque `cursor` vaut `auto` ou `text` ou `vertical-text`, celle-ci n'est pas modifiée par cette propriété. Pour certains navigateurs qui ne prennent pas en charge cette propriété, la couleur du curseur de saisie n'est pas associée à la couleur de la police.

Syntaxe
-------


```css
/\* Valeur avec un mot-clé \*/
caret-color: auto;
caret-color: transparent;
color: currentColor;

/\* Valeurs de couleur \*/
/\* Type <color> \*/
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);
```

### Valeurs

`auto`

L'agent utilisateur doit utiliser `currentcolor` mais peut ajuster la couleur du curseur afin d'améliorer la visibilité et le contraste avec le contenu environnant (l'arrière-plan, les ombres, etc.).

**Note :** Bien que l'agent utilisateur puisse utiliser `currentcolor` pour la valeur `auto`, cette dernière ne sera pas interpolée lors des animations/transitions (à la différence de la valeur `currentcolor`).

<color>

L'agent utilisateur utilise la couleur (`<color>`) indiquée comme couleur pour le curseur de saisie.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | `auto` is computed as specified and `<color>` values are computed as defined for the `color` property. |
| Type d'animation | une couleur |

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

caret-color =   
  auto     |  
  <color>    
  
```

Exemples
--------

### CSS


```css
#exemple {
  caret-color: red;
}
```

### HTML


```html
<input id="exemple" />
```

### Résultat

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # caret-color |

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

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

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

* `<input>`
* L'attribut HTML `contenteditable` qui rend le texte d'un élément éditable
* Rendre du contenu éditable
* Appliquer des couleurs sur des éléments HTML grâce à CSS
* Le type de données `<color>`
* Les autres propriétés relatives aux couleurs : `color`, `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color` et `column-rule-color`.
-moz-user-focus
===============

**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 propriété **`-moz-user-focus`** est utilisée pour indiquer si l'élément peut recevoir le focus.


```css
/\* Valeurs avec un mot-clé \*/
-moz-user-focus: normal;
-moz-user-focus: ignore;

/\* Valeurs globales \*/
-moz-user-focus: inherit;
-moz-user-focus: initial;
-moz-user-focus: unset;
```


En utilisant la valeur `ignore`, on peut désactiver la prise de focus sur l'élément (l'utilisateur ne pourra pas activer l'élément) et l'élément sera sauté lors de la navigation à la tabulation.

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

Syntaxe
-------

### Valeurs

`ignore`

L'élément n'accepte pas le focus (au clavier ou au pointeur) et sera sauté lors de la navigation à la tabulation.

`normal`

L'élément peut recevoir le focus normalement.

### Syntaxe formelle

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

### HTML


```html
<input
 class="ignored"
 value="L'utilisateur ne peut pas placer le focus sur cet élément." />
```

### CSS


```css
.ignored {
  -moz-user-focus: ignore;
}
```

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

Cette propriété est une propriété propriétaire liée à Gecko/Mozilla et ne fait partie d'aucune spécification. Une propriété similaire : `user-focus` a été proposée pour des brouillons de l'ancienne spécifications CSS3 pour les interfaces utilisateurs mais a été rejetée par le groupe de travail.

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

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

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

* `-moz-user-input`
* `-moz-user-modify`
* `-moz-user-select` (en-US)
scroll-padding
==============

La propriété **`scroll-padding`** est une propriété raccourcie qui permet de définir l'ensemble des propriétés `scroll-padding-top`, `scroll-padding-right`, `scroll-padding-bottom` et `scroll-padding-left` (de la même façon que la propriété `padding` permet de définir les propriétés détaillées associées).

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

Les propriétés `scroll-padding-*` permettent de définir des décalages par rapport à la zone de défilement de l'élément (*scrollport*). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
scroll-padding: auto;

/\* Valeurs de longueur \*/
/\* Type <length> \*/
scroll-padding: 10px;
scroll-padding: 1em 0.5em 1em 1em;
scroll-padding: 10%;

/\* Valeurs globales \*/
scroll-padding: inherit;
scroll-padding: initial;
scroll-padding: unset;
```

### Valeurs

`<length-percentage>`

Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. Cette valeur, de type `<length-percentage>`, est une longueur (`<length>`) ou un pourcentage (`<percentage>`) valide.

`auto`

Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.

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

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `scroll-padding-bottom`: `auto`
* `scroll-padding-left`: `auto`
* `scroll-padding-right`: `auto`
* `scroll-padding-top`: `auto`
 |
| Applicabilité | conteneurs d'ascenseurs |
| Héritée | non |
| Pourcentages | relative to the scroll container's scrollport |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `scroll-padding-bottom`: comme spécifié
* `scroll-padding-left`: comme spécifié
* `scroll-padding-right`: comme spécifié
* `scroll-padding-top`: comme spécifié
 |
| Type d'animation | by computed value type |

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

scroll-padding =   
  [ auto | <length-percentage [0,∞]> ]{1,4}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-padding |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
::-webkit-inner-spin-button
===========================

**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 CSS **`::-webkit-inner-spin-button`** permet de mettre en forme la partie intérieure de la roulette qui permet de choisir la valeur d'un élément `<input type="number">`.

Syntaxr
-------


```css
::-webkit-inner-spin-button {
  /\* … \*/
}
```

Exemples
--------

Ces exemples fonctionnent uniquement pour les navigateurs basés sur WebKit et Blink.

### CSS


```css
input[type="number"]::-webkit-inner-spin-button {
  cursor: pointer;
}
```

### HTML


```html
<input type="number" />
```

### Résultat

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

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

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

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

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

* Mettre en forme les contrôles de formulaires - WebKit (en anglais)
Combinateur de colonne
======================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

Le **combinateur de colonne** (`||`) est placé entre deux sélecteurs CSS. Les éléments ciblés sont ceux ciblés par le deuxième sélecteur et qui appartiennent à un élément en colonne qui correspond au premier sélecteur.


```css
/\* Les cellules de tableaux qui appartiennent \*/
/\* à la colonne "selected" \*/
col.selected||td {
  background: gray;
}
```

Syntaxe
-------


```css
column-selector||cell-selector {
  /\* propriétés pour le style \*/
}
```

Exemples
--------

### HTML


```html
<table border="1">
  <colgroup>
    <col span="2" />
    <col class="selected" />
  </colgroup>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
    <tr>
      <td colspan="2">D</td>
      <td>E</td>
    </tr>
    <tr>
      <td>F</td>
      <td colspan="2">G</td>
    </tr>
  </tbody>
</table>
```

### CSS


```css
col.selected||td {
  background: gray;
  color: white;
  font-weight: bold;
}
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # the-column-combinator |

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

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

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

* `<col>`
* `<colgroup>`
* `grid`
block-size
==========

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété **`block-size`** est une propriété *logique* qui permet de définir la taille de l'élément dans la direction orthogonale au sens de lecture. Selon la valeur de la propriété `writing-mode`, elle correspondra à la propriété physique `width` ou `height`.

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

Si le mode d'écriture est vertical, la valeur de `block-size` fera référence à la largeur de l'élément et sinon, elle fera référence à sa hauteur.

L'autre propriété logique permettant de définir la dimension sur l'autre axe est `inline-size`.

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
block-size: 300px;
block-size: 25em;

/\* Valeurs proportionnelles \*/
/\* Type <percentage> \*/
block-size: 75%;

/\* Valeurs avec un mot-clé \*/
block-size: 25em border-box;
block-size: 75% content-box;
block-size: max-content;
block-size: min-content;
block-size: available;
block-size: fit-content;
block-size: auto;

/\* Valeurs globales \*/
block-size: inherit;
block-size: initial;
block-size: unset;
```

### Valeurs

La propriété `block-size` peut prendre les mêmes valeurs que `width` et `height`.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | identique à `width` et à `height` |
| Héritée | non |
| Pourcentages | la taille de bloc du bloc englobant |
| Valeur calculée | identique à `width` et à `height` |
| Type d'animation | une longueur, pourcentage ou calc() ; |

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

block-size =   
  <'width'>    
  
```

Exemples
--------

### CSS


```css
.exemple {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
}
```

### HTML


```html
<p class="exemple">Texte d'exemple</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

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

* Les propriétés physiques correspondantes : `width` et `height`
* `writing-mode`