recursal/MDN huggingface dataset:
border-bottom-width
===================

La propriété **`border-bottom-width`** définit l'épaisseur de la bordure pour le côté bas d'un élément.

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

Syntaxe
-------


```css
/\* Une valeur de longueur \*/
/\* Type <length> \*/
border-bottom-width: 10em;
border-bottom-width: 3vmax;
border-bottom-width: 6px;

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

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

### Valeurs

`<line-width>`

Une valeur de longueur (`<length>`) positive ou un mot-clé qui indique l'épaisseur de la bordure pour le bas 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-bottom-style` vaut `none` ou `hidden` |
| Type d'animation | une longueur |

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

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

Exemples
--------

### CSS


```css
.element1 {
  border-bottom: thick solid red;
}
.element2 {
  border-bottom: medium solid orange;
}
.element3 {
  border-bottom: 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-right-width`,
    + `border-top-width`,
    + `border-width`
* Les autres propriétés CSS liées à la bordure du côté haut :
    + `border`,
    + `border-bottom`,
    + `border-bottom-style`,
    + `border-bottom-color`.
initial
=======

Le mot-clé **`initial`** applique la valeur initiale d'une propriété à un élément. La valeur initiale est fournie par le navigateur et peut être utilisée pour chaque propriété CSS. Cette propriété prendra alors la valeur initiale spécifiée pour cette la propriété.

La propriété `all` peut être utilisée avec cette valeur afin de réinitialiser l'ensemble des propriétés CSS.

**Note :** Pour les propriétés héritées, la valeur initiale peut donner des résultats étranges et mieux vaudra utiliser les mots-clés `inherit`, `unset` ou `revert`. Attention également à ne pas confondre la valeur initiale avec la valeur décrite dans la feuille de style portée par le navigateur.

Exemples
--------

### CSS


```css
/\* On écrit le texte en rouge \*/
.exemple {
  color: red;
}

/\* Et on veut que le texte mis en avant
 prenne la valeur initiale de
 color \*/
.exemple em {
  color: initial;
}
```

### HTML


```html
<p class="exemple">
  Texte rouge
  <em> ce texte est avec la couleur initiale (noire) </em>
  ce texte est rouge aussi
</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # initial |

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

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

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

* La notion de valeur initiale
* `inherit`
* `unset`
* `revert`
* `all`
border-left-width
=================

La propriété **`border-left-width`** définit l'épaisseur de la bordure pour le côté gauche d'un élément.

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

Syntaxe
-------


```css
/\* Une valeur de longueur \*/
/\* Type <length> \*/
border-left-width: 10em;
border-left-width: 3vmax;
border-left-width: 6px;

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

/\* Valeurs globales \*/
border-left-width: inherit;
border-left-width: initial;
border-left-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é gauche 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-left-style` vaut `none` ou `hidden` |
| Type d'animation | une longueur |

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

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

Exemples
--------

### CSS


```css
.element1 {
  border-left-width: thick;
  border-left-style: solid;
  border-left-color: red;
}
.element2 {
  border-left-width: medium;
  border-left-style: solid;
  border-left-color: orange;
}
.element3 {
  border-left-width: thin;
  border-left-style: solid;
  border-left-color: 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-right-width`,
    + `border-top-width`,
    + `border-bottom-width`,
    + `border-width`
* Les autres propriétés CSS liées à la bordure du côté gauche :
    + `border`,
    + `border-left`,
    + `border-left-style`,
    + `border-left-color`.
::-moz-page
===========

**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-page`, spécifique à Mozilla, est appliqué aux pages individuelles dans les impressions ou les aperçus avant impression.

Syntaxe
-------

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

Ce pseudo-élément est un pseudo-élément propriétaire lié à 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
----------

* `::-moz-page-sequence`
* `::-moz-scrolled-page-sequence`
line-height-step
================

**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é **`line-height-step`** définit le pas de hauteur des boîtes de ligne. Quand le pas est positif, les hauteurs des boîtes de ligne sont arrondies au pas le plus proche. Les valeurs négatives sont invalides.


```css
/\* Valeurs avec une longueur \*/
line-height-step: 18pt;
```

Syntaxe
-------

La propriété `line-height-step` peut être définie avec une valeur de type `<length>`.

### Valeurs

`<length>`

La longueur indiquée est utilisée pour calculer le « pas » pour la hauteur de la boîte de chaque ligne. Voir `<length>` pour plus d'informations sur ce type de valeur.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | conteneurs de type bloc |
| Héritée | oui |
| Valeur calculée | une longueur (type `length`) absolue |
| Type d'animation | by computed value type |

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

line-height-step =   
  <length [0,∞]>    
  
```

Exemples
--------

Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraphe est arrondie à l'unité supérieure. La boîte de la ligne pour l'élément `<h1>` ne tient pas sur une unité et en occupe donc deux (mais est toujours centrée sur ces deux unités).


```css
:root {
  font-size: 12pt;
  --my-grid: 18pt;
  line-height-step: var(--my-grid);
}
h1 {
  font-size: 20pt;
  margin-top: calc(2 * var(--my-grid));
}
```


Voici le résultat obtenu avec une capture d'écran :

![How the line-height-step property affects the appearance of text.](/fr/docs/Web/CSS/line-height-step/line-grid-center.png)

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

| Specification |
| --- |
| CSS Rhythmic Sizing # line-height-step |

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

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

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

* `font`
* `font-size`
* `line-height`
scroll-behavior
===============

La propriété **`scroll-behavior`** définit le comportement du défilement pour une boîte de défilement lorsque celui-ci provient de la navigation ou des API CSSOM.

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

Pour les autres défilements, tels que ceux appliqués par l'utilisateur, cette propriété n'a aucun impact. Lorsque cette propriété est définie sur l'élément racine, elle s'applique à la zone d'affichage (*viewport*). Lorsque cette propriété est indiquée sur l'élément `body`, elle *ne se propage pas* à la zone d'affichage (*viewport*).

Les agents utilisateur peuvent choisir d'ignorer cette propriété.

Syntaxe
-------


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

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


La propriété `scroll-behavior` est définie avec l'un des mots-clés suivants.

### Valeurs

`auto`

La boîte de défilement progresse de façon instantanée.

`smooth`

Le défilement est doux et utilise une fonction de minutage définie par l'agent utilisateur pendant une période définie par l'agent utilisateur. Les agents utilisateur doivent respecter les conventions de la plateforme s'il y en a.

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

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

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

scroll-behavior =   
  auto    |  
  smooth    
  
```

Exemples
--------

### Définition d'un défilement doux

#### HTML


```html
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<div class="scroll-container">
  <div class="scroll-page" id="page-1">1</div>
  <div class="scroll-page" id="page-2">2</div>
  <div class="scroll-page" id="page-3">3</div>
</div>
```


#### CSS


```css
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}

nav,
.scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}

nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}

.scroll-container {
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
```


#### Résultat

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # smooth-scrolling |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
border-end-start-radius
=======================

**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é **`border-end-start-radius`** définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés `writing-mode`, `direction` et `text-orientation`.


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
/\* Avec une valeur, le coin sera circulaire \*/
border-end-start-radius: 10px;
border-end-start-radius: 1em;

/\* Avec deux valeurs, le coin sera une ellipse \*/
border-end-start-radius: 1em 2em;

/\* Valeurs globales \*/
border-end-start-radius: inherit;
border-end-start-radius: initial;
border-end-start-radius: unset;
```


Ainsi, avec un mode d'écriture `horizontal-tb`, cette propriété logique correspondra à la propriété physique `border-top-right-radius`.

Syntaxe
-------

### Valeurs

`<length-percentage>`

Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée `<length>`. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.

### Syntaxe formelle
```

border-end-start-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-end-start-radius: 10px;
}

.texteExemple {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-end-start-radius: 10px;
}
```

### HTML


```html
<div>
  <p class="texteExemple">Exemple</p>
</div>
```

### Résultat

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

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

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

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

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

* La propriété physique correspondante : `border-top-right-radius`
* `writing-mode`, `direction`, `text-orientation`
<display-internal>
==================

Certains modes de disposition tels que `table` et `ruby` possèdent une structure interne complexe avec différents roles pour les éléments enfants et descendants. Cette page décrit ces valeurs « internes » pour `display` et qui s'appliquent dans un mode donné.

Syntaxe
-------

Sauf mention contraire, le type d'affichage intérieur et extérieur sont définis simultanément par le mot-clé indiqué.

`table-row-group`

Ces éléments se comportent comme des éléments HTML `<tbody>`.

`table-header-group`

Ces éléments se comportent comme des éléments HTML `<thead>`.

`table-footer-group`

Ces éléments se comportent comme des éléments HTML `<tfoot>`.

`table-row`

Ces éléments se comportent comme des éléments HTML `<tr>`.

`table-cell`

Ces éléments se comportent comme des éléments HTML `<td>`.

`table-column-group`

Ces éléments se comportent comme des éléments HTML `<colgroup>`.

`table-column`

Ces éléments se comportent comme des éléments HTML `<col>`.

`table-caption`

Ces éléments se comportent comme des éléments HTML `<caption>`.

`ruby-base` 
Expérimental

Ces éléments se comportent comme des éléments HTML `<rb>`.

`ruby-text` 
Expérimental

Ces éléments se comportent comme des éléments HTML `<rt>`.

`ruby-base-container` 
Expérimental

Ces éléments se comportent comme des éléments HTML `<rbc>` générés comme des boîtes anonymes.

`ruby-text-container` 
Expérimental

Ces éléments se comportent comme des éléments HTML `<rtc>`.

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

### css.properties.display.table\_values

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

### css.properties.display.ruby\_values

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-box>`
    + `<display-legacy>`
scroll-padding-block-start
==========================

La propriété **`scroll-padding-block-start`** est une propriété qui permet de définir le remplissage, au début de l'axe de bloc, entre l'élément et la zone de défilement.

Les propriétés pour le remplissage de la zone de défilement 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.

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

Syntaxe
-------


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

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

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

### Valeurs

`<length-percentage>`

Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage 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 | `auto` |
| Applicabilité | conteneurs d'ascenseurs |
| Héritée | non |
| Pourcentages | relative to the scroll container's scrollport |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

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

scroll-padding-block-start =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

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

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

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

La propriété CSS **`mask-position`** indique la position initiale pour chaque image de masque utilisée. Cette position est relative à l'origine définie via la propriété `mask-origin`.


```css
/\* Valeurs avec un mot-clé \*/
mask-position: top;
mask-position: bottom;
mask-position: left;
mask-position: right;
mask-position: center;

/\* Valeurs de <position> \*/
mask-position: 25% 75%;
mask-position: 0px 0px;
mask-position: 10% 8em;

/\* Valeurs multiples \*/
mask-position: top right;
mask-position:
  1rem 1rem,
  center;

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

Syntaxe
-------

Cette propriété s'utilise avec une ou plusieurs valeurs de position, séparées par des virgules.

### Valeurs

`<position>`

Une position CSS (type `<position>`) qui représente une position par rapport aux côtés de la boîte de l'élément. Les décalages indiqués peuvent être relatifs ou absolus. On notera que la position obtenue peut être située en dehors de la boîte de l'élément.

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

|  |  |
| --- | --- |
| Valeur initiale | `center` |
| 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 |
| Pourcentages | fait référence à la taille du masque pour la zone de pointure moins la taille du masque pour la taille de l'image (voir `background-position`) |
| Valeur calculée | Deux mots-clés décrivant l'origine et deux représentant les décalages par rapport à cette origine. Chaque valeur est fournie comme une longueur absolue ou comme un pourcentage. |
| Type d'animation | une liste répétable |

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

mask-position =   
  <position>#    
  
<position> =   
  [ left | center | right | top | bottom | <length-percentage> ]  |  
  [ left | center | right ] && [ top | center | bottom ]  |  
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |  
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### Définir la position du masque

Dans le fragment de code qui suit, vous pouvez modifier la valeur de `mask-position` avec une des valeurs autorisées (voir ci-avant) pour observer l'effet de la propriété.

Si vous utilisez un navigateur basé sur Chromium, modifiez la valeur de la propriété `-webkit-mask-position`.

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

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

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)