recursal/MDN huggingface dataset:
::-moz-range-progress
=====================

**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-range-progress`** représente la portion de la piste d'un élément `<input>` de type `range`, qui correspond aux valeurs inférieures à la valeur sélectionnée par le curseur.

**Note :** Si `::-moz-range-progress` est utilisé sur autre chose qu'un élément `<input type="range">`, il n'aura aucun effet.

Syntaxe
-------

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

### HTML


```html
<input type="range" min="0" max="100" step="5" value="50" />
```

### CSS


```css
input[type="range"]::-moz-range-progress {
  background-color: green;
  height: 1em;
}
```

### Résultat

Une barre de progression mise en forme avec cette déclaration devrait ressembler à :

![](/fr/docs/Web/CSS/::-moz-range-progress/screen_shot_2015-12-04_at_20.14.48.png)

Spé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
----------

* Les pseudo-éléments de Gecko qui permettent de mettre en forme les autres parties des éléments `<input>` de type `range` :
    + `::-moz-range-thumb`
    + `::-moz-range-track`
* `::-ms-fill-upper` pris en charge par Internet Explorer
* CSS-Tricks : Gérer des champs `input` de type `range` de façon compatible entre les navigateurs (en anglais)
* QuirksMode : Mettre en forme les pistes et curseurs (en anglais)
text-emphasis-color
===================

La propriété **`text-emphasis-color`** définit la couleur utilisée pour dessiner les marques d'emphase. Celle-ci peut être (re)définie grâce à la propriété raccourcie `text-emphasis`.


```css
/\* Valeur initiale \*/
text-emphasis-color: currentColor;

/\* Valeur de couleur \*/
/\* Type <color> \*/
text-emphasis-color: #555;
text-emphasis-color: blue;
text-emphasis-color: rgba(90, 200, 160, 0.8);
text-emphasis-color: transparent;

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

Syntaxe
-------

### Valeurs

`<color>`

Définit la couleur utilisée pour les marques. Si on ne définit pas de couleur, ce sera la couleur courante du texte qui sera utilisée.

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

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

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

text-emphasis-color =   
  <color>    
  
```

Exemples
--------

### HTML


```html
<p><em>Coucou</em>, je suis <em>là</em></p>
```

### CSS


```css
em {
  text-emphasis-style: sesame;
  text-emphasis-color: blue;
}
```

### Résultat

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

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

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

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

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

* `text-emphasis-style`
* `text-emphasis`.
* `text-emphasis-position`
* Le type de données `<color>`
* D'autres propriétés relatives aux couleurs `color`, `background-color`, `border-color`, `outline-color`, `text-emphasis-color`, `text-shadow`, `caret-color` et `column-rule-color`
* Appliquer des couleurs sur des éléments HTML
scroll-margin-top
=================

La propriété **`scroll-margin-top`** définit la marge de défilement de l'élément sur le côté haut. 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-top: 10px;
scroll-margin-top: 1em;

/\* Valeurs globales \*/
scroll-margin-top: inherit;
scroll-margin-top: initial;
scroll-margin-top: 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-top =   
  <length>    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # margin-longhands-physical |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
::grammar-error
===============

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

Le pseudo-élément CSS **`::grammar-error`** représente une portion de texte que le navigateur signale comme contenant une ou plusieurs erreurs de grammaire.


```css
::grammar-error {
  color: green;
}
```

Propriétés autorisées
---------------------

Seul un sous-ensemble restreint de propriétés CSS peut être utilisé dans une règle contenant `::grammar-error` :

* `background-color`,
* `caret-color`,
* `color`,
* `cursor`,
* `outline` et les propriétés détaillées associées,
* `text-decoration` et les propriétés détaillées associées.
* `text-emphasis-color`,
* `text-shadow`
Syntaxe
-------


```css
::grammar-error {
}
```

Exemples
--------

### CSS


```css
p::grammar-error {
  color: red;
}
```

### HTML


```html
<p>
  Alice devina tout de suite qu’il chercher l’éventail et la paire de gants.
</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-grammar-error |

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

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

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

* `::spelling-error`
CSS Scroll Snap
===============

***CSS Scroll Snap*** est un module de spécification CSS qui introduit les positions d'accroche lors du défilement. Cela permet de garantir la position sur laquelle on arrive après avoir fait défiler du contenu.

**Note :** La version précédente ce module, *Scroll Snap Points*, est dépréciée et est désormais remplacée par *CSS Scroll Snap*.

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

### Propriétés CSS applicables aux conteneurs

* `scroll-snap-type`
* `scroll-snap-stop`
* `scroll-padding`
* `scroll-padding-top`
* `scroll-padding-right`
* `scroll-padding-bottom`
* `scroll-padding-left`
* `scroll-padding-inline`
* `scroll-padding-inline-start`
* `scroll-padding-inline-end`
* `scroll-padding-block`
* `scroll-padding-block-start`
* `scroll-padding-block-end`
### Propriétés CSS applicables aux éléments enfants

* `scroll-snap-align`
* `scroll-margin`
* `scroll-margin-top`
* `scroll-margin-right`
* `scroll-margin-bottom`
* `scroll-margin-left`
* `scroll-margin-inline`
* `scroll-margin-inline-start`
* `scroll-margin-inline-end`
* `scroll-margin-block`
* `scroll-margin-block-start`
* `scroll-margin-block-end`
Guides
------

* Concepts de bases pour *CSS Scroll Snap*
* Compatiblité des navigateurs et *CSS Scroll Snap*
Spécifications
--------------

| Specification |
| --- |
| CSS Scroll Snap Module Level 1  |

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

Les informations de compatibilité sont présentes sur chacune des pages des propriétés.
border-top-width
================

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

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

Syntaxe
-------


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

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

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

### Valeurs

`<line-width>`

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

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

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

Exemples
--------

### CSS


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

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

La pseudo-classe **`:-moz-handler-blocked`** permet de cibler un élément qui ne peut pas être affiché car le gestionnaire associé a été bloqué par l'utilisateur.

Cette pseudo-classe est principalement destinée aux développeurs de thèmes.

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-handler-crashed`
* `:-moz-handler-disabled`
box-orient
==========

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

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

La propriété CSS **`box-orient`** définit si un élément organise son contenu horizontalement ou verticalement.


```css
/\* Valeurs avec un mot-clé \*/
box-orient: horizontal;
box-orient: vertical;
box-orient: inline-axis;
box-orient: block-axis;

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

Syntaxe
-------

### Valeurs

`horizontal`

La boîte organise son contenu horizontalement.

`vertical`

La boîte organise son contenu verticalement.

`inline-axis` (HTML)

La boîte organise son contenu (ses éléments enfants) dans le sens de l'axe de lecture (axe *inline*).

`block-axis` (HTML)

La boîte organise son contenu (ses éléments enfants) dans le sens perpendiculaire à l'axe de lecteur (axe *block*).

Les axes en ligne et de bloc dépendent du mode d'écriture (pour l'anglais, ils correspondront, respectivement, à `horizontal` et `vertical`.

Description
-----------

Les éléments HTML disposent par défaut leur contenu le long de l'axe en ligne. Cette propriété CSS s'appliquera uniquement aux éléments HTML pour lesquels la propriété CSS `display` vaut `box` ou `inline-box`.

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

|  |  |
| --- | --- |
| Valeur initiale | `inline-axis` (`horizontal` en XUL) |
| Applicabilité | éléments avec `display` qui vaut `box` ou `inline-box` |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

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

### Définir une orientation de boîte horizontale

Dans cet exemple, la propriété `box-orient` placera les deux sections `<p>` sur la même ligne.

#### HTML


```html
<div class="exemple">
  <p>Je serai à gauche de mon voisin.</p>
  <p>Je serai à droite de mon voisin.</p>
</div>
```


#### CSS


```css
div.exemple {
  display: -moz-box; /\* Mozilla \*/
  display: -webkit-box; /\* WebKit \*/
  display: box; /\* Comme spécifié \*/

  /\* Les enfants devraient s'orienter verticalement \*/
  -moz-box-orient: horizontal; /\* Mozilla \*/
  -webkit-box-orient: horizontal; /\* WebKit \*/
  box-orient: horizontal; /\* Comme spécifié \*/
}
```


#### Résultat

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

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

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

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

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

* `box-direction`
* `box-pack`
* `box-align`
* `flex-direction`
transform-box
=============

**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é **`transform-box`** définit la boîte à laquelle les propriétés `transform` et `transform-origin` font référence.


```css
/\* Avec un mot-clé \*/
transform-box: border-box;
transform-box: fill-box;
transform-box: view-box;

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

Syntaxe
-------

La propriété `transform-box` est définie grâce à l'un des mots-clés suivants.

### Valeurs

`border-box`

La boîte de bordure (*border*) est utilisée comme boîte de référence. La boîte de référence d'un tableau est la boîte de bordure englobante (celle qui inclue les éventuelles légendes ou titres rattachés au tableau) et non uniquement celle autour du tableau.

`fill-box`

La boîte liée à l'objet est utilisée comme boîte de référence.

`view-box`

Le plus proche *viewport* SVG est utilisé comme boîte de référence. Si l'attribut `viewBox` est défini pour le *viewport* de l'élément, la boîte de référence est positionnée à l'origine du système de coordonnées défini par l'attribut `viewBox` et les dimensions de la boîte de référence sont définies avec les valeurs de hauteur et largeur de l'attribut `viewBox`.

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

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

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

transform-box =   
  content-box  |  
  border-box   |  
  fill-box     |  
  stroke-box   |  
  view-box       
  
```

Exemple
-------

### HTML


```html
<p class="premier">"I saw Mr. Hyde"</p>

<p class="deuxieme">"Quite right, Mr. Utterson"</p>
```

### CSS


```css
p {
  transform: rotate(90deg);
  transform-origin: bottom left;
  transform-box: border-box;
}

.premier {
  border: 3px black solid;
}

.deuxieme {
  border: 3px black solid;
  padding: 3em;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Transforms Module Level 1 # transform-box |

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

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

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

* Utiliser les transformations CSS
* `transform`
* `transform-origin`
border-inline-start-style
=========================

**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-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à `border-top-style`, `border-right-style`, `border-bottom-style` ou à `border-left-style` selon les valeurs de `writing-mode`, `direction` et `text-orientation`.

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

Les autres propriétés logiques permettant de définir le style de la bordure sont les suivantes :

* `border-block-start-style`
* `border-block-end-style`
* `border-inline-end-style`.
Syntaxe
-------


```css
/\* Valeur avec un mot-clé \*/
border-inline-start-style: dashed;
border-inline-start-style: dotted;
border-inline-start-style: groove;
```

### Valeurs

`<'border-style'>`

Le style de la ligne utilisé pour la bordure, voir `border-style`.

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

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

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

border-inline-start-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Exemples
--------

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-start-style: dashed;
}
```

### HTML


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

### Résultat

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

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

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-style`,
    + `border-right-style`,
    + `border-bottom-style`,
    + `border-left-style`
* `writing-mode`, `direction`, `text-orientation`
list-style-image
================

La propriété CSS **`list-style-image`** définit l'image utilisée comme puce devant les éléments de listes.

On peut également utiliser la propriété raccourcie `list-style`.

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

**Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels `display` vaut `list-item`). Par défaut, cela inclut les éléments `<li>`. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à `<ol>` ou à `<ul>`).

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé\*/
list-style-image: none;

/\* Valeurs pointant vers une image \*/
list-style-image: url("starsolid.gif");

/\* Valeurs avec une image \*/
list-style-image: linear-gradient(to left bottom, red, blue);

/\* Valeurs globales \*/
list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: unset;
```

### Valeurs

`<image>`

Une valeur représentant une image valide, qui sera utilisée comme puce.

`none`

Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec `list-style-type` sera utilisé à la place.

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

|  |  |
| --- | --- |
| Valeur initiale | `none` |
| Applicabilité | éléments de liste |
| Héritée | oui |
| Valeur calculée | The keyword `none` or the computed <image> |
| Type d'animation | discrète |

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

list-style-image =   
  <image>  |  
  none       
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Exemples
--------

### Utiliser une URL

#### HTML


```html
<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
</ul>
```


#### CSS


```css
ul {
  list-style-image: url("starsolid.gif");
}
```


#### Résultat

### Utiliser un dégradé

#### HTML


```html
<ul>
  <li>Élément 1</li>
  <li>Élément 2</li>
</ul>
```


#### CSS


```css
ul {
  font-size: 200%;
  list-style-image: linear-gradient(to left bottom, red, blue);
}
```


#### Résultat

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

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # image-markers |

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

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

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

* `list-style`
* `list-style-type`
* `list-style-position`
* La fonction `url()`