recursal/MDN huggingface dataset:
<display-legacy>
================

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
CSS 2 utilisant une syntaxe avec un seul mot-clé comme valeur pour la propriété `display`, il fallait plusieurs mots-clés pour les différentes variantes bloc/en ligne d'un même mode. Cette page décrit ces valeurs.

Syntaxe
-------

`inline-block`

L'élément s'inscrit dans le contenu environnant comme une boîte en ligne et organise son propre contenu en bloc.

Ce mot-clé est équivalent à la combinaison `inline flow-root`.

`inline-table`

La valeur `inline-table` n'a pas de correspondance directe en HTML. Un tel élément se comporte comme un élément HTML `<table>` avec une boîte en ligne et pas de bloc. À l'intérieur de la boîte de tableau, on aura un contexte de bloc.

Ce mot-clé est équivalent à la combinaison `inline table`.

`inline-flex`

L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des boîtes flexibles.

Ce mot-clé est équivalent à la combinaison `inline flex`.

`inline-grid`

L'élément se comporte comme un élément en ligne et organise son propre contenu selon le modèle des grilles CSS.

Ce mot-clé est équivalent à la combinaison `inline grid`.

### Syntaxe formelle
```

<display-legacy> =   
  inline-block  |  
  inline-table  |  
  inline-flex   |  
  inline-grid     
  
```

Exemples
--------

Dans l'exemple qui suit, on définit un conteneur flexible en ligne en utilisant le mot-clé historique `inline-flex`.

### CSS


```css
.container {
  display: inline-flex;
}
```

### HTML


```html
<div class="container">
  <div>Élément flexible</div>
  <div>Élément flexible</div>
</div>

Pas d'élément flexible
```

### Résultat

Avec la nouvelle syntaxe, on peut décrire le conteneur avec deux valeurs : la première pour le mode d'affichage extérieure (`inline`) et la seconde pour le mode d'affichage intérieur (`flex`).


```css
.container {
  display: inline flex;
}
```

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

### css.properties.display.inline-block

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

### css.properties.display.inline-table

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

### css.properties.display.inline-flex

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

### css.properties.display.inline-grid

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

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

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-box>`
margin-trim
===========

**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-trim`** permet à un conteneur de rogner les marges de ses éléments enfants qui sont adjacentes aux bords du conteneur.

Syntaxe
-------

`none`

Les marges ne sont pas rognées par le conteneur.

`in-flow`

Pour les boîtes du conteneur et qui sont dans le flux, les marges sur l'axe de bloc et qui sont adjacentes aux bords du conteneur sont tronquées.

Les marges fusionnées avec de telles marges sont également tronquées.

`all`

Les marges des boîtes qui sont dans le flux et des boîtes flottantes coincidant avec le bord du conteneur sont tronquées.

### Syntaxe formelle
```

margin-trim =   
  none                                                |  
  block                                               |  
  inline                                              |  
  [ block-start || inline-start || block-end || inline-end ]    
  
```

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

| Specification |
| --- |
| CSS Box Model Module Level 4 # margin-trim |

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

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

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

* `margin`
contain-intrinsic-size
======================

La propriété CSS **`contain-intrinsic-size`** contrôle la taille naturelle d'un élément spécifié par `content-visibility`.

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 10rem;

/\* Valeurs relatives \*/
/\* Type <percentage> \*/
contain-intrinsic-size: 10%;

/\* Valeurs globales \*/
contain-intrinsic-size: inherit;
contain-intrinsic-size: initial;
contain-intrinsic-size: revert;
contain-intrinsic-size: unset;
```

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

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-size |

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

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

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

* `content-visibility`, la nouvelle propriété CSS pour améliorer les performances du rendu (billet en anglais)
-webkit-tap-highlight-color
===========================

**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é **`-webkit-tap-highlight-color`** est une propriété non-standard qui permet de définir la couleur utilisée pour surligner le lien et indiquer qu'il a bien été activé/touché par l'utilisateur.

Syntaxe
-------


```css
-webkit-tap-highlight-color: red;
-webkit-tap-highlight-color: transparent; /\* pour retirer la mise en avant \*/
```

### Valeurs

`<color>`

La couleur utilisée pour surligner le lien lorsqu'il est touché.

### Syntaxe formelle

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

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Apple décrit cette propriété dans le guide Safari pour le contenu web.

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

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

Cette propriété est prise en charge par WebKit/Safari, Blink/Chrome ainsi que par certaines versions d'Internet Explorer et Microsoft Edge.
::-webkit-slider-runnable-track
===============================

**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-slider-runnable-track`** représente la piste utilisée par un élément `<input>` de type `"range"` (cf. <input type="range">).

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
----------

* `::-webkit-slider-thumb`
* Similar pseudo-elements used by other browsers:
    + `::-ms-track`
    + `::-moz-range-track`
* CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)
accent-color
============

**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é CSS **`accent-color`** définit la couleur d'accentuation (accent) des éléments. Une accentuation est présente sur des éléments HTML tels que des `<input>` de type `checkbox` ou `radio`.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
accent-color: auto;

/\* Valeurs de <color> \*/
accent-color: red;
accent-color: #5729e9;
accent-color: rgb(0, 200, 0);
accent-color: hsl(228, 4%, 24%);

/\* Valeurs globales \*/
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: unset;
```

### Valeurs

`auto`

Représente une couleur déterminée par l'agent utilisateur, qui devrait correspondre à la couleur d'accentuation de la plateforme, s'il y en a une.

`<color>`

Spécifie la couleur à utiliser en tant que couleur d'accentuation.

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 | by computed value type |

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

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

Exemples
--------

### Définir une couleur d'accentuation personnalisée

#### HTML


```html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
```


#### CSS


```css
input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}
```


#### Résultat

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # widget-accent |

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

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

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

* L'élément `<input>`
* Appliquer des couleurs aux éléments HTML grâce à CSS
* Le type de donnée `<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`
flex-flow
=========

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
La propriété CSS **`flex-flow`** est une propriété raccourcie pour les propriétés `flex-direction` et `flex-wrap`.

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

Pour plus d'informations, voir la page Utiliser les boîtes flexibles (*flexbox*) CSS.

Syntaxe
-------


```css
/\* flex-flow: <'flex-direction'> \*/
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/\* flex-flow: <'flex-wrap'> \*/
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

/\* flex-flow: <'flex-direction'> et <'flex-wrap'> \*/
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

/\* Valeurs globales \*/
flex-flow: inherit;
flex-flow: initial;
flex-flow: unset;
```

### Valeurs

Voir `flex-direction` et `flex-wrap` pour plus d'informations sur les valeurs que peuvent prendre ces deux propriétés.

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

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `flex-direction`: `row`
* `flex-wrap`: `nowrap`
 |
| Applicabilité | conteneurs flexibles |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `flex-direction`: comme spécifié
* `flex-wrap`: comme spécifié
 |
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :* `flex-direction`: discrète
* `flex-wrap`: discrète
 |

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

flex-flow =   
  <'flex-direction'>  ||  
  <'flex-wrap'>         
  
```

Exemples
--------


```css
element {
  /\* L'axe principal sera la direction de bloc \*/
  /\* et on commencera par le bas (main-start et \*/
  /\* main-end inversés. Les éléments flexibles \*/
  /\* passent sur une nouvelle ligne si besoin \*/

  flex-flow: column-reverse wrap;
}
```

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-flow-property |

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

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

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

* Guide sur les boîtes flexibles : *Les concepts de bases*
* Guide sur les boîtes flexibles : *Ordonner les éléments flexibles*
mask-composite
==============

La propriété CSS **`mask-composite`** permet d'effectuer une opération de composition entre le masque situé sur la couche de l'élément et le masque présent en dessous.


```css
/\* Valeurs avec un mot-clé\*/
mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

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

Syntaxe
-------

Un ou plusieurs mots-clés parmi ceux listés ci-après, chacun séparé par une virgule.

### Valeurs

La couche du masque de l'élément est appelée *source* et les couches inférieures sont appelées *destination*.

`add`

La source est placée sur la destination.

`subtract`

La source est placée lorsque la destination est vide à cet endroit.

`intersect`

Les endroits de la source qui chevauchent la destination prennent le pas sur la destination.

`exclude`

Les régions de la source et de la destination qui ne se chevauchent pas sont combinées.

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

|  |  |
| --- | --- |
| Valeur initiale | `add` |
| 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-composite =   
  <compositing-operator>#    
  
<compositing-operator> =   
  add        |  
  subtract   |  
  intersect  |  
  exclude      
  
```

Exemples
--------

### Composer des couches de masques de façon additive

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

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

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)
:hover
======

La pseudo-classe **`:hover`** permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.


```css
/\* Cible n'importe quel élément <a> lorsque \*/
/\* celui-ci est survolé \*/
a:hover {
  background-color: gold;
}
```


La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme `:link`, `:visited`, et `:active`, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle `:hover` après les règles `:link` et `:visited` mais avant la règle `:active` (l'ordre est `:link` — `:visited` — `:hover` — `:active` – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle `:focus` est indifférent.

La pseudo-classe `:hover` peut être appliquée à n'importe quel pseudo-élément. 
Expérimental

**Note :** sur les écrans tactiles, `:hover` est problématique voire impossible. La pseudo-classe `:hover` n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.

Syntaxe
-------

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

### CSS


```css
a:hover {
  background-color: gold;
}
```

### HTML


```html
<p>
  <a href="#">Ce lien sera écrit sur un fond doré lors du survol.</a>
</p>
```

### Résultat

**Note :** On peut utiliser la pseudo-classe `:checked` dans une galerie d'images afin d'afficher une version agrandie de l'image lorsqu'on survole la vignette.

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

| Specification |
| --- |
| HTML Standard # selector-hover |
| Selectors Level 4 # the-hover-pseudo |

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

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

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

* Bogue Chromium #370155 : Don't make :hover sticky on tap on sites that set a mobile viewport
* Bogue Chromium #306581 : Immediately show hover and active states on touch when page isn't scrollable
overflow-anchor
===============

La propriété **`overflow-anchor`** permet d'éviter, lors du défilement, que le navigateur ajuste la position afin de minimiser le déplacement du contenu.

Ce comportement est activé par défaut pour les navigateurs qui le prenne en charge. Aussi, cette propriété est uniquement nécessaire lorsque vous rencontrez des problèmes de défilement dans un document et que vous souhaitez désactiver ce comportement.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
overflow-anchor: auto;
overflow-anchor: none;

/\* Valeurs globales \*/
overflow-anchor: inherit;
overflow-anchor: initial;
overflow-anchor: unset;
```

### Valeurs

`auto`

L'élément peut devenir une ancre lorsque la position de défilement est ajustée.

`none`

L'élément ne sera pas sélectionné comme ancre.

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

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

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

overflow-anchor =   
  auto  |  
  none    
  
```

Exemples
--------

Pour désactiver l'ancrage du défilement, on pourra utiliser cette propriété :


```css
body {
  overflow-anchor: none;
}
```

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

| Specification |
| --- |
| CSS Scroll Anchoring Module Level 1 # exclusion-api |

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

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

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

* Guide sur l'ancrage du défilement (*scroll anchoring*)
math-style
==========

La propriété `math-style` détermine si les équations MathML devraient être affichées en hauteur normale ou compacte.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
math-style: normal;
math-style: compact;

/\* Valeurs globales \*/
math-sytle: inherit;
math-style: initial;
math-style: revert;
math-style: unset;
```

### Valeurs

`normal`

La valeur initiale, indiquant un rendu normal.

`compact`

La mise en page des éléments de l'équation est faite de manière à réduire la hauteur de l'ensemble.

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

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |

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

math-style =   
  normal   |  
  compact    
  
```

Exemple
-------

### CSS


```css
math {
  math-style: compact;
}
```

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

| Specification |
| --- |
| MathML Core # the-math-style-property |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Sélecteurs descendant
=====================

Le **combinateur de descendance**, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs (sous la forme `sélecteur₁ sélecteur₂`) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants.


```css
/\* Les éléments <li> qui sont des descendants \*/
/\* d'un <ul class="mon-truc"> \*/
ul.mon-truc li {
  margin: 2em;
}
```


Techniquement, le combinateur de descendance est représenté par un ou plusieurs blancs (les caractères qui sont des blancs sont : l'espace, le retour chariot, le saut de ligne, la tabulation verticale, la tabulation horizontale) entre deux sélecteurs lorsqu'il n'y a aucun autre combinateur. Les blancs utilisés pour le combinateur peuvent éventuellement contenir des commentaires CSS.

Syntaxe
-------


```css
selecteur1 selecteur2 {
  /\* déclarations CSS \*/
}
```

Exemples
--------

### CSS


```css
li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}
```

### HTML


```html
<ul>
  <li>
    <div>Élément 1</div>
    <ul>
      <li>Sous-élément A</li>
      <li>Sous-élément B</li>
    </ul>
  </li>
  <li>
    <div>Élément 2</div>
    <ul>
      <li>Sous-élément A</li>
      <li>Sous-élément B</li>
    </ul>
  </li>
</ul>
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # descendant-combinators |

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

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

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

* Sélecteur d'enfant