recursal/MDN huggingface dataset:
box-direction
=============

**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. La propriété `-moz-box-direction` ne peut être utilisée que dans des composants XUL tandis que la propriété `box-direction` a été remplacée par la propriété standard `flex-direction`. Voir la page Flexbox pour plus d'informations sur ce qui doit être utilisé à la place.

La propriété CSS **`box-direction`** définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite).


```css
/\* Valeurs avec un mot-clé \*/
box-direction: normal;
box-direction: reverse;

/\* Valeurs globales \*/
box-direction: inherit;
box-direction: initial;
box-direction: revert;
box-direction: revert-layer;
box-direction: unset;
```

Syntaxe
-------

La propriété `box-direction` est paramétrée avec l'un des mots-clés suivants.

### Valeurs

`normal`

La boîte répartit son contenu à partir du début (le côté gauche si la boîte est orientée horizontalement ou le côté haut si la boîte est orientée verticalement).

`reverse`

La boîte répartit son contenu à partir de la fin (le côté droit si la boîte est orientée horizontalement ou le côté bas si la boîte est orientée verticalement).

Notes
-----

Le bord de la boîte désigné par `start` pour l'alignement dépend de l'orientation de la boîte :

* Pour les éléments horizontaux, `start` correspond au bord haut.
* Pour les éléments verticaux, `start` correspond au bord gauche.

Le bord opposé au bord `start` est désigné par `end`.

Si la direction de l'élément est définie grâce à l'attribut `dir`, la déclaration est ignorée.

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

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| 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
--------


```css
.exemple {
  /\* du bas vers le haut \*/
  -moz-box-direction: reverse; /\* Mozilla \*/
  -webkit-box-direction: reverse; /\* WebKit \*/
  box-direction: reverse;
}
```

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-orient`
* `box-pack`
* `box-align`
* `flex-direction`
::-webkit-file-upload-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-file-upload-button`** représente le bouton d'un élément `<input>` de type `file`.

Ce pseudo-élément n'est pas standard et est uniquement pris en charge par les navigateurs basés sur WebKit/Blink.

Syntaxe
-------


```css
selecteur::-webkit-file-upload-button
```

Exemples
--------

### CSS


```css
input,
label {
  display: block;
}

input[type="file"]::-webkit-file-upload-button {
  border: 1px solid grey;
  background: #fffaaa;
}
```

### HTML


```html
<form>
  <label for="fileUpload">Uploader un fichier</label><br />
  <input type="file" id="fileUpload" />
</form>
```

### Résultat

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.
::cue-region
============

**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 **`::cue-region`** correspond à une piste WebVTT de l'élément ciblé. Il peut être utilisé afin de mettre en forme des sous-titres et autres indications textuelles de pistes VTT.


```css
::cue-region {
  color: yellow;
  font-weight: bold;
}
```

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

Les règles utilisant `::cue-region` sont limitées aux propriétés CSS suivantes :

* `background` ainsi que les propriétés détaillées correspondantes
* `color`
* `font` ainsi que les propriétés détaillées correspondantes
* `line-height`
* `opacity`
* `outline` ainsi que les propriétés détaillées correspondantes
* `ruby-position`
* `text-combine-upright`
* `text-decoration` ainsi que les propriétés détaillées correspondantes
* `text-shadow`
* `visibility`
* `white-space`

Les propriétés sont appliquées à l'intégralité des indications textuelles comme si celles-ci formaient une seule unité. La seulle exception à ce comportement est l'application de `background` (et/ou des propriétés détaillées correspondantes) : cette propriété s'applique distinctement à chaque partie du texte séparément afin d'éviter de masquer ou d'obscurcir de grandes zones de texte sur le média.

Syntaxe
-------

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

**Note :** Un exemple doit être construit pour cette page, n'hésitez pas à le faire sur la version anglaise d'abord avant de le reporter ici.

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-cue-region-pseudo-element |

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

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

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

* Les autres sélecteurs WebVTT :
    + `::cue`
    + `:past`
    + `:future`
box-flex-group
==============

**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 Flexbox (en-US) pour plus d'informations.

La propriété CSS **`box-flex-group`** permet d'affecter un élément fils de la boîte flexible à un groupe.


```css
/\* Un entier désignant le groupe \*/
/\* Type <integer> \*/
box-flex-group: 1;
box-flex-group: 5;

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


Les éléments flexibles sont affectés à des groupes. Le premier groupe sera désigné par l'indice 1 et les groupes suivants par 2, 3, et ainsi de suite. Lorsque l'espace restant dans la boîte est réparti, le moteur prend d'abord en compte les éléments du premier groupe et répartit l'espace entre les différents éléments de ce groupe selon leurs flexibilités relatives. Une fois l'espace augmenté au maximum, le moteur passe au groupe qui suit en utilisant l'espace restant et ainsi de suite. Si, une fois l'ensemble des groupes traités, il y a encore de l'espace, celui-ci est réparti grâce à la propriété `box-pack`.

Si la boîte dépasse une fois que l'espace pour l'élément fils a été calculé, l'espace est alors retiré (chaque groupe est examiné dans l'ordre et l'espace est retiré selon la flexibilité de chaque élément). Les éléments ne sont pas réduits en deçà de leurs largeurs minimales.

Syntaxe
-------

Cette propriété est définie avec un entier positif (`<integer>`).

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

|  |  |
| --- | --- |
| Valeur initiale | `1` |
| Applicabilité | les éléments fils dans le flux des éléments de boîte |
| 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
--------

### Utilisation simple

Dans la spécification originale, `box-flex-group` pouvait être utilisée afin d'affecter des enfants flexibles à différents groupes parmi lesquels répartir l'espace flexible :


```css
article:nth-child(1) {
  -webkit-box-flex-group: 1;
}

article:nth-child(2) {
  -webkit-box-flex-group: 2;
}
```


Cette propriété a uniquement été prise en charge dans les navigateurs WebKit avec un préfixe. Les versions suivantes de la spécification ne contiennent pas cette propriété. La distribution de l'espace à l'intérieur d'un conteneur flexible est désormais gérée par `flex-basis`, `flex-grow`, et `flex-shrink`.

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-flex`
* `box-ordinal-group`
* `box-pack`
CSS Masks
=========

***CSS Masking*** (ou « masques CSS ») est un module CSS qui définit les moyens, dont les masques et le *clipping*, pour dissimuler des parties d'éléments visuels, partiellement ou en totalité.

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

### Propriétés

* `clip` 
Obsolète
* `clip-path`
* `clip-rule`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
* `mask-type`
Spécifications
--------------

| Specification |
| --- |
| CSS Masking Module Level 1  |
Combinateur de voisins directs
==============================

Le **combinateur de voisin direct** (`+`) sépare deux sélecteurs et ne fait correspondre le second élément que s'il suit *immédiatement* le premier élément, et si les deux sont des enfants du même élément parent.


```css
/\* Ne cible que les paragraphes situés directement après une image \*/
img + p {
  font-style: bold;
}
```

Syntaxe
-------


```css
/\* L'espace blanc autour du combinateur + est facultatif mais recommandé. \*/
premier\_element + second\_element { propriétés de style }
```

Exemples
--------

### CSS


```css
li:first-of-type + li {
  color: red;
}
```

### HTML


```html
<ul>
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
</ul>
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # adjacent-sibling-combinators |

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

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

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

* Les combinateur de voisins généraux
direction
=========

La propriété **`direction`** doit être paramétrée afin de correspondre à la direction du texte: `rtl` (*Right To Left* pour droite à gauche) pour les textes en hébreu ou en arabe et `ltr` (*Left To Right* pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant l'attribut `dir` en HTML) plutôt qu'avec une feuille de style CSS.

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

La propriété définit la direction principale du texte des éléments de type bloc et celle des éléments incorporés créés par la propriété `unicode-bidi`. Elle définit également l'alignement par défaut du texte et des éléments de type bloc, ainsi que le sens de progression des cellules dans une ligne de tableau.

Contrairement à l'attribut HTML `dir`, la propriété `direction` n'est pas héritée pour les cellules depuis les colonnes d'un tableau car l'héritage CSS suit l'arborescence du document et les cellules sont à l'intérieur des lignes et non à l'intérieur des colonnes.

Les propriétés `direction` et `unicode-bidi` sont les deux seuls propriétés qui ne sont pas affectés par la propriété raccourcie `all`.

Syntaxe
-------


```css
direction: ltr;
direction: rtl;

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

### Valeurs

`ltr`

La valeur par défaut qui correspond à une disposition de la gauche vers la droite pour le texte et les autres éléments.

`rtl`

Le texte et les autres éléments vont de la droite vers la gauche.

Afin que la propriété `direction` ait un effet sur les éléments en ligne, il faut que la valeur de la propriété `unicode-bidi` soit `embed` ou `override`.

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

|  |  |
| --- | --- |
| Valeur initiale | `ltr` |
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | Not animatable |

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

direction =   
  ltr  |  
  rtl    
  
```

Exemples
--------

### CSS


```css
blockquote {
  direction: rtl;
}
```

### HTML


```html
<blockquote>
  Du reste, depuis son bain dans la mare aux larmes, tout était changé&nbsp;: la
  salle, la table de verre, et la petite porte avaient complétement disparu.
</blockquote>
```

### Résultat

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

| Specification |
| --- |
| CSS Writing Modes Level 4 # direction |

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

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

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

* `unicode-bidi`
* `writing-mode`
@font-feature-values
====================

La règle @ **`@font-feature-values`** permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété `font-variant-alternates` afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.


```css
@font-feature-values Font One {
  /\* On active la caractéristique nice-style
 sur Font One \*/
  @styleset {
    nice-style: 12;
  }
}

@font-feature-values Font Two {
  /\* On active la caractéristique nice-style
 sur Font Two \*/
  @styleset {
    nice-style: 4;
  }
}

…
/\* Indépendamment de la police \*/
.nice-look {
  font-variant-alternates: styleset(nice-style);
}
```


La règle @ `@font-feature-values` peut être utilisée au plus haut niveau d'une feuille de style et aussi au sein d'un groupe de règles conditionnelles.

Syntaxe
-------

### Blocs liés aux caractéristiques

`@swash`

Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle `swash()`. Une telle caractéristique est définie avec une seule valeur : `ident1: 2` est valide alors que `ident2: 2 4` est invalide.

`@annotation`

Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle `annotation()`. Une telle caractéristique est définie avec une seule valeur : `ident1: 2` est valide alors que `ident2: 2 4` est invalide.

`@ornaments`

Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle `ornaments()`. La caractéristique d'ornement est définie avec une seule valeur : `ident1: 2` est valide alors que `ident2: 2 4` est invalide.

`@stylistic`

Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle `stylistic()`. Une telle caractéristique est définie avec une seule valeur : `ident1: 2` est valide alors que `ident2: 2 4` est invalide.

`@styleset`

Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle `styleset()`. Plusieurs valeurs peuvent être utilisées pour cette caractéristique : `ident1: 2 4 12 1` correspondra aux valeurs OpenType `ss02`, `ss04`, `ss12`, `ss01`. Les valeurs supérieures à `99` sont valides mais ne correspondent à aucune valeur OpenType et sont donc ignorées.

`@character-variant`

Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle `character-variant()`. Pour cette définition, on peut utiliser une ou deux valeurs : `ident1: 2` correspond à `cv02=1` et `ident2: 2 4` correspond à `cv02)4`, en revanche `ident2: 2 4 5` est invalide.

### Syntaxe formelle
```

@font-feature-values =   
  @font-feature-values <family-name># { <declaration-rule-list> }    
  
<family-name> =   
  <string>         |  
  <custom-ident>+    
  
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-values |

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

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

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

* La propriété `font-variant-alternates` qui utilise la valeur définie par cette règle @.
padding-bottom
==============

La propriété **`padding-bottom`** d'un élément ajuste la hauteur de la boîte de remplissage (*padding*) en haut de l'élément. La zone de remplissage correspond à l'espace entre le contenu et la bordure. Contrairement à `margin-bottom`, `padding-bottom` ne peut pas recevoir de valeurs négatives.

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

La propriété raccourcie `padding` permet de paramétrer les dimensions des quatre côtés de cette boîte (y compris `padding-bottom` donc).

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
padding-bottom: 0.5em;
padding-bottom: 0;
padding-bottom: 2cm;

/\* Valeurs de proportions \*/
/\* Type <percentage> \*/
padding-bottom: 10%;

/\* Valeurs globales \*/
padding-bottom: inherit;
padding-bottom: initial;
padding-bottom: unset;
```

### Valeurs

`<length>`

Cette valeur définit une hauteur positive. Voir `<length>` pour plus de détails.

`<percentage>`

Un pourcentage en rapport avec la largeur du bloc englobant. Voir `<percentage>` pour plus de détails.

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`. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Valeur calculée | le pourcentage tel que spécifié ou une longueur absolue |
| Type d'animation | une longueur |

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

padding-bottom =   
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

Exemples
--------

### HTML


```html
<p class="padd">
  Elle n’avait pas bu la moitié de la bouteille, que sa tête touchait au plafond
  et qu’elle fut forcée de se baisser pour ne pas se casser le cou.
</p>
```

### CSS


```css
.padd {
  padding-bottom: 5em;
  border: solid 1px;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-physical |

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

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

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

* Le modèle de boîtes CSS
* La propriété raccourcie `padding` qui permet de paramétrer `padding-bottom`, `padding-right`, `padding-top` et `padding-left`.
caption-side
============

La propriété **`caption-side`** permet de choisir l'emplacement de la légende d'un tableau (représentée par l'élément `<caption>` du tableau). Les valeurs sont relatives au mode d'écriture (cf. `writing-mode`) du tableau.

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

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
/\* Valeurs directionnelles \*/
caption-side: top;
caption-side: bottom;

/\* Valeurs logiques \*/
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;

/\* Valeur globales \*/
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: revert-layer;
caption-side: unset;
```


La propriété `caption-side` se paramètre à l'aide d'un des mots-clés suivants.

### Valeurs

`top`

Un mot-clé qui indique que la boîte de la légende doit être positionnée au-dessus du tableau.

`bottom`

Un mot-clé qui indique que la boîte de la légende doit être positionnée en dessous du tableau.

`block-start`

Un mot-clé qui indique que la boîte de la légende doit être positionnée au bord du tableau situé au début de l'axe de bloc.

`block-end`

Un mot-clé qui indique que la boîte de la légende doit être positionnée au bord du tableau situé à la fin de l'axe de bloc.

`inline-start`

Un mot-clé qui indique que la boîte de la légende doit être positionnée au bord du tableau situé au début de l'axe en ligne.

`inline-end`

Un mot-clé qui indique que la boîte de la légende doit être positionnée au bord du tableau situé à la fin de l'axe en ligne.

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

|  |  |
| --- | --- |
| Valeur initiale | `top` |
| Applicabilité | éléments qui sont des légendes de tableaux |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

caption-side =   
  top     |  
  bottom    
  
```

Exemples
--------

### CSS


```css
.top caption {
  caption-side: top;
}

.bottom caption {
  caption-side: bottom;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid blue;
}
```

### HTML


```html
<table class="top">
  <caption>
    Une légende au-dessus du tableau
  </caption>
  <tr>
    <td>Des données d'un tableau</td>
    <td>Pfiou encore des données</td>
  </tr>
</table>

<br />

<table class="bottom">
  <caption>
    Une légende en dessous du tableau
  </caption>
  <tr>
    <td>Des données d'un tableau</td>
    <td>Pfiou encore des données</td>
  </tr>
</table>
```

### Résultat

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-caption-side |
| CSS Logical Properties and Values Level 1 # caption-side |

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

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

**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é **`line-break`** définit la façon dont les sauts de ligne sont gérés. Cette propriété affecte uniquement les textes en chinois, japonais ou coréen (CJK).


```css
/\* Valeurs avec un mot-clé \*/
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;

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

Syntaxe
-------

### Valeurs

`auto`

Les sauts de ligne sont gérés avec la règle par défaut.

`loose`

Les sauts de ligne sont appliqués afin d'obtenir des lignes courtes (comme pour un journal). L'agent utilisateur fixera une règle souple en fonction des conventions liées à la langue utilisée.

`normal`

L'agent utilisateur utilisera les règles normales liées à la langue utilisée

`strict`

L'agent utilisateur utilisera des règles strictes et passera à la ligne dès que ce sera nécessaire au vu des caractères du langage utilisé.

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

line-break =   
  auto      |  
  loose     |  
  normal    |  
  strict    |  
  anywhere    
  
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # line-break-property |

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

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