recursal/MDN huggingface dataset:
CSS Writing Modes
=================

***CSS Writing Modes*** (ou modes d'écriture CSS) est un module qui définit différents modes d'écriture internationaux comme l'écriture de gauche à droite (e.g. utilisée par les langues latines et indiennes), de droite à gauche (e.g. utilisée par l'hébreu ou l'arabe), bidirectionnelle (utilisée quand il y a à la fois des écritures de gauche à droite et de droite à gauche sont ) et verticale (e.g. utilisée par certains écrits asiatiques).

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

### Propriétés

* `direction`
* `glyph-orientation-horizontal`
* `text-combine-upright`
* `text-orientation`
* `unicode-bidi`
* `writing-mode`
Spécifications
--------------

| Specification |
| --- |
| CSS Writing Modes Level 4  |
border-block-start-width
========================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété **`border-block-start-width`** définit la largeur de la bordure pour le côté de bloc du début « 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-inline-start-width`, `border-block-end-width` et `border-inline-end-width` qui permettent de définir la largeur de la bordure pour les différents côtés de l'élément.

Syntaxe
-------


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

### Valeurs

`<'border-width'>`

Voir `border-width`

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

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

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

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

Exemples
--------

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-start-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`
border-start-start-radius
=========================

**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-start-start-radius`** définit le rayon de courbure de la bordure pour un angle d'un élément. Cette propriété logique correspond à une propriété physique de rayon de bordure selon la directionalité du texte et le mode d'écriture. Autrement dit, cette propriété concerne un angle différent selon les valeurs des propriétés `writing-mode`, `direction` et `text-orientation`.


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
/\* Avec une valeur, le coin sera circulaire \*/
border-start-start-radius: 10px;
border-start-start-radius: 1em;

/\* Avec deux valeurs, le coin sera une ellipse \*/
border-start-start-radius: 1em 2em;

/\* Valeurs globales \*/
border-start-start-radius: inherit;
border-start-start-radius: initial;
border-start-start-radius: unset;
```


Ainsi, avec un mode d'écriture `horizontal-tb`, cette propriété logique correspondra à la propriété physique `border-top-left-radius`.

Syntaxe
-------

### Valeurs

`<length-percentage>`

Cette valeur exprime le rayon de courbure ou les demi-axes d'une ellipse. Pour les valeurs qui expriment une longueur, on peut utiliser n'importe quelle valeur du type de donnée `<length>`. Les pourcentages sur l'axe horizontal sont relatifs à la largeur de la boîte et à la hauteur de la boîte pour l'axe vertical. Les valeurs négatives sont invalides.

### Syntaxe formelle
```

border-start-start-radius =   
  <length-percentage [0,∞]>{1,2}    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### CSS


```css
div {
  background-color: rebeccapurple;
  width: 120px;
  height: 120px;
  border-start-start-radius: 10px;
}

.texteExemple {
  writing-mode: vertical-rl;
  padding: 10px;
  background-color: #fff;
  border-start-start-radius: 10px;
}
```

### HTML


```html
<div>
  <p class="texteExemple">Exemple</p>
</div>
```

### Résultat

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

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

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

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

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

* La propriété physique correspondante : `border-top-left-radius`
* `writing-mode`, `direction`, `text-orientation`
column-rule
===========

Lorsqu'on utilise une disposition sur plusieurs colonnes, la propriété raccourcie **`column-rule`** permet de définir l'affichage d'une ligne droite (aussi appelée « règle ») entre chaque colonne.

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

Cette propriété est une propriété raccourcie qui permet de définir `column-rule-width`, `column-rule-style` et `column-rule-color` (plutôt que d'avoir à les définir une par une, ce qui est plus laborieux).

**Note :** Cette propriété étant une propriété raccourcie, elle surcharge toutes les déclarations avec les propriétés individuelles écrites avant au sein d'une même règle.

Syntaxe
-------


```css
/\* Syntaxe avec des mots-clés \*/
column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;

/\* Valeurs globales \*/
column-rule: inherit;
column-rule: initial;
column-rule: unset;
```


Cette propriété peut être définie avec une, deux ou trois valeurs telles que définies ci-après, dans n'importe quel ordre.

### Valeurs

`<'column-rule-width'>`

Une valeur de longueur (type `<length>`) ou l'un des mots-clés `thin`, `medium` ou `thick`. Pour plus de détails, voir `border-width`.

`<'column-rule-style'>`

Voir `border-style` pour les différentes valeurs possibles.

`<'column-rule-color'>`

Une valeur de couleur (type `<color>`).

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

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `column-rule-width`: `medium`
* `column-rule-style`: `none`
* `column-rule-color`: `currentcolor`
 |
| Applicabilité | éléments sur plusieurs colonnes |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `column-rule-color`: couleur calculée
* `column-rule-style`: comme spécifié
* `column-rule-width`: une longueur absolue ou `0` si `column-rule-style` vaut `none` ou `hidden`
 |
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :* `column-rule-color`: une couleur
* `column-rule-style`: discrète
* `column-rule-width`: une longueur
 |

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

column-rule =   
  <'column-rule-width'>  ||  
  <'column-rule-style'>  ||  
  <'column-rule-color'>    
  
```

Exemples
--------

### HTML


```html
<div id="col\_rul">
  <p>column one</p>
  <p>column two</p>
  <p>column three</p>
</div>
```

### CSS


```css
#col\_rul {
  padding: 0.3em;
  background: gold;
  border: groove 2px gold;
  column-rule: inset 2px gold;
  column-count: 3;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # column-rule |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
::-moz-scrolled-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-scrolled-page-sequence`** est un pseudo-élément spécifique à Mozilla et représente l'arrière-plan de la prévisualisation de l'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-page-sequence`
-webkit-text-security
=====================

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

**`-webkit-text-security`** est une propriété CSS non-standard qui permet de masquer les caractères saisis dans un camp d'un formulaire (ex. `<input>` ou `<textarea>`) en les remplaçant par une forme géométrique. Cette propriété n'affecte que les champs qui ne sont pas de type `password`.

Syntaxe
-------


```css
-webkit-text-security: circle;
-webkit-text-security: disc;
-webkit-text-security: square;
-webkit-text-security: none;
```

Exemples
--------

En utilisant un navigateur qui prend en charge cette propriété et en saisissant des caractères dans le champs, vous pourrez les voir remplacées par des carrés.

### HTML


```html
<label for="name">Nom :</label> <input type="text" name="name" id="name" />
```

### CSS


```css
input {
  -webkit-text-security: square;
}
```

### Résultat

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

Cette propriété WebKit est spécifique à ce moteur et ne fait partie d'aucune spécification\*.\*

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

Cette propriété est prise en charge par les navigateurs basés sur WebKit ou Blink.

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

* Les extensions CSS spécifiques à WebKit
::-webkit-meter-even-less-good-value
====================================

**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-meter-even-less-good-value`** donne une couleur rouge à l'élément `<meter>` lorsque les valeurs de `value` et d'optimum sont dans des intervalles opposés (par exemple : `value` < `low` < `high` < `optimum` ou `value` > `high` > `low` > `optimum`).

Exemples
--------

### CSS


```css
meter::-webkit-meter-even-less-good-value {
  background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77);
  height: 100%;
  box-sizing: border-box;
}
```

### HTML


```html
<meter min="0" max="10" value="6">Score out of 10</meter>
```

### Résultat

**Note :** Cela fonctionnera uniquement pour les navigateurs Webkit/Blink.

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 utilisés par WebKit/Blink pour mettre en forme les autres parties d'un élément `<meter>` :

* `::-webkit-meter-inner-element`
* `::-webkit-meter-bar`
* `::-webkit-meter-optimum-value`
* `::-webkit-meter-suboptimum-value`
text-decoration-skip-ink
========================

La propriété CSS **`text-decoration-skip-ink`** définit la façon dont la ligne décorative (en dessous ou au dessus du texte) est dessinée lorsqu'elle rencontre le jambage ou la hampe d'un caractère (ou glyphe).

Syntaxe
-------


```css
/\* Valeur avec un mot-clé \*/
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;

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

### Valeurs

`none`

La ligne décorative traverse l'ensemble des glyphes, qu'ils aient un jambage ou une hampe.

`auto`

La valeur par défaut : la ligne (au dessus ou en dessous du texte) est uniquement dessinée de façon à ne pas être proche des jambages ou hampes des glyphes. Autrement dit, la ligne est interrompue à chaque fois qu'elle croise un glyphe. 
 ![An example of "text-decoration-skip: ink;".](/fr/docs/Web/CSS/text-decoration-skip-ink/decoration-skip-ink.png)

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| 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-ink =   
  auto  |  
  none  |  
  all     
  
```

Exemples
--------

### HTML


```html
<p>Un instant après, Alice était à la poursuite du Lapin dans le terrier…</p>
```

### CSS


```css
p {
  margin: 0;
  font-size: 2em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Text Decoration Module Level 4 # text-decoration-skip-ink-property |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
animation-play-state
====================

La propriété **`animation-play-state`** définit si une animation est en cours d'exécution ou si elle est en pause.

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

Lorsqu'on reprend une animation en pause, celle-ci reprendra où elle avait été interrompue (elle ne recommencera pas depuis le début de la séquence).

Syntaxe
-------


```css
/\* On a une seule animation \*/
animation-play-state: running;
animation-play-state: paused;

/\* On gère plusieurs animations \*/
/\* avec des valeurs respectives \*/
animation-play-state: paused, running, running;

/\* Valeurs globales \*/
animation-play-state: inherit;
animation-play-state: initial;
animation-play-state: unset;
```

### Valeurs

`running`

L'animation est en cours.

`paused`

L'animation est en pause.


**Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, elles seront respectivement affectées aux animations définies par `animation-name`. Pour plus d'informations, voir : paramétrer les valeurs des propriétés pour plusieurs animations.

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

|  |  |
| --- | --- |
| Valeur initiale | `running` |
| Applicabilité | tous les éléments, ainsi que les pseudo-elements `::before` et `::after` |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |

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

animation-play-state =   
  <single-animation-play-state>#    
  
<single-animation-play-state> =   
  running  |  
  paused     
  
```

Exemples
--------

### CSS


```css
p {
  animation-duration: 3s;
  animation-name: glissement;
  animation-iteration-count: infinite;
}

.arret {
  animation-play-state: paused;
}

.encours {
  animation-play-state: running;
}

@keyframes glissement {
  from {
    margin-left: 100%;
    width: 200%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
```

### HTML


```html
<p class="arret">
  La Chenille et Alice se considérèrent un instant en silence. Enfin la Chenille
  sortit le houka de sa bouche, et lui adressa la parole d’une voix endormie et
  traînante.
</p>

<p class="encours">
  Alice, un peu irritée du parler bref de la Chenille, se redressa de toute sa
  hauteur.
</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-play-state |

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

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

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

* Manipuler les animations CSS
* `AnimationEvent`
padding-inline-start
====================

La propriété **`padding-inline-start`** définit le décalage avec le début de la zone de remplissage d'un élément selon le mode d'écriture, la direction et l'orientation du texte.

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

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
padding-inline-start: 10px; /\* Une longueur absolue \*/
padding-inline-start: 1em; /\* Relatif à la taille du texte \*/

/\* Valeurs de proportions \*/
/\* Type <percentage> \*/
padding-inline-start: 5%; /\* Relatif à la largeur du bloc englobant \*/

/\* Valeurs globales \*/
padding-inline-start: inherit;
padding-inline-start: initial;
padding-inline-start: revert;
padding-inline-start: unset;
```

### Valeurs

`<length>`

La taille de la zone de remplissage exprimée de façon absolue. Les valeurs négatives sont interdites.

`<percentage>`

La taille de la zone de remplissage exprimée de façon relative à la *taille en ligne* (*inline* en anglais) du bloc englobant. Les valeurs négatives sont interdites.

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

Selon sa définition dans la spécification, la propriété `padding-inline-start` peut prendre les mêmes valeurs que la propriété `padding-top`. Toutefois, elle peut en réalité correspondre à la propriété physique `padding-top`, `padding-right` ou `padding-left` selon les valeurs définies pour `writing-mode`, `direction` et `text-orientation`.

Les autres parties du remplissage sont définies grâce aux propriétés `padding-block-start`, `padding-block-end` et `padding-inline-end`.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | tous les éléments exceptés `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` et `table-column` |
| Héritée | non |
| Pourcentages | largeur logique du bloc englobant |
| Valeur calculée | comme `length` |
| Type d'animation | une longueur |

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

padding-inline-start =   
  <'padding-top'>    
  
```

Exemples
--------

### Définition de padding-inline-start avec du texte vertical

#### HTML


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


#### CSS


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

.exemple {
  writing-mode: vertical-lr;
  padding-inline-start: 20px;
  background-color: #c8c800;
}
```


#### Résultat

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # padding-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 :
    + `padding-top`
    + `padding-right`
    + `padding-bottom`
    + `padding-left`
* `writing-mode`
* `direction`
* `text-orientation`
Fil d'Ariane (breadcrumb)
=========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

* Learn more
* See full compatibility
* Report feedback
La navigation avec un fil d'Ariane (*breadcrumb*) permet à un utilisateur de comprendre l'emplacement auquel il se trouve au sein du site web en fournissant un fil d'Ariane permettant de revenir à la page de départ.

![Links displayed inline with separators](/fr/docs/Web/CSS/Layout_cookbook/Breadcrumb_Navigation/breadcrumb-navigation.png)

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

Les différents éléments formant le chemin sont affichés sur une ligne avec un séparateur qui permet d'identifier la hiérarchie entre les pages.

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

**Note :** Télécharger cet exemple

Choix effectués
---------------

L'ensemble est organisé dans un conteneur flexible. Les séparateurs sont générés à partir de pseudo-éléments et le séparateur choisi ici peut être modifié à votre convenance.

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

On utilise ici les attributs `aria-label` et `aria-current` afin d'aider les utilisateurs à comprendre cette navigation et l'emplacement de la page actuelle dans la structure. Pour plus d'informations, voir les liens ci-après.

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

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

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

* Les boîtes flexibles CSS
* Fournir un fil d'Ariane
* Utiliser l'attribut `aria-current`
Centrer un élément
==================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (*flexbox*), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification *Box Alignment*.

![an element centered inside a larger box](/fr/docs/Web/CSS/Layout_cookbook/Center_an_element/cookbook-center.png)

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

Centrer un élément à la fois horizontalement et verticalement dans un autre élément.

Recette
-------

**Note :** Télécharger cet exemple

Choix effectués
---------------

Pour centrer une boîte dans une autre, on a donné au contenant une propriété `display: flex`.

Ensuite, on a paramétré `align-items` avec la valeur `center` pour centrer la boîte verticalement, et `justify-content` avec la valeur `center` pour centrer horizontalement.

 À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique.
 Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste.

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

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

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

* L'alignement des boîtes avec Flexbox
* CSS Box alignment guide