recursal/MDN huggingface dataset:
inset-block-end
===============

**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-end`** définit la fin 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-end`. Firefox 63 a mis à jour le nom de la propriété afin de s'accorder avec les modifications apportées à la spécification.


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

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

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

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


Elle est liée aux propriétés `inset-block-start`, `inset-inline-end` et `inset-inline-start` qui permettent de définir les autres décalages de l'élément.

Syntaxe
-------

### Valeurs

La propriété `inset-block-end` 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-end =   
  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-end: 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 autres propriétés qui définissent les décalages logiques
    + `inset-block-start`
    + `inset-inline-start`
    + `inset-inline-end`
* `writing-mode`
* `direction`
* `text-orientation`
::-webkit-progress-bar
======================

**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-progress-bar`** représente l'ensemble de la barre d'un élément `<progress>`. Normalement, celui-ci n'est visible que pour la partie de la barre qui n'est pas remplie car, par défaut, il est affiché sous le pseudo-élément `::-webkit-progress-value`. C'est un pseudo-élément fils du pseudo-élément `::-webkit-progress-inner-element` et c'est le pseudo-élément parent du pseudo-élément `::-webkit-progress-value`.

**Note :** Afin que `::-webkit-progress-value` ait un effet, il faut que `appearance` vaille `none` sur l'élément `<progress>`.

Exemples
--------

### CSS


```css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-bar {
  background-color: orange;
}
```

### HTML


```html
<progress value="10" max="50"></progress>
```

### Résultat

Une barre de progression avec la mise en forme ci-avant sera affichée de cette façon :

![](/fr/docs/Web/CSS/::-webkit-progress-bar/progress-bar.png)

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

* Les pseudo-éléments relatifs à WebKit/Blink qui permettent de mettre en forme les autres parties des éléments `<progress>` :
    + `::-webkit-progress-value`
    + `::-webkit-progress-inner-element`
* `::-moz-progress-bar`
* `::-ms-fill`
border-right-color
==================

La propriété **`border-right-color`** définit la couleur utilisée pour la bordure droite d'un élément. Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies `border-color` et/ou `border-right`.

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

Syntaxe
-------


```css
/\* Valeurs de type <color> \*/
border-right-color: red;
border-right-color: rgb(255, 128, 0);
border-right-color: hsla(100%, 50%, 25%, 0.75);
border-right-color: #ffbb00;
border-right-color: currentColor;
border-right-color: transparent;

/\* Valeurs globales \*/
border-right-color: inherit;
border-right-color: initial;
border-right-color: unset;
```

### Valeurs

`<color>`

Une valeur de couleur (type `<color>`) qui décrit la couleur utilisée pour la bordure du côté droit.

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

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

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

border-right-color =   
  <color>     |  
  <image-1D>    
  
<image-1D> =   
  <stripes()>    
  
<stripes()> =   
  stripes( <color-stripe># )    
  
<color-stripe> =   
  <color>                            &&  
  [ <length-percentage> | <flex> ]?    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### CSS


```css
.maboite {
  border: solid 0.3em gold;
  border-right-color: red;
  width: auto;
}

.texterouge {
  color: red;
}
```

### HTML


```html
<div class="maboite">
  <p>
    Une boîte avec une bordure autour. Notez le côté de la boîte qui est
    <span class="texterouge">rouge</span>.
  </p>
</div>
```

### Résultat

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-color |

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

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

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

* Les propriétés raccourcies liées aux bordures
    + `border`,
    + `border-right`,
    + `border-color`.
* Les propriétés de couleur pour les autres bordures :
    + `border-top-color`,
    + `border-bottom-color`,
    + `border-left-color`.
* Les autres propriétés liées à la bordure droite :
    + `border-right-style`,
    + `border-right-width`.
quotes
======

La propriété **`quotes`** indique la façon dont les marques de citation sont affichées.

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

Syntaxe

```css
/\* Valeur avec un mot-clé \*/
quotes: none;

/\* Chaînes de caractères \*/
/\* Type <string> \*/
quotes: "«" "»"; /\* On utilise les guillemets français
 pour ouvrir et fermer une citation \*/
quotes: "«" "»" "‹" "›"; /\* On définit deux niveaux de citation \*/

/\* Valeurs globales \*/
quotes: inherit;
quotes: initial;
quotes: unset;
```

### Valeurs

`none`

Les valeurs `open-quote` et `close-quote` de la propriété `content` n'entraînent aucune marque de citation.

`[<string> <string>]+`

Une ou plusieurs paires de `<string>` pour les valeurs `open-quote` et `close-quote`. La première paire représente les symboles utilisés pour les citations de plus haut niveau, la deuxième indique comment délimiter une citation dans une citation, la troisième paire permet d'ajouter un niveau d'imbrication supplémentaire et ainsi de suite.

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

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

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

quotes =   
  auto                    |  
  none                    |  
  [ <string> <string> ]+    
  
```

Exemples
--------

### HTML


```html
<p>
  <q
 >Bientôt le Lapin aperçut Alice qui furetait ; il lui cria d’un ton
    d’impatience :
    <q
 >Eh bien ! Marianne, que faites-vous ici ? Courez vite à la maison me
      chercher une paire de gants et un éventail ! Allons, dépêchons-nous.
    </q>
  </q>
</p>
```

### CSS


```css
q {
  quotes: "«" "»" '"' '"';
}
```

### Résultat

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

| Specification |
| --- |
| CSS Generated Content Module Level 3 # quotes |

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

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

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

* `content`
Motion Path
===========

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**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.

***Motion Path*** est un module de la spécification CSS qui permet aux auteurs d'animer des objets graphiques le long d'une ligne appelée *chemin*.

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

### Propriétés

* `offset`
* `offset-distance`
* `offset-path`
* `offset-rotate`
Spécifications
--------------

| Specification |
| --- |
| Motion Path Module Level 1 # offset-path-property |

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

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

La pseudo-classe **`:in-range`** cible un élément `<input>` lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs `min` et max.


```css
/\* Cible n'importe quel élément <input> \*/
/\* qui possède un intervalle et pour le- \*/
/\* quel la valeur est dans cet intervalle \*/
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}
```


Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.

**Note :** Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme *dans l'intervalle* ou *en dehors de l'intervalle*.

Syntaxe
-------

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

### CSS


```css
li {
  list-style: none;
  margin-bottom: 1em;
}
input {
  border: 1px solid black;
}
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}
input:in-range + label::after {
  content: " OK";
}
input:out-of-range + label::after {
  content: " non autorisée !";
}
```

### HTML


```html
<form action="" id="form1">
  <ul>
    Les valeurs entre 1 et 10 sont valides.
    <li>
      <input
 id="valeur1"
 name="valeur1"
 type="number"
 placeholder="de 1 à 10"
 min="1"
 max="10"
 value="12" />
      <label for="valeur1">Votre valeur est </label>
    </li>
  </ul>
</form>
```

### Résultat

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

| Specification |
| --- |
| HTML Standard # selector-in-range |
| Selectors Level 4 # in-range-pseudo |

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

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

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

* `:out-of-range`
* Guide de validation pour les données de formulaire
:empty
======

La pseudo-classe **`:empty`** correspond à un élément qui n'a aucun enfant. Seules les feuilles de l'arbre et le texte (espaces inclus) sont pris en compte. Les commentaires, les attributs ou le contenu généré en CSS avec `content` n'ont pas d'influence sur le contenu de l'élément (autrement dit, si un élément ne contient que des commentaires, il sera considéré comme vide).


```css
/\* Cible tous les éléments <div> qui \*/
/\* n'ont pas de contenu \*/
div:empty {
  background: lime;
}
```


**Note :** Avec CSS4 Selectors, le sélecteur `:empty` a été modifié afin de se comporter comme `:-moz-only-whitespace` mais, à l'heure actuelle, aucun navigateur ne prend en charge cette fonctionnalité.

Syntaxe
-------

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

### CSS


```css
body {
  display: flex;
  justify-content: space-around;
}

.box {
  background: red;
  height: 100px;
  width: 100px;
}

.box:empty {
  background: blue;
}
```

### HTML


```html
<div class="box"><!-- Je serai bleu. --></div>
<div class="box">Je serai rouge.</div>
<div class="box">
  <!-- Je serai rouge à cause des espaces autour du commentaire -->
</div>
```

### Résultat

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

Les technologies d'assistance telles que les lecteurs d'écran ne peuvent pas analyser un contenu interactif vide. Tout contenu interactif doit avoir un nom accessible, fourni sous la forme d'une valeur textuelle via l'élément parent du contrôle (`<a>`, `<button>`, etc.). Les noms accessibles pemettent d'exposer le contrôle interactif au sein de l'arbre d'accessibilité, une API communiquant des informations qui peuvent être utilisées par les technologies d'assistance.

Le texte fournissant le nom accessible peut être masqué grâce à des propriétés afin de le retirer visuellement mais de le conserver pour les technologies d'assistance. Cette méthode est généralement utilisée pour les boutons utilisant une simple icône comme indication.

* Qu'est-ce qu'un nom accessible ? The Paciello Group (en anglais)
* *Hidden content for better a11y*
*Hidden content for better a11y* (en anglais)
* Comprendre la règle WCAG 2.4 (en-US)
* *Understanding Success Criterion 2.4.4*
*Understanding Success Criterion 2.4.4* (en anglais)
Spécifications
--------------

| Specification |
| --- |
| Selectors Level 4 # the-empty-pseudo |

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

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

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

* `:blank`
Expérimental
Mode de mise en page
====================

Un **mode de disposition CSS** (*layout mode*), parfois raccourci en « disposition » est un algorithme qui détermine la position et la taille des boîtes des éléments en fonction des interactions avec leurs voisins et leurs ancêtres. Il existe plusieurs modes de disposition :

* *Le flux normal (*normal flow*)* : tous les éléments font partie du flux normal par défaut. Le flux normal inclut la disposition en bloc qui permet d'organiser les boîtes comme les paragraphes et la disposition en ligne qui permet d'organiser les éléments en ligne comme le texte.
* *La disposition en tableau (*Table layout*)* : cette disposition est conçue pour organiser des tableaux.
* *La disposition flottante (*Float layout*)* : cette disposition est conçue pour positionner des éléments à gauche ou à droite du reste du contenu en flux normal et qui évolue « autour » de ces éléments.
* *La disposition positionnée (*Positioned layout*)* : cette disposition est conçue afin de positionner des éléments sans interaction avec les autres.
* *La disposition en colonnes (*Multi-column layout*)* : cette disposition permet d'organiser le contenu en colonnes, comme on peut le voir dans les journaux.
* *La disposition avec les boîtes flexibles (flexbox) (*flexible box layout*)* : cette disposition permet d'organiser des pages complexes qui peuvent être redimensionnées facilement.
* *La disposition en grille (*Grid layout*)* : cette disposition permet d'organiser les éléments relativement à une grille fixe.

**Note :** Les propriétés CSS ne s'appliquent toutes à tous les modes de disposition. La plupart des propriétés n'ont d'effet que pour un ou deux de ces modes et seront sans effet pour un élément qui s'inscrit dans un autre mode de disposition.
:placeholder-shown
==================

La pseudo-classe **`:placeholder-shown`** permet de représenter n'importe quel élément `<input>` ou `<textarea>` affichant un texte de substitution (en-US).


```css
/\* Cible tout élément <input> ou <textarea> avec un \*/
/\* attribut placeholder actuellement affiché \*/
:placeholder-shown {
  border: 2px solid silver;
}
```

Syntaxe
-------

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

### Exemple simple

#### CSS
```

input:-ms-input-placeholder {
  border-color: silver;
}

input:-moz-placeholder {
  border-color: silver;
}
```



```css
input {
  border: 2px solid black;
  padding: 3px;
}

:placeholder-shown {
  border-color: silver;
}
```


#### HTML


```html
<input placeholder="Saisir quelque chose ici" />
```


#### Résultat

### Dépassement du texte

Sur certains écrans plus étroits (tels que ceux des smartphones), la largeur des boîtes de recherche et celle des champs de formulaire peut être réduite fortement. Le texte de substitution peut donc être tronqué de façon indésirable. On peut alors utiliser `text-overflow` pour gérer cela gracieusement.

#### HTML


```html
<input
 placeholder="Veuillez saisir quelque chose dans ce champ s'il vous plaît !" />
```


#### CSS
```

input:-ms-input-placeholder {
  text-overflow: ellipsis;
}

input:-moz-placeholder {
  text-overflow: ellipsis;
}
```



```css
input:placeholder-shown {
  text-overflow: ellipsis;
}
```


#### Résultat

### Texte coloré

#### HTML


```html
<input placeholder="Saisir quelque chose ici" />
```


#### CSS
```

input:-ms-input-placeholder {
  color: red;
  font-style: italic;
}

input:-moz-placeholder {
  color: red;
  font-style: italic;
}
```



```css
input:placeholder-shown {
  color: red;
  font-style: italic;
}
```


#### Résultat

### Champ de saisie personnalisé

#### HTML


```html
<form id="test">
  <p>
    <label for="name">Enter Student Name:</label>
    <input id="name" placeholder="Student Name" />
  </p>
  <p>
    <label for="branch">Enter Student Branch:</label>
    <input id="branch" placeholder="Student Branch" />
  </p>
  <p>
    <label for="sid">Enter Student ID:</label>
    <input
 type="number"
 pattern="[0-9]{8}"
 title="8 digit ID"
 id="sid"
 class="studentid"
 placeholder="8 digit id" />
  </p>
  <input type="submit" />
</form>
```


#### CSS
```

input.studentid:-ms-input-placeholder {
  background-color: yellow;
  color: red;
  font-style: italic;
}

input.studentid:-moz-placeholder {
  background-color: yellow;
  color: red;
  font-style: italic;
}
```



```css
input {
  background-color: #e8e8e8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}
```


#### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # placeholder |

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

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

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

* `::placeholder`
* `::-moz-placeholder`
* `<input>`
* `<textarea>`
* Les formulaires HTML
margin-inline-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-inline-start`** définit la marge logique appliquée au début des éléments en ligne, 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-block-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-inline-start: 10px; /\* Une longueur absolue \*/
margin-inline-start: 1em; /\* Une longueur relative à la taille du texte \*/
margin-inline-start: 5%; /\* Une largeur relative à la
 largeur du bloc englobant \*/

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

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

### Valeurs

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

Exemples
--------

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  margin-inline-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`
* `margin-inline-end`
* `writing-mode`
* `direction`
* `text-orientation`