recursal/MDN huggingface dataset:
inset-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é **`inset-block-start`** définit le début du décalage logique en bloc (*block*) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi `top`, `right`, `bottom` ou `left` selon les valeurs des propriétés `writing-mode`, `direction` et `text-orientation`.

**Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-block-start`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification.


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
inset-block-start: 3px;
inset-block-start: 2.4em;

/\* Valeurs relatives à la largeur \*/
/\* du bloc englobant \*/
/\* Type <percentage> \*/
inset-block-start: 10%;

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

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

Syntaxe
-------

### Valeurs

La propriété `inset-block-start` peut prendre les mêmes valeurs que la propriété `left`.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | éléments positionnés |
| Héritée | non |
| Pourcentages | hauteur logique du bloc englobant |
| Valeur calculée | identiques aux propriétés qui décalent les boîtes : `top`, `right`, `bottom`, `left` sauf que ces directions sont logiques |
| Type d'animation | une longueur, pourcentage ou calc() ; |

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

inset-block-start =   
  auto                 |  
  <length-percentage>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### HTML


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

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  position: relative;
  inset-block-start: 20px;
  background-color: #c8c800;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # position-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 :
    + `top`
    + `right`
    + `bottom`
    + `left`
* Les propriétés qui définissent les autres décalages logiques
    + `inset-block-end`
    + `offset-inline-end`
    + `offset-inline-start`
* `writing-mode`
* `direction`
* `text-orientation`
text-decoration-skip
====================

La propriété **`text-decoration-skip`** définit la façon dont les lignes décoratives doivent être appliquées aux éléments et aux caractères. Elle contrôle les lignes décoratives dessinées par l'élément courant ainsi que celles de ses ancêtres.


```css
/\* Syntaxe avec un mot-clé \*/
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;
text-decoration-skip: spaces;

/\* Plusieurs mots-clés \*/
text-decoration-skip: object spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

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


**Note :** La valeur `ink` initialement définie pour cette propriété a été déplacée vers la propriété `text-decoration-skip-ink`.

Syntaxe
-------

### Valeurs

`none`

La propriété `text-decoration` s'applique à tous les éléments sélectionnés.

`objects`

La propriété `text-decoration` n'est pas appliquée pour les éléments en lignes atomiques telles que les images ou les blocs en lignes.

`spaces`

Les décorations ne sont pas appliquées où il y a des espaces (c'est-à-dire des caractères Unicode considérés comme des blancs, des séparateurs de mots et toute propriété `letter-spacing` ou `word-spacing` adjacente).

`leading-spaces`

Comportement analogue à `spaces` mais seuls les espaces avant les mots sont ignorés.

`trailing-spaces`

Comportement analogue à `spaces` mais seuls les espaces après les mots sont ignorés.

`edges`

La décoration de `text-decoration` est rognée vers l'intérieur de la moitié de la largueur de la ligne, vers la droite et la gauche. 
 ![An example of "text-decoration-skip: edges;".](/fr/docs/Web/CSS/text-decoration-skip/decoration-skip-edges.png)

`box-decoration`

La propriété `text-decoration` n'est pas appliquée pour les marges, bordures et zones de remplissage (*padding*) des éléments fils.

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

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

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

text-decoration-skip =   
  none  |  
  auto    
  
```

Exemples
--------

### CSS


```css
p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edge;
}
```

### HTML


```html
<p>Bonjour tout le monde, quelle journée !</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-skipping |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<display-box>
=============

Ces mots-clés définissent si un élément génère des boîtes d'affichage ou aucune.

Syntaxe
-------

`contents` 
Expérimental

L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur `contents` affecte les éléments « inhabituels » tels que les éléments remplacés. Voir Appendix B: Effects of display: contents on Unusual Elements pour plus de détails.

À l'heure actuelle, en raison d'un bug, les éléments ciblés par une règle avec `display: contents` sont retirés de l'arbre d'accessibilité et ne sont donc pas parcourus par les lecteurs d'écran\*.\*

`none`

 Désactive l'affichage d'un élément afin que celui-ci n'ait aucun effet sur la disposition du document (le document est affiché comme si l'élément n'existait pas). Tous les éléments descendants voient également leur affichage désactivé.
 Si on souhaite que l'élément ne soit pas affiché mais occupe néanmoins un espace, il faudra utiliser la propriété `visibility`.


### Syntaxe formelle
```

<display-box> =   
  contents  |  
  none        
  
```

Exemples
--------

### `display: none`

#### CSS


```css
p.secret {
  display: none;
}
```


#### HTML


```html
<p>Texte visible</p>
<p class="secret">Texte invisible</p>
```


#### Résultat

### `display: contents`

Dans cet exemple, l'élément `<div>` externe a une bordure rouge sur 2 pixels et mesure 300 pixels de large. Toutefois, cet élément est ciblé avec `display: contents` et l'élément `<div>` ne sera pas affiché tel quel : la bordure et la largeur ne s'appliqueront pas et l'élément fils sera affiché comme si le parent n'avait pas existé.

#### CSS


```css
.outer {
  border: 2px solid red;
  width: 300px;
  display: contents;
}

.outer > div {
  border: 1px solid green;
}
```


#### HTML


```html
<div class="outer">
  <div>Inner div.</div>
</div>
```


#### Résultat

Accessibilité
-------------

Via leur implémentation, la plupart des navigation retireront un élément de l'arbre d'accessibilité si celui-ci reçoit `display: contents`. Cet élément (ainsi que ses descendants pour certains navigateurs) ne sera plus annoncé par les outils de lecture d'écran. Ce comportement est incorrect selon la spécification CSSWG.

* Améliorer l'accessibilité du contenu avec `display: contents`, par Hidde de Vries (en anglais)
* `display: contents` n'est pas un outil de réinitialisation CSS, par Adrian Roselli (en anglais)
Compatibilité des navigateurs
-----------------------------

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

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

* `display`
    + `<display-outside>`
    + `<display-inside>`
    + `<display-listitem>`
    + `<display-internal>`
    + `<display-legacy>`
* `display: contents` n'est pas un outil de réinitialisation CSS (en anglais)
* Un balisage plus accessible avec `display: contents` (en anglais)
scroll-padding-inline
=====================

La propriété **`scroll-padding-inline`** est une propriété raccourcie qui permet de définir le remplissage, sur l'axe en ligne, entre l'élément et la zone de défilement. Autrement dit, elle permet de définir `scroll-padding-inline-end` et `scroll-padding-inline-start`.

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

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.

Syntaxe
-------


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

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

/\* Valeurs globales \*/
scroll-padding-inline: inherit;
scroll-padding-inline: initial;
scroll-padding-inline: 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 | pour chaque propriété individuelle de la propriété raccourcie :* `scroll-padding-inline-start`: `auto`
* `scroll-padding-inline-end`: `auto`
 |
| Applicabilité | conteneurs d'ascenseurs |
| Héritée | non |
| Pourcentages | relative to the scroll container's scrollport |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `scroll-padding-inline-start`: comme spécifié
* `scroll-padding-inline-end`: comme spécifié
 |
| Type d'animation | by computed value type |

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

scroll-padding-inline =   
  [ auto | <length-percentage [0,∞]> ]{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # propdef-scroll-padding-inline |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
-webkit-line-clamp
==================

La propriété CSS **`-webkit-line-clamp`** permet de limiter l'affichage du contenu d'un bloc à un nombre donné de lignes.

Cette propriété fonctionne uniquement si `display` vaut `-webkit-box` ou `-webkit-inline-box` et si `-webkit-box-orient` (en-US) vaut `vertical`.

Dans la plupart des cas, on utilisera également `overflow` avec la valeur `hidden`, afin de masquer le contenu qui dépasse (plutôt que d'afficher une ellipse en dehors de la boîte).

Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au milieu du texte (et pas nécessairement à la fin).

**Note :** Au départ, cette propriété était implémentée dans WebKit avec quelques problèmes. Elle a été standardisée à des fins de support pour les sites historiques. Le module de spécification CSS Overflow Module Level 3 définit également une propriété `line-clamp` qui doit remplacer `-webkit-line-clamp`.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
-webkit-line-clamp: none;

/\* Valeurs entières \*/
/\* Type <integer> \*/
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;

/\* Valeurs globales \*/
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;
```


`none`

Cette valeur indique que le contenu ne sera pas rogné.

`<integer>`

Cette valeur indique le nombre de lignes après lequel tronquer le contenu. Cette valeur doit être supérieure à 0.

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

-webkit-line-clamp =   
  none             |  
  <integer [1,∞]>    
  
```

Exemples
--------

### HTML


```html
<p>
  Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui
  signifie que le texte sera rogné après trois lignes. Une ellipse sera affichée
  au n ellipsis will be shown at the point where the text is clamped.
</p>
```

### CSS


```css
p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Overflow Module Level 4 # propdef--webkit-line-clamp |

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

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

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

* Line Clampin' (Truncating Multiple Line Text)
* `line-clamp`
shape-margin
============

La propriété CSS **`shape-margin`** définit la marge autour d'une forme CSS créée avec `shape-outside`.

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

La marge permet d'ajuster la distance entre le contour de la forme (l'élément flottant) et le contenu autour.


```css
/\* Valeur de longueur \*/
/\* Type <length> \*/
shape-margin: 10px;
shape-margin: 20mm;

/\* Valeur proportionnelle \*/
/\* Type <percentage> \*/
shape-margin: 60%;

/\* Valeurs globales \*/
shape-margin: inherit;
shape-margin: initial;
shape-margin: unset;
```

Syntaxe
-------

### Valeurs

`<length-percentage>`

Cette valeur définit la marge entre la forme et le texte alentour grâce à une longueur (cf. `<length>`) ou à un pourcentage (`<percentage>`) proportionnel à la largeur du bloc englobant de l'élément.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | flottants |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | une longueur, pourcentage ou calc() ; |

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

shape-margin =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### CSS


```css
section {
  max-width: 400px;
}

.shape {
  float: left;
  width: 150px;
  height: 150px;
  background-color: maroon;
  clip-path: polygon(0 0, 150px 150px, 0 150px);
  shape-outside: polygon(0 0, 150px 150px, 0 150px);
  shape-margin: 20px;
}
```

### HTML


```html
<section>
  <div class="shape"></div>
  We are not quite sure of any one thing in biology; our knowledge of geology is
  relatively very slight, and the economic laws of society are uncertain to
  every one except some individual who attempts to set them forth; but before
  the world was fashioned the square on the hypotenuse was equal to the sum of
  the squares on the other two sides of a right triangle, and it will be so
  after this world is dead; and the inhabitant of Mars, if he exists, probably
  knows its truth as we know it.
</section>
```

### Résultat

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

| Specification |
| --- |
| CSS Shapes Module Level 1 # shape-margin-property |

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

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

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

* Les formes CSS
* Un aperçu des formes CSS
* `shape-outside`
* `shape-image-threshold`
* `<basic-shape>`
<time>
======

Le type de donnée **`<time>`** indique des durées exprimées en secondes ou en millisecondes. Il est par exemple utilisé dans les propriétés `animation`, `transition`.

Syntaxe
-------

Une valeur temporelle consiste en une valeur de type `<number>` immédiatement suivie d'une unité. Comme avec les autres unités CSS, il n'y a pas d'espace entre l'unité et le nombre. La valeur peut éventuellement être précédée d'un signe `+` ou `-`.

Même si toutes les unités représentent le même temps pour la valeur `0`, l'unité ne doit pas être omises, car il ne s'agit pas d'une `<length>` : `0` n'est pas valide et ne représente pas `0s`, `0ms`.

### Unités

`s`

Cette unité permet d'exprimer le temps en secondes. Par exemple : `0s`, `1.5s`, `-60s`.

`ms`

Cette unité permet d'exprimer le temps en millisecondes. Par exemple : `0ms`, `1500ms`, `-6000ms`.

La conversion entre `s` et `ms` suit la logique suivante : `1s = 1000ms`.

Exemples
--------

### Valeurs valides


```css
12s         Nombre entier positif
-456ms      Nombre entier négatif
4.3ms       Nombre décimal
14mS        L'unité n'est pas sensible à la casse, cependant les majuscules sont déconseillées pour s et ms.
+0s         Zero, précédé d'un + et suivi de son unité.
-0ms        Zero, précédé d'un - et suivi de son unité (bien qu'étrange, ceci est autorisé).
```

### Valeurs invalides


```css
0           Bien qu'un zéro sans unité soit autorisé pour les longueurs, ceci n'est pas valide avec les autres dimensions.
12.0        Il s'agit d'un nombre, pas d'un temps, l'unité est obligatoire.
7 ms        Aucun espace n'est autorisé entre le nombre et l'unité.
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
::-moz-page-sequence
====================

**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-page-sequence`, spécifique à Mozilla, représente l'arrière-plan du document lors de la prévisualisation avant une 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`
* `::-moz-scrolled-page-sequence`
::-webkit-search-results-button
===============================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Le pseudo-élément **`::-webkit-search-results-button`** représente le bouton affiché sur le bord gauche d'un élément `<input>` de type `"search"` qui affiche un menu proposant les dernières recherches effectuées à l'utilisateur. Ce bouton et ce pseudo-élément ne sont pas standards et sont uniquement pris en charge par WebKit/Blink. Le bouton des résultats de recherche est uniquement affiché pour les éléments `<input>` qui possèdent un attribut `results`.

Syntaxe
-------


```css
selecteur::-webkit-search-results-button
```

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

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

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

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

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

* `::-webkit-search-cancel-button`
mask-border-mode
================

**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 **`mask-border-mode`** indique le mode de fusion utilisé pour le masque de bordure.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
mask-border-mode: luminance;
mask-border-mode: alpha;

/\* Valeurs globales \*/
mask-border-mode: inherit;
mask-border-mode: initial;
mask-border-mode: unset;
```

### Valeurs

`luminance`

Les valeurs de luminance proventant de l'image de masque sont utilisées pour le masque.

`alpha`

Les valeurs du canal alpha proventant de l'image de masque sont utilisées pour le masque.

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

|  |  |
| --- | --- |
| Valeur initiale | `alpha` |
| Applicabilité | tous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments `defs` et des éléments graphiques |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

mask-border-mode =   
  luminance  |  
  alpha        
  
```

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-mode |

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

{{Compat}}
Valeur résolue
==============

La **valeur résolue** d'une propriété CSS est la valeur renvoyée par `getComputedStyle()`. Pour la plupart des propriétés, il s'agit de la valeur calculée mais pour un tout petit nombre d'anciennes propriétés (dont `width` et `height`), il s'agit par contre de la valeur utilisée. Voir le lien vers la spécification ci-dessous pour des détails plus précis en fonction de chaque propriété.

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

| Specification |
| --- |
| CSS Object Model (CSSOM) # resolved-values |

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

{{Compat}}Voir aussi
----------

* `window.getComputedStyle`
* La valeur initiale
* La valeur définie
* La valeur calculée
* La référence CSS