recursal/MDN huggingface dataset:
border-block-end-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é **`border-block-end-width`** définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à `border-top-width`, `border-right-width`, `border-bottom-width` ou a `border-left-width` selon les valeurs des propriétés pour `writing-mode`, `direction` et `text-orientation`.

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

Cette propriété logique est à rapprocher des autres propriétés logiques `border-block-start-width`, `border-inline-end-width` et `border-inline-end-width` qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.

Syntaxe
-------


```css
/\* Valeur de longueur \*/
/\* Type <length> \*/
border-block-end-width: 5px;
border-block-end-width: thick;
```

### Valeurs

`<'border-width'>`

La largeur utilisée pour la bordure, voir `border-width`.

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

|  |  |
| --- | --- |
| Valeur initiale | `medium` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Pourcentages | largeur logique du bloc englobant |
| Valeur calculée | une longueur absolue ; `0` si le style de la bordure vaut `none` ou `hidden` |
| Type d'animation | by computed value type |

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

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

Exemples
--------

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-end-width: 5px;
}
```

### HTML


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

### Résultat

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

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

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 :
    + `border-top-width`
    + `border-right-width`
    + `border-bottom-width`
    + `border-left-width`
* `writing-mode`, `direction`, `text-orientation`
<number>
========

Le type de donnée CSS **`<number>`** permet de représenter des nombres entiers ou décimaux. C'est donc un type qui englobe le type de données `<integer>` (permettant de représenter des entiers).

Syntaxe
-------

Pour représenter des nombres décimaux, on utilisera le point (.) comme séparateur. Comme pour `<integer>`, il n'y a aucune unité associée aux valeurs de type `<number>` (ce n'est donc pas une dimension).

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

Les valeurs de type `<number>` peuvent être interpolées afin d'être utilisées dans les animations. Les valeurs de ce type seront interpolées comme des nombres réels à virgule flottante. La vitesse de l'interpolation sera définie grâce à la fonction de temporisation associée à l'animation.

Exemples
--------

Voici des exemples de valeurs `<number>` valides :


```css
12          Un entier (<integer>) est également un <number>
4.01        Un nombre (décimal) positif
-456.8      Un nombre décimal négatif
0.0         Zéro
+0.0        Zéro, avec un +
-0.0        Zero, avec un -
.60         Les chiffres avant le point sont facultatifs
10e3        On peut utiliser la notation scientifique
-3.4e-2     Un cas d'utilisation de notation scientifique plus complexe
```


Voici des exemples de valeurs invalides :


```css
12.         Le point doit être suivi par des chiffres
+-12.2      Seul un +/- est autorisé.
12.1.1      Seul un point est autorisé.
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # numbers |

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

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

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

* `<integer>`
:-moz-suppressed
================

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

`:-moz-suppressed` est une pseudo-classe spécifique à Mozilla qui permet de sélectionner les images qui n'ont pas été chargées car le chargement des images depuis ce site a été bloqué.

Ce sélecteur est principalement destiné aux développeurs de thèmes.

Syntaxe
-------


```css
:-moz-suppressed {
}
```

Exemple
-------


```css
:-moz-suppressed {
  background: yellow;
  padding: 8px;
}
```

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

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

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

* `:-moz-broken`
* `:-moz-loading`
* `:-moz-user-disabled`
scroll-margin-inline-end
========================

La propriété **`scroll-margin-inline-end`** définit la marge de défilement de l'élément sur la fin de l'axe en ligne. 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-inline-end: 10px;
scroll-margin-inline-end: 1em;

/\* Valeurs globales \*/
scroll-margin-inline-end: inherit;
scroll-margin-inline-end: initial;
scroll-margin-inline-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-inline-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.
@charset
========

La règle @ **`@charset`** définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des instructions imbriquées et ne peut donc pas être utilisée à l'intérieur des groupes conditionnels. Si plusieurs règles `@charset` sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut `style` d'un élément HTML ou avec l'élément `<style>` car c'est l'encodage du document HTML qui est alors pris en compte.


```css
@charset "utf-8";
```


Cette règle @ s'avère notamment utile lorsqu'on utilise des caractères non-ASCII pour certaines propriétés CSS telles que `content`.

Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une feuille de style. Il utilisera ces méthodes dans l'ordre qui suit et s'arrêtera dès qu'un résultat sera obtenu (autrement dit, les règles qui suivent sont triées par priorité décroissante) :

1. La valeur du caractère indiquant l'ordre des octets Unicode qui est placé au début du fichier (le BOM)
2. La valeur fournie par l'attribut `charset` de l'en-tête HTTP `Content-Type` ou l'information équivalente dans le protocole utilisé pour servir la feuille de style.
3. La règle @ CSS `@charset`.
4. L'encodage défini dans le document appelant la ressource (l'attribut `charset` de l'élément `<link>`). Cette méthode est désormais obsolète et ne doit plus être utilisée.
5. Dans tous les autres cas, on considère que le document est encodé en UTF-8
Syntaxe
-------


```css
@charset <charset>;
```


où

`charset`

Est une chaîne de caractères (une valeur CSS de type `<string>`) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans le registre IANA et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec *préféré* (*preferred*) doit être utilisé.

### Syntaxe formelle

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

### Exemples valides


```css
@charset "UTF-8"; /\* Valide, la feuille de style est encodée en Unicode UTF-8 \*/
@charset "iso-8859-15"; /\* Valide, la feuille de style est encodée en Latin-9 (langues d'Europe occidentale avec le symbole €) \*/
```

### Exemples invalides


```css
 @charset "UTF-8"; /\* Invalide, il y a un caractère (un espace) avant la règle @ \*/
@charset UTF-8; /\* Invalide, sans ' ou ", le jeu de caractères n'est pas une chaîne CSS (<string>) \*/
```

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # charset① |

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

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

La propriété **`min-height`** est utilisée afin de définir la hauteur minimale d'un élément. Elle empêche ainsi que la valeur utilisée de la propriété `height` devienne inférieure à `min-height`.

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

La valeur de la propriété `min-height` surcharge celles de `max-height` et `height` lorsque `min-height` est supérieure.

Syntaxe
-------


```css
/\* Valeur de longueur \*/
/\* Type <length> \*/
min-height: 3.5em;

/\* Valeur de proportion \*/
/\* Type <percentage> \*/
min-height: 10%;

/\* Valeurs avec un mot-clé \*/
min-height: max-content;
min-height: min-content;
min-height: fit-content(20em);

/\* Valeurs globales \*/
min-height: inherit;
min-height: initial;
min-height: revert;
min-height: unset;
```

### Valeurs

`<length>`

La hauteur minimale exprimée de façon absolue.

`<percentage>`

La hauteur minimale exprimée de façon relative à la hauteur du bloc englobant grâce à une valeur de type `<percentage>`.

`auto`

Le navigateur calcule et définit la hauteur minimale de l'élément spécifié.

`max-content`

La hauteur intrinsèque préférée.

`min-content`

La hauteur intrinsèque minimale préférée.

`fit-content` (`<length-percentage>`)

Utilise la formule `fit-content()`, remplaçant l'espace disponible par l'argument passé. Par exemple : `min(max-content, max(min-content, argument))`.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | tous les éléments sauf les éléments en ligne non remplacés, les colonnes de tableaux et les groupes de colonnes |
| Héritée | non |
| Pourcentages | Le pourcentage est exprimé par rapport à la hauteur de la boîte générée par le bloc contenant. Si la hauteur du bloc contenant n'est pas explicitement spécifiée (c'est-à-dire qu'elle dépend de la hauteur du contenu), et si cet élément n'est pas absolument positionné , la valeur du pourcentage est traitée comme si elle valait `0`. |
| Valeur calculée | le pourcentage tel que spécifié ou une longueur absolue |
| Type d'animation | une longueur, pourcentage ou calc() ; |

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

min-height =   
  auto                                      |  
  <length-percentage [0,∞]>                 |  
  min-content                               |  
  max-content                               |  
  fit-content( <length-percentage [0,∞]> )    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### Définition de min-height


```css
table {
  min-height: 75%;
}

form {
  min-height: 0;
}
```

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

| Specification |
| --- |
| CSS Box Sizing Module Level 3 # width-height-keywords |
| 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
----------

* Le modèle de boîtes (en-US), `box-sizing`
* `height`, `max-height`
text-decoration-color
=====================

La propriété **`text-decoration-color`** définit la couleur utilisée pour dessiner les lignes décorant le texte (quel que soit le style définit `text-decoration-line`).

La propriété raccourcie `text-decoration` permet de paramétrer cette propriété et d'autres propriétés associées aux décorations.

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

**Note :** Lorsqu'on définit plusieurs décorations à la fois, il peut être plus pratique d'utiliser la propriété raccourcie `text-decoration`.

Il est préférable d'utiliser cette propriété pour colorer ces décorations plutôt que d'utiliser d'autres éléments HTML.

**Note :** CSS ne fournit pas de mécanisme spécifique pour définir une couleur par type de ligne. On peut toutefois y parvenir en imbriquant des éléments mis en forme différemment.

Syntaxe
-------


```css
/\* Couleurs \*/
/\* Valeurs de type <color> \*/
text-decoration-color: currentColor;
text-decoration-color: red;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;

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

### Valeurs

`<color>`

La propriété `color` accepte différents mots-clés et valeurs numériques. Pour plus de détails, voir `<color>`.

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

|  |  |
| --- | --- |
| Valeur initiale | `currentcolor` |
| Applicabilité | tous les éléments. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | non |
| Valeur calculée | couleur calculée |
| Type d'animation | une couleur |

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

text-decoration-color =   
  <color>    
  
```

Exemples
--------

### HTML


```html
<p class="exemple">Du texte avec un effet au survol</p>
```

### CSS


```css
.exemple {
  text-decoration: underline;
  text-decoration-color: red;
}

.exemple:hover {
  color: blue;
  text-decoration: line-through;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-color-property |

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

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

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

* La propriété raccourcie `text-decoration` qui permet, entre autres, de paramétrer `text-decoration-color`.
* Le type de données `<color>`
* D'autres propriétés relatives aux couleurs : `background-color`, `border-color`, `outline-color`, `text-decoration-color`, `text-emphasis-color`, `text-shadow`, `caret-color` et `column-rule-color`
* Appliquer des couleurs aux éléments HTML
inherit
=======

Le mot-clé **`inherit`** est une valeur qui peut être utilisée pour qu'une propriété prenne la valeur calculée de la propriété pour l'élément parent. Cette valeur peut être utilisée sur n'importe quelle propriété CSS, y compris sur la propriété raccourcie `all`.

Pour les propriétés héritées, cela accentue le comportement par défaut et ce mot-clé n'est nécessaire que pour surcharger une autre règle.

Pour les propriétés non-héritées, cela permettra d'obtenir le comportement indiqué. Ce comportement a peu d'intérêt dans ces cas et mieux vaudra utiliser `initial` ou `unset`.

L'héritage provient toujours de l'élément parent par rapport à l'arbre du document, même si cet élément n'est pas le bloc englobant.

Exemples
--------

### CSS


```css
p {
  color: green;
}

.exemple {
  color: inherit;
}
```

### HTML


```html
<p>
  Alice remarqua, avec quelque surprise, qu’en tombant sur le plancher les
  cailloux se changeaient en petits gâteaux, et une brillante idée lui traversa
  l’esprit.
</p>
<p class="exemple">
  Elle avala un des gâteaux, et s’aperçut avec joie qu’elle diminuait rapidement
</p>
```

### Résultat

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

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

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

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

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

* L'héritage
* La propriété `all`
* Les propriétés globales `initial`, `unset` et `revert`.
* La propriété `all` permet de réinitialiser l'ensemble des propriétés avec leurs valeurs initiales, héritées, annulées ou indéfinies.
table-layout
============

La propriété **`table-layout`** définit l'algorithme utilisé pour disposer les cellules, lignes et colonnes d'un tableau.

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

Syntaxe
-------


```css
/\* Valeur utilisant un mot-clé \*/
table-layout: auto;
table-layout: fixed;

/\* Valeurs globales \*/
table-layout: inherit;
table-layout: initial;
table-layout: unset;
```

### Valeurs

`auto`

Un algorithme automatique, utilisé communément par la plupart des navigateurs, est utilisé pour gérer la disposition du tableau. La largeur du tableau et de ses cellules dépendent de leur contenu.

`fixed`

La largeur du tableau et celles des colonnes sont définies grâce aux largeurs des éléments `table` et `col` ou grâce à la largeur (explicite) de la première ligne de cellules. Les cellules des lignes suivantes n'affectent pas la largeur des colonnes.

Avec cette méthode « fixée », tout le tableau peut être rendu dès que la première ligne a été téléchargée et analysée. Cela permet d'accélérer le temps de rendu par rapport à la valeur `auto`. En revanche, le contenu des lignes (en dehors de la première), peut ne pas rentrer dans les colonnes avec la largeur calculée. Les cellules dont le contenu est trop large utiliseront la propriété `overflow` pour déterminer comment gérer le dépassement.

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

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

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

table-layout =   
  auto   |  
  fixed    
  
```

Exemples
--------

Cet exemple utilise `table-layout: fixed` et une largeur donnée (avec la propriété `width`) afin que le tableau ne s'agrandisse pas avec son contenu. Ainsi, on peut voir l'effet de la propriété `text-overflow` et l'application d'une ellipse pour les mots trop longs pour le tableau.

### HTML


```html
<table class="exemple">
  <tr>
    <td width="7em">Jean</td>
    <td width="7em">Biche</td>
  </tr>
  <tr>
    <td>Jean-Roger-Michel</td>
    <td>du Domaine de la Biche</td>
  </tr>
</table>
```

### CSS


```css
.exemple {
  table-layout: fixed;
  width: 120px;
  border: 1px solid red;
}

tr,
td {
  border: solid;
}

td {
  border: 1px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
```

### Résultat

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # width-layout |

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

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

La propriété CSS **`mask-origin`** permet de définir l'origine à partir de laquelle placer le masque.


```css
/\* Valeurs avec un mot-clé \*/
mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

/\* Valeurs multiples \*/
mask-origin: padding-box, content-box;
mask-origin: view-box, fill-box, border-box;

/\* Valeurs non-standards \*/
-webkit-mask-origin: content;
-webkit-mask-origin: padding;
-webkit-mask-origin: border;

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


Pour les éléments qui sont affichés avec une unique boîte, cette propriété définit la zone de positionnement du masque. Autrement dit, cette propriété indique l'origine de la position pour l'image définie via `mask-image`. Pour les éléments qui sont affichés comme plusieurs boîtes (les boîtes en lignes ou plusieurs lignes ou plusieurs boîtes sur plusieurs pages), elle définit les boîtes sur lesquelles `box-decoration-break` agira pour déterminer la zone de positionnement du masque.

Syntaxe
-------

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

### Valeurs

`content-box`

La position de la zone est relative à la boîte de contenu.

`padding-box`

La position de la zone est relative à la boîte de remplissage (*padding*). Pour les boîtes simples, `0 0` désigne le coin en haut à gauche de la bordure de cette boîte et `100% 100%` le coin en bas à droite.

`border-box`

La position de la zone est relative à la boîte de bordure.

`margin-box`

La position de la zone est relative à la boîte de marge.

`fill-box`

La position de la zone est relative à la boîte liée à l'objet.

`stroke-box`

La position de la zone est relative à la boîte de contour de l'objet.

`view-box`

La zone d'affichage (*viewport*) SVG la plus proche est utilisée comme boîte de référence. Si l'attribut `viewBox` est défini pour l'élément qui crée la zone d'affichage, la boîte de référence est positionnée à l'origine du système de coordonnées établi par `viewBox`. Les dimensions de la boîte de référence sont les valeurs de largeur et de hauteur de `viewBox`.

`content` 
Non-standard

Synonyme de `content-box`.

`padding` 
Non-standard

Synonyme de `padding-box`.

`border` 
Non-standard

Synonyme de `border-box`.

### Syntaxe formelle
```

mask-origin =   
  <coord-box>#    
  
<coord-box> =   
  <paint-box>  |  
  view-box       
  
<paint-box> =   
  <visual-box>  |  
  fill-box      |  
  stroke-box      
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
```

Exemples
--------

### Définir l'origine du masque avec `border-box`

Vous pouvez également essayer d'autres valeurs en éditant le code CSS qui suit.

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

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

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)