recursal/MDN huggingface dataset:
border-inline-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-inline-end-width`** définit la largeur de la bordure pour le côté 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-block-end-width` et `border-inline-start-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-inline-end-width: 5px;
border-inline-end-width: thick;
```

### Valeurs

`<'border-width'>`

La largeur de 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-inline-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-inline-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`
text-decoration-line
====================

La propriété **`text-decoration-line`** définit la façon dont les décorations linéaires sont ajoutées à un élément et notamment leur position (sous le texte, au-dessus ou en travers de celui-ci).

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

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

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;

/\* Valeurs avec plusieurs mots-clés \*/
text-decoration-line: underline overline; /\* On a deux décorations pour la ligne \*/
text-decoration-line: overline underline line-through; /\* On a plusieurs décorations \*/

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

### Valeurs

Cette propriété peut avoir une ou plusieurs valeurs séparées par des espaces. Si aucune valeur n'est fournie, il n'y a pas de décoration ajoutée :

`none`

Aucune ligne ne décore le texte.

`underline`

Chaque ligne de texte est soulignée.

`overline`

Une ligne est dessinée au-dessus de chaque ligne de texte.

`line-through`

Une ligne est dessinée au milieu de chaque ligne de texte.

`blink` 
Obsolète

Le texte clignote. Les agents utilisateurs conformes peuvent ne pas suivre cette directive. Cette valeur est dépréciée et il est conseillé d'utiliser les animations CSS pour obtenir un effet similaire.

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

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | tous les éléments. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

text-decoration-line =   
  none                                                |  
  [ underline || overline || line-through || blink ]    
  
```

Exemples
--------

### HTML


```html
<p>Voici un texte souligné avec une vaguelette rouge.</p>
```

### CSS


```css
p {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Text Decoration Module Level 3 # text-decoration-line-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-line`.
margin-block-start
==================

**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-start`** définit la marge logique appliquée au début des éléments en bloc, selon le mode d'écriture, la directionalité 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-inline-start`, `margin-block-end` et de `margin-inline-end` qui définissent les autres marges appliquées à l'élément.

Syntaxe
-------


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

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

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

### Valeurs

La propriété `margin-block-start` 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-start =   
  <'margin-top'>    
  
```

Exemples
--------

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  margin-block-start: 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`
::-moz-focus-inner
==================

**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-focus-inner`** est une extension spécifique à Mozilla qui représente le contour interne pour le focus sur les éléments `<button>`, `<input type="button">`, `<input type="submit">`, `<input type="reset">`, et `<input type="color">`.

**Note :** Utiliser `::-moz-focus-inner` sur un autre élément que les types de boutons pris en charge n'aura aucun effet.

Syntaxe
-------
```

::-moz-focus-inner
```

Exemple
-------

### HTML


```html
<input type="submit" value="Input" /> <button type="submit">Bouton</button>
```

### CSS


```css
button::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
  padding-block-start: 0px;
  padding-inline-end: 2px;
  padding-block-end: 0px;
  padding-inline-start: 2px;
  border: 2px dotted red;
}
```

### Résultat

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

Il s'agit d'un pseudo-élément spécifique, qui n'est spécifié dans aucun standard.

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

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

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

* Les extensions CSS spécifiques à Mozilla
* `-moz-user-focus`
* Les sélecteurs CSS associés
    + `:-moz-focusring`
    + `:focus`
    + `:focus-visible`
    + `:focus-within`
CSS Pages
=========

**Les média paginés CSS** (ou *CSS Paged Media* en anglais) est un module CSS qui définit la façon dont sont gérés les sauts de page ainsi que les veuves et orphelines.

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

### Propriétés

* `page-break-after`
* `page-break-before`
* `page-break-inside`
### Règles @

* `@page`
### Pseudo-classes

* `:blank`
* `:first`
* `:left`
* `:right`
Spécifications
--------------

| Specification |
| --- |
| CSS Paged Media Module Level 3  |
| CSS Fragmentation Module Level 3  |
background-blend-mode
=====================

La propriété CSS **`background-blend-mode`** définit la façon dont les images d'arrière-plan doivent être fusionnées entre elles et avec la couleur d'arrière-plan.

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

Les modes de fusions (*blending modes*) doivent être définis dans le même ordre que les images sont définies avec `background-image`. Si la liste des modes de fusion et la liste des images d'arrière-plan ne sont pas de la même longueur, la première liste sera répétée ou tronquée pour que les longueurs soient égales.

Syntaxe
-------


```css
/\* Une valeur qui s'applique à toutes les images \*/
background-blend-mode: normal;

/\* Deux valeurs, chacune pour une image \*/
background-blend-mode: darken, luminosity;

/\* Valeurs globales \*/
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: revert;
background-blend-mode: unset;
```

### Valeurs

`<blend-mode>`

Une valeur décrivant un mode de fusion (type `<blend-mode>`) qui doit être appliqué. On peut avoir plusieurs valeurs et dans ce cas, elles doivent être séparées par des virgules.

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

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| Applicabilité | Tous les éléments. En SVG, cela s'applique aux éléments de conteneurs, aux éléments graphiques et aux éléments faisant référence à des éléments graphiques.. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |

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

background-blend-mode =   
  <mix-blend-mode>#    
  
```

Exemples
--------

### CSS


```css
#div {
  width: 300px;
  height: 300px;
  background: url("br.png"), url("tr.png");
  background-blend-mode: screen;
}
```

### HTML


```html
<div id="div"></div>

<select id="select">
  <option>normal</option>
  <option>multiply</option>
  <option selected>screen</option>
  <option>overlay</option>
  <option>darken</option>
  <option>lighten</option>
  <option>color-dodge</option>
  <option>color-burn</option>
  <option>hard-light</option>
  <option>soft-light</option>
  <option>difference</option>
  <option>exclusion</option>
  <option>hue</option>
  <option>saturation</option>
  <option>color</option>
  <option>luminosity</option>
</select>
```

### JavaScript


```js
document.getElementById("select").onchange = function (event) {
  document.getElementById("div").style.backgroundBlendMode =
    document.getElementById("select").selectedOptions[0].innerHTML;
};
console.log(document.getElementById("div"));
```

### Résultat

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

| Specification |
| --- |
| Compositing and Blending Level 2 # background-blend-mode |

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

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

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

* `<blend-mode>`
* `mix-blend-mode`
counter-increment
=================

La propriété **`counter-increment`** est utilisée afin d'augmenter la valeur d'un compteur CSS d'une valeur donnée.

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

**Note :** La valeur du compteur peut être réinitialisée avec une valeur arbitraire grâce à la propriété `counter-reset`.

Syntaxe
-------


```css
/\* On incrémente 'mon-compteur' de 1 \*/
counter-increment: mon-compteur;

/\* On réduit 'mon-compteur' de 1 \*/
counter-increment: mon-compteur -1;

/\* On incrémente 'compteur1' de 1 et on décrémente 'compteur2' de 4 \*/
counter-increment: compteur1 compteur2 -4;

/\* On n'incrémente/décremente rien \*/
/\* cela permet d'effacer les règles moins spécifiques \*/
counter-increment: none;

/\* Valeurs globales \*/
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;
```


La propriété `counter-increment` peut être définie de deux façons :

* Avec le mot-clé `none`
* Avec un identifiant (`<custom-ident>`) qui identifie le compteur et qui est éventuellement suivi par un entier (`<integer>`). On peut définir autant de compteurs qu'on veut, chacun étant séparé par un espace.
### Valeurs

`<custom-ident>`

Le nom du compteur qu'on souhaite incrémenter.L'identifiant peut se composer d'une combinaison de lettres entre `a` et `z` (sensible à la casse), de nombres compris entre `0` et `9`, de tirets bas (`_` ou *underscores*) et/ou de tirets. Le premier caractère qui n'est pas un tiret doit être une lettre. Il est également interdit d'utiliser deux tirets au début d'un identifiant. Enfin, un identifiant ne doit pas être `none`, `unset`, `initial` ou `inherit` quelque soit la combinaison de la casse.

`<integer>`

La valeur qu'on souhaite ajouter au compteur. La valeur par défaut est 1 (le compteur est alors incrémenté de 1).

`none`

Aucun compteur n'est incrémenté. Cette valeur est utilisée comme valeur par défaut et permet également d'annuler des incréments décrits par des règles moins spécifiques.

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

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

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

counter-increment =   
  [ <counter-name> <integer>? ]+  |  
  none                              
  
```

Exemples
--------

### CSS


```css
ol {
  list-style-type: none;
  counter-reset: compteListe;
}

li::before {
  counter-increment: compteListe 2;
  content: counter(compteListe) " ";
}
```

### HTML


```html
<ol>
  <li>Et de deux</li>
  <li>Et de quatre</li>
  <li>Et de six</li>
</ol>
```

### Résultat

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # increment-set |

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

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

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

* Utiliser les compteurs CSS
* `counter-reset`
* `counter-set`
* `@counter-style`
* Les fonctions CSS `counter()` et `counters()`
<ratio>
=======

Le type de donnée CSS **`<ratio>`** permet de décrire les proportions dans les *media queries* (N.D.T. pour « requête média » qui est moins usité). entre deux valeurs sans unité.

Syntaxe
-------

Une valeur de ce type se compose d'un entier strictement positif (type `<integer>`, suivi d'une barre oblique ('/', Unicode `U+002F SOLIDUS`) puis d'un second entier strictement positif (type `<integer>`). Il est possible d'avoir des espaces avant et après la barre oblique.

Exemples
--------

### Utiliser dans une *media query*


```css
@media screen and (min-aspect-ratio: 16/9) { … }
```

### Ratios fréquemment utilisés

|  | Ratio | Utilisation |
| --- | --- | --- |
|  | `4/3` | Format traditionnel utilisé par les télévisions au XXe siècle. |
|  | `16/9` | Format « moderne » des télévisions. |
|  | `185/100` = `91/50` *(les numérateurs et dénominateurs décimaux ne sont pas autorisés)* | Le format le plus utilisé pour la projection de films depuis les années 1960. |
|  | `239/100` *(les numérateurs et dénominateurs décimaux ne sont pas autorisés)* | Le format « large » utilisé pour projeter certains films (on parle de format anamorphique). |

Exemple appliqué
----------------

### CSS


```css
@media screen and (min-aspect-ratio: 1/1) {
  .exemple {
    background-color: palegreen;
  }
}
```

### HTML


```html
<p class="exemple">
  Essayez de m'étirer en longueur ou de me réduire en largeur
</p>
```

### Résultat

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

| Specification |
| --- |
| Media Queries Level 4 # values |

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

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

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

* Les *media queries* CSS
* La caractéristique média aspect-ratio
-webkit-touch-callout
=====================

**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-touch-callout`** permet de contrôler l'affichage de la légende (*callout*) affichée par défaut lorsque le toucher est maintenu sur un élément.

Lorsqu'un élément est touché et que la pression est maintenue sur iOS, Safari affiche une bulle d'informations à propos du lien. Cette propriété permet de désactiver ce fonctionnement.


```css
/\* Valeurs avec un mot-clé \*/
-webkit-touch-callout: default;
-webkit-touch-callout: none;

/\* Valeurs globales \*/
-webkit-touch-callout: initial;
-webkit-touch-callout: inherit;
-webkit-touch-callout: unset;
```

Syntaxe
-------

### Valeurs

`default`

La légende par défaut est activée.

`none`

La légende est désactivée.

### Syntaxe formelle

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


```css
.exemple {
  -webkit-touch-callout: none;
}
```

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

Cette propriété est une propriété propriétaire liée à WebKit/Blink et ne fait partie d'aucune spécification. Elle est décrite dans la référence CSS de Safari.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
inline-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é **`inline-size`** définit la taille verticale ou horizontale d'un élément de bloc selon son mode d'écriture. Selon la valeur de `writing-mode`, cette propriété correspond à `width` quand le mode d'écriture n'est pas vertical ou à `height` sinon.

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

Cette propriété est à rapprocher de `block-size` qui définit l'autre dimension de l'élément.

Syntaxe
-------


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

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

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

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

### Valeurs

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

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

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

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

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

Exemples
--------

### CSS


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

### 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`
    + `height`
* `writing-mode`
::-moz-color-swatch
===================

**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 **`::-moz-color-swatch`** est un pseudo-élément spécifique à Mozilla qui représente la couleur sélectionnée d'un élément `<input>` avec `type="color"`.

**Note :** Utiliser `::-moz-color-swatch` sur tout autre élément qu'un `<input type="color">` n'aura aucun effet.

Syntaxe
-------

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

### HTML


```html
<input type="color" value="#de2020" />
```

### CSS


```css
input[type="color"]::-moz-color-swatch {
  border-radius: 10px;
  border-style: none;
}
```

### Résultat

Specifications
--------------

Ce pseudo-élément est spécifique à Gecko 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
----------

* Les pseudo-éléments semblables utilisés par les autres navigateurs :
    + `::-webkit-color-swatch` pris en charge par WebKit et Blink (utilisés par Safari, Chrome et Opera)