recursal/MDN huggingface dataset:
view-transition-name
====================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**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 **`view-transition-name`** fournit un nom d'identification (une valeur `<custom-ident>`) à l'élément ciblé pour qu'il participe à une transition de vue (en-US) différente de la transition racine, ou ne suive pas la transition de vue si c'est la valeur `none` qui est utilisée.

Syntaxe
-------


```css
/\* Exemples de valeurs <custom-ident> \*/
view-transition-name: header;
view-transition-name: figure-caption;

/\* Valeurs avec un mot-clé \*/
view-transition-name: none;
```

### Valeurs

`<custom-ident>`

Un nom distinct et unique qui indique que l'élément ciblé participera à une transition de vue (en-US) séparée de la transition de vue racine. L'identifiant doit être unique. Si deux éléments affichés ont la même valeur `view-transition-name` au même moment, la promesse exposée par `ViewTransition.ready` (en-US) échouera et la transition sera ignorée.

`none`

L'élément cible ne participera pas à la transition de vue.

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

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

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

view-transition-name =   
  none            |  
  auto            |  
  <custom-ident>    
  
```

Exemples
--------


```css
figcaption {
  view-transition-name: figure-caption;
}
```

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

| Specification |
| --- |
| CSS View Transitions Module Level 1 # view-transition-name-prop |

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

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

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

* L'API *View Transitions* (en-US)
* Des transitions simples et fluides avec l'API *View Transitions* (en anglais)
-webkit-text-fill-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-text-fill-color`** définit la couleur utilisée pour dessiner le contenu des lettres qui forment un texte. Si cette propriété n'est pas définie, c'est la valeur de la propriété `color` qui sera utilisée.


```css
/\* Valeurs de couleurs \*/
/\* Type <color> \*/
-webkit-text-fill-color: red;
-webkit-text-fill-color: #000000;
-webkit-text-fill-color: rgb(100, 200, 0);

/\* Valeurs globales \*/
-webkit-text-fill-color: inherit;
-webkit-text-fill-color: initial;
-webkit-text-fill-color: unset;
```

Syntaxe
-------

### Valeurs

`<color>`

La couleur utilisée pour colorer les lettres du texte.

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

|  |  |
| --- | --- |
| Valeur initiale | `currentcolor` |
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | couleur calculée |
| Type d'animation | une couleur |

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

-webkit-text-fill-color =   
  <color>    
  
```

Exemples
--------

### CSS


```css
p {
  margin: 0;
  font-size: 3em;
  -webkit-text-fill-color: green;
}
```

### HTML


```html
<p>Ce texte est vert.</p>
```

### Résultat

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

| Specification |
| --- |
| Compatibility Standard # the-webkit-text-fill-color |

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

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

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

* Le billet de *Surfin' Safari* qui annonce cette fonctionnalité (en anglais)
* L'article de CSS-Tricks qui décrit cette fonctionnalité (en anglais)
* `-webkit-text-stroke-color`
* `-webkit-text-stroke-width`
* `-webkit-text-stroke`
:picture-in-picture
===================

La pseudo-classe CSS **`:picture-in-picture`** cible les éléments qui sont présentement affichés en incrustation vidéo (*picture-in-picture*).

Syntaxe
-------
```

:picture-in-picture
```

Notes d'utilisation
-------------------

La pseudo-classe `:picture-in-picture` permet de configurer les feuilles de style pour ajuster automatiquement la taille, la mise en forme ou la disposition du contenu lorsqu'une vidéo passe de l'incrustation vidéo à l'affichage normal et réciproquement.

Exemples
--------

Dans cet exemple, la boîte de la vidéo aura une ombre portée rouge ou non selon qu'elle est affichée en incrustation vidéo ou non.

### CSS


```css
:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # pip-state |

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

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

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

* API *Picture-in-picture* (en-US)
* `HTMLVideoElement.requestPictureInPicture()` (en-US)
* `HTMLVideoElement.autoPictureInPicture` (en-US)
* `HTMLVideoElement.disablePictureInPicture` (en-US)
* `Document.pictureInPictureEnabled` (en-US)
* `Document.exitPictureInPicture()` (en-US)
* `Document.pictureInPictureElement` (en-US)
box-ordinal-group
=================

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

**Attention :** Cette propriété fait partie de la première version du standard pour les boîtes flexibles (*flexbox*) et a été remplacée dans une version plus récente de la spécification. Voir la page Utiliser les boîtes flexibles CSS (en-US) pour plus d'informations à propos du standard actuel.

La propriété CSS **`box-ordinal-group`** permet d'affecter les éléments fils d'une boîte flexible à un groupe numéroté.


```css
/\* Un entier indiquant le groupe \*/
/\* Type <integer> \*/
box-ordinal-group: 1;
box-ordinal-group: 5;

/\* Valeurs globales \*/
box-ordinal-group: inherit;
box-ordinal-group: initial;
box-ordinal-group: unset;
```


Les groupes ordinaux peuvent être utilisés avec la propriété `box-direction` afin de contrôler l'ordre dans lequel les éléments fils apparaissent dans la boîte. Lorsque la valeur calculée de **`box-direction`** est `normal`, une boîte affichera ses éléments en commençant par le groupe dont l'ordre est le plus faible et les disposera de gauche à droite pour les boîtes horizontales et du haut vers le bas pour les boîtes verticales. Les éléments dont l'ordre est égal seront disposés dans l'ordre dans lequel ils apparaissent. Lorsque la direction est inversée, les ordres sont gérés de la même façon, les éléments apparaîtront dans l'ordre inverse.

Syntaxe
-------

Cette propriété se définit avec un entier positif (`<integer>`).

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

|  |  |
| --- | --- |
| Valeur initiale | `1` |
| Applicabilité | les éléments fils des éléments de boîte |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

Syntaxe formelle
----------------

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

### Utilisation simple

Dans d'anciennes versions de la spécification `box-ordinal-group` était incluse pour permettre de modifier l'ordre d'affichage des enfants flexibles à l'intérieur d'un conteneur flexible.


```css
article:nth-child(1) {
  -webkit-box-ordinal-group: 2
  -moz-box-ordinal-group: 2
  box-ordinal-group: 2
}

article:nth-child(2) {
  -webkit-box-ordinal-group: 1
  -moz-box-ordinal-group: 1
  box-ordinal-group: 1
}
```


La propriété équivalente qui remplace celle-ci est `order`.

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

Cette propriété ne fait partie d'aucun standard.

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

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

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

* `box-flex`
* `box-flex-group`
* `box-pack`
::-moz-list-number
==================

**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 **`::-moz-list-number`** permet de personnaliser l'apparence des numéros des éléments de liste (`<li>`) au sein des listes numérotées (`<ol>`).

Syntaxe
-------
```

li::-moz-list-number { propriétés de style }
```

Exemples
--------

### CSS


```css
li::-moz-list-number {
  font-style: italic;
  font-weight: bold;
}
```

### HTML


```html
<ol>
  <li>Premier élément</li>
  <li>Second élément</li>
  <li>Troisième élément</li>
</ol>
```

### Résultat

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

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

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

* `:-moz-list-bullet`
* `::marker`
:past
=====

Le sélecteur de pseudo-classe CSS **`:past`** est une pseudo-classe agissant dans la dimension temporelle qui cible n'importe quel élément apparaissant entièrement avant un élément correspondant à `:current`. Ce sélecteur peut par exemple servir dans le cas d'une vidéo ayant des sous-titres affichés à l'aide du format WebVTT.


```css
:past(p, span) {
  display: none;
}
```

Syntaxe
-------

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

### CSS


```css
:past(p, span) {
  display: none;
}
```

### HTML


```html
<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track
 label="Français"
 kind="subtitles"
 srclang="fr"
 src="subtitles.vtt"
 default />
</video>
```

### WebVTT
```

FICHIER WEBVTT

1
00:00:03.500 --> 00:00:05.000
Voici le premier sous-titre

2
00:00:06.000 --> 00:00:09.000
Voici le second sous-titre

3
00:00:11.000 --> 00:00:19.000
Voici le troisième sous-titre
```

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

| Specification |
| --- |
| Selectors Level 4 # the-past-pseudo |

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

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

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

* Web Video Text Tracks Format (WebVTT)
* `:current`
* `:future`
padding-right
=============

La propriété **`padding-right`** d'un élément correspond à l'espace nécessaire à la droite d'un élément. La zone de remplissage correspond à l'espace entre le contenu et la bordure. `padding-right` ne peut pas recevoir de valeurs négatives.

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

**Note :** La propriété raccourcie `padding` permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris `padding-right` donc).

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
padding-right: 0.5em;
padding-right: 0;
padding-right: 2cm;

/\* Valeurs de proportions \*/
/\* Type <percentage> \*/
padding-right: 10%;

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

### Valeurs

`<length>`

Cette valeur définit une largeur positive. Voir `<length>` pour plus de détails.

`<percentage>`

Un pourcentage en rapport avec la largeur du bloc englobant. Voir `<percentage>` pour plus de détails.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | tous les éléments exceptés `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` et `table-column`. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | le pourcentage tel que spécifié ou une longueur absolue |
| Type d'animation | une longueur |

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

padding-right =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### HTML


```html
<p class="padd">
  Elle n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond
  et qu’elle fut forcée de se baisser pour ne pas se casser le cou.
</p>
```

### CSS


```css
.padd {
  padding-right: 20%;
  border: solid 1px;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

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

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

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

* Le modèle de boîtes CSS
* La propriété raccourcie `padding` qui permet de paramétrer `padding-right`, `padding-top`, `padding-bottom` et `padding-left`.
:-moz-submit-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 CSS **`:-moz-submit-invalid`** représente tout bouton `<input>` de type `submit` présent sur un formulaire dont le contenu n'est pas valide compte-tenu de ses contraintes de validation (en-US).

Par défaut, aucun style n'est appliqué. Vous pouvez utiliser cette pseudo-classe afin de personnaliser l'apparence du bouton `submit` lorsqu'il y a des champs de formulaire invalides.

Syntaxe
-------


```css
:-moz-submit-invalid {
}
```

Spé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`
border-right-width
==================

La propriété **`border-right-width`** définit l'épaisseur de la bordure pour le côté droit d'une boîte.

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

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;

/\* Valeurs de longueurs \*/
/\* Type <length> \*/
border-right-width: 10em;
border-right-width: 3vmax;
border-right-width: 6px;

/\* Valeurs globales \*/
border-right-width: inherit;
border-right-width: initial;
border-right-width: unset;
```

### Valeurs

`<br-width>`

Une valeur de longueur (`<length>`) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le côté droit de la boîte. Si la valeur est un mot-clé, ce doit être l'une des valeurs suivantes :

* `thin` (fin)
* `medium` (intermédiaire)
* `thick` (épais)

La spécification ne précise pas de façon exacte l'épaisseur correspondant à chacun de ces mots-clés (c'est donc à chaque implémentation de choisir). La spécification requiert toutefois que l'inégalité suivante soit respectée `thin ≤ medium ≤ thick` et que ces valeurs soient constantes pour un même document.

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

|  |  |
| --- | --- |
| Valeur initiale | `medium` |
| Applicabilité | tous les éléments. S'applique aussi à `::first-letter`. |
| Héritée | non |
| Valeur calculée | la longueur absolue ou `0` si `border-right-style` vaut `none` ou `hidden` |
| Type d'animation | une longueur |

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

border-right-width =   
  <line-width>    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

Exemples
--------

### CSS


```css
.element1 {
  border-right: thick solid red;
}
.element2 {
  border-right: medium solid orange;
}
.element3 {
  border-right: thin solid green;
}
```

### HTML


```html
<p class="element1">Une bordure épaisse rouge.</p>

<p class="element2">Une bordure moyenne orange.</p>

<p class="element3">Et une bordure fine verte.</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-width |

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

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

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

* Les autres propriétés liées à la largeur de la bordure :
    + `border-left-width`,
    + `border-top-width`,
    + `border-bottom-width`,
    + `border-width`
* Les autres propriétés CSS liées à la bordure du côté droit :
    + `border`,
    + `border-right`,
    + `border-right-style`,
    + `border-right-color`.
scrollbar-width
===============

**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é **`scrollbar-width`** permet à un auteur de définir l'épaisseur maximale à utiliser pour la barre de défilement si celle-ci est affichée.

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

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

/\* Valeurs globales \*/
scrollbar-width: inherit;
scrollbar-width: initial;
scrollbar-width: unset;
```

### Valeurs

`<scrollbar-width>`

Une valeur qui définit l'épaisseur de la barre de défilement. Cette valeur est une longueur (cf. `<length>`) positive ou bien un mot-clé. Si c'est un mot-clé, ce dernier doit avoir l'une des valeurs suivantes :

|  |  |
| --- | --- |
| `auto` | 
 La largeur par défaut, fournie par le système, pour la barre de
 défilement.
  |
| `thin` | 
 Une variante plus fine de la barre de défilement plus fine dans le cas
 des plateformes qui fournissent une telle option ou une barre de
 défilement avec une largeur moindre que la largeur par défaut du
 système.
  |
| `none` | 
 Aucune barre de défilement n'est affichée mais on peut toujours faire
 défiler l'élément.
  |

**Note :** Toute valeur de `scrollbar-width` doit être appliquée sur l'élément racine de la zone d'affichage (*viewport*) par les agents utilisateur.

**Note :** L'utilisation des longueurs pour `scrollbar-width` est une fonctionnalité qui sera potentiellement abandonnée de la spécification (voir l'*issue* 1958).

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | boîtes défilantes |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

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

scrollbar-width =   
  auto  |  
  thin  |  
  none    
  
```

Exemples
--------

### CSS


```css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}
```

### HTML


```html
<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>
```

### Résultat

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

| Specification |
| --- |
| CSS Scrollbars Styling Module Level 1 # scrollbar-width |

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

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

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

* `-ms-overflow-style`
* `::-webkit-scrollbar`
Valeur calculée
===============

La **valeur calculée** d'une propriété CSS est calculée à partir de la valeur définie :

1. En gérant les valeurs spéciales `inherit`, `initial`, `unset` et `revert`.
2. En effectuant les calculs décrits dans la section « Valeur calculée » de chaque résumé de propriété.

Les calculs utilisés pour obtenir la **valeur calculée** correspondent généralement à la conversion des valeurs relatives (exprimées dans des unités relatives comme `em` ou en pourcentages) en valeur absolue. Ainsi, si un élément possède les valeurs spécifiées suivantes `font-size: 16px` et `padding-top: 2em`. La valeur calculée de la propriété `padding-top` sera `32px` (on double la taille de la police).

Cependant, pour certaines propriétés (celles où les pourcentages sont relatifs à quelque chose lié à la disposition comme `width`, `margin-right`, `text-indent`, et `top`), les valeurs spécifiées exprimées en pourcentages deviennent des valeurs calculées exprimées en pourcentages. De plus, les nombres sans unité utilisés pour la propriété `line-height` sont également utilisés comme valeurs calculées. Ces valeurs relatives sont résolues en valeurs absolues lorsqu'on détermine les valeurs utilisées.

Le principal intérêt de la valeur calculée (en dehors de la gestion du passage de la valeur spécifiée à la valeur utilisée) est l'héritage, notamment grâce au mot-clé `inherit`.

**Note :** La méthode du DOM `getComputedStyle()` renvoie la valeur résolue qui correspond à la valeur calculée ou à la valeur utilisée selon la propriété.

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

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

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

* La référence CSS
* La notion de valeur initiale
* La notion de valeur définie
* La notion de valeur calculée
* La notion de valeur utilisée
* La notion de valeur résolue
* La notion de valeur réelle
* `inherit`
* `initial`
* `unset`
* `revert`
* `window.getComputedStyle`
CSS Text Decoration
===================

***CSS Text Decoration*** (ou module des décorations textuelles CSS) est un module CSS qui définit les caractéristiques relatives à la décoration du texte, comme le soulignage, les ombres et les marques d'emphase.

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

### Propriétés

* `letter-spacing`
* `text-align`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-style`
* `text-emphasis`
* `text-emphasis-color`
* `text-emphasis-position`
* `text-emphasis-style`
* `text-indent`
* `text-rendering`
* `text-shadow`
* `text-transform`
* `white-space`
* `word-spacing`
Spécifications
--------------

| Specification |
| --- |
| CSS Text Decoration Module Level 3  |