recursal/MDN huggingface dataset:
symbols()
=========

La fonction **`symbols()`** permet de définir des styles pour les compteurs en ligne, directement comme valeur de la propriété CSS. À la différence des styles définis avec `@counter-style`, ces styles sont anonymes. La fonction `symbols()` ne possède pas toute la flexibilité offerte par la règle @ `@counter-style` mais peut s'avérer utile dans des cas où le style nécessaire n'est utilisé qu'une seule fois et où il n'est pas nécessaire d'utiliser toutes les options fournies par `@counter-style`.

Syntaxe
-------
```

symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
```


`<symbols-type>` est l'un des mots-clés suivants :

* `cyclic` : le système utilisera les différentes valeurs les unes à la suite des autres, de façon cyclique.
* `numeric` : le système interprètera les valeurs fournies comme une suite numérique composant un système de numération.
* `alphabetic` : le système interprètera les valeurs fournies comme les chiffres d'un système de numération alphabétique (par exemple : A, B, C, AA, AB, AC, etc.) sans zéro.
* `symbolic` : le système parcourt les différentes valeurs fournies et en affiche une de plus à chaque cycle.
* `fixed` : le système affiche chaque symbole une fois puis poursuit avec les chiffres arabes.
Exemples
--------

### HTML


```html
<ol>
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
  <li>Cinq</li>
</ol>
```

### CSS


```css
ol {
  list-style: symbols(alphabetic "\*" "\2020" "\2021");
}
```

### Résultat

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # symbols-function |

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

* `@counter-style`
* `list-style-type` et la propriété raccourcie correspondante : `list-style`.
animation-duration
==================

La propriété **`animation-duration`** définit la durée d'une animation pour parcourir un cycle.

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

La valeur par défaut est `0s`, ce qui indique qu'aucune animation ne doit avoir lieu.

Généralement, on passera par la propriété raccourcie `animation` afin de définir, en une seule déclaration, les différentes propriétés liées aux animations.

Syntaxe
-------


```css
animation-duration: 6s;
animation-duration: 120ms;
animation-duration: 1s, 15s;
animation-duration: 10s, 30s, 230ms;
```

### Valeurs

`<time>`

La durée d'un cycle pour l'animation. Cette valeur peut être indiquée en secondes (`s` comme suffixe pour l'unité) ou en millisecondes (`ms` comme suffixe pour l'unité). Si aucune unité n'est définie, la déclaration sera considérée comme invalide.


**Note :** Les valeurs négatives sont considérées comme invalides. Certaines implémentations, préfixées, considèrent parfois que ces valeurs sont synonymes de `0s`.

**Note :** Lorsqu'on utiliser plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment 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 | `0s` |
| 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-duration =   
  <time [0s,∞]>#    
  
```

Exemples
--------

### CSS


```css
p {
  animation-duration: 15s;
  animation-name: glissement;
  animation-iteration-count: infinite;
}
@keyframes glissement {
  from {
    margin-left: 100%;
    width: 300%;
  }

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

### HTML


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

### Résultat

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-duration |

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`
column-rule-style
=================

La propriété **`column-rule-style`** permet de définir le style de la ligne tracée entre plusieurs colonnes lorsqu'on utilise une disposition en colonnes.

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

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
column-rule-style: none;
column-rule-style: hidden;
column-rule-style: dotted;
column-rule-style: dashed;
column-rule-style: solid;
column-rule-style: double;
column-rule-style: groove;
column-rule-style: ridge;
column-rule-style: inset;
column-rule-style: outset;

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


La propriété `column-rule-style` avec une valeur unique de type `<br-style>`.

### Valeurs

`<br-style>`

Un mot-clé (défini comme pour `border-style`) qui permet de définir le style appliqué au trait. Les épaisseurs résultantes sont calculées avec la même méthode que pour les bordures (cf. *collapsing border model*).

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

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

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

column-rule-style =   
  <line-style>    
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

Exemples
--------

### CSS


```css
.exemple {
  border: 10px solid #000000;

  columns: 3;
  column-rule-width: thick;
  column-rule-color: blue;
  column-rule-style: dashed;
}
```

### HTML


```html
<p class="exemple">
  « Mais alors, » pensa Alice, « ne serai-je donc jamais plus vieille que je ne
  le suis maintenant ? D’un côté cela aura ses avantages, ne jamais être une
  vieille femme. Mais alors avoir toujours des leçons à apprendre ! Oh, je
  n’aimerais pas cela du tout. » « Oh ! Alice, petite folle, » se répondit-elle.
  « Comment pourriez-vous apprendre des leçons ici ? Il y a à peine de la place
  pour vous, et il n’y en a pas du tout pour vos livres de leçons. »
</p>
```

### Résultat

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

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

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

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

La **valeur initiale** d'une propriété CSS est définie par la spécification et varie selon qu'une propriété est héritée ou non.

* Pour les propriétés héritées, la valeur initiale est uniquement utilisée pour l'élément racine lorsqu'il n'y a pas de valeur définie pour cet élément.
* Pour les propriétés non-héritées, la valeur initiale est utilisée pour n'importe quel élément lorsque la valeur n'est pas définie pour cet élément.

Le mot-clé `initial` a été ajouté en CSS3 afin de permettre aux auteurs d'utiliser cette valeur de façon explicite.

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # specified-value |

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

* La référence CSS
* La notion de valeur définie
* La notion de valeur calculée
* La notion de valeur utilisée
* La notion de valeur réelle
* `initial`
:focus
======

La pseudo-classe **`:focus`** permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l'aide du clavier, soit il est activé avec la souris comme par exemple le champ d'un formulaire).


```css
/\* Cible n'importe quel élément <input> \*/
/\* uniquement lorsqu'il a le focus \*/
input:focus {
  color: red;
}
```


Cette pseudo-classe ne s'applique qu'aux éléments avec le focus, elle ne s'applique pas à ses parents (comme `:checked`, `:enabled` mais pas comme `:active` ou `:hover`).

Syntaxe
-------

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

### CSS


```css
.prenom:focus {
  background: yellow;
  color: red;
}

.nom:focus {
  background: yellow;
  color: lime;
}
```

### HTML


```html
<input class="prenom" value="Rouge si focus" />
<input class="nom" value="Vert si focus" />
```

### Résultat

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

Il faut s'assurer que l'indicateur visuel de focus puisse être vu par des personnes ayant une vision faible. Cela pourra d'autant plus bénéficier aux personnes qui consultent le document dans un endroit fortement éclairé (dehors au soleil par exemple). La recommandation WCAG 2.1 SC 1.4.11 Non-Text Contrast nécessite un contraste minimum de 3 à 1.

* Indicateurs visuels de focus accessibles : Conseils sur la conception d'indicateurs utiles et utilisables (en anglais)
### `:focus { outline: none; }`

Il ne faut jamais retirer l'indicateur de focus sans le remplacer par un autre indicateur qui respecte la recommandation WCAG 2.1 SC 1.4.11 Non-Text Contrast :

* Ne jamais retirer les bordures/contours CSS (en anglais)
Spécifications
--------------

| Specification |
| --- |
| HTML Standard # selector-focus |
| Selectors Level 4 # focus-pseudo |

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

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

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

* `:focus-visible` 
Expérimental
* `:focus-within`
<frequency>
===========

Le type de donnée CSS **`<frequency>`** permet de représenter des fréquences (par exemple la hauteur d'une voie). Ce type n'est actuellement utilisé pour aucune propriété CSS.

Syntaxe
-------

Une valeur de type `<frequency>` se compose d'une valeur `<number>` suivi immédiatement d'une unité de fréquence. Comme pour les autres dimensions CSS, il n'y a pas d'espace entre le nombre et le littéral de l'unité.

### Unités

`Hz`

Permet de représenter des fréquences exprimées en Hertz (par exemple `0Hz`, `1500Hz`, `10000Hz`)

`kHz`

Permet de représenter des fréquences exprimées en kilohertz (par exemple `0kHz`, `1.5kHz`, `10kHz`).

Bien que la valeur nulle puisse être représentée avec le même littéral pour les deux unités, l'unité ne doit pas être absente sinon la valeur sera interprétée comme une valeur de longueur (type `<length>`) et ne représentera ni `0Hz` ni `0kHz`. Bien que les unités CSS soient insensibles à la casse, c'est une bonne pratique que d'utiliser un H majuscule pour `Hz` et `kHz` car selon le système international, Hertz est un nom de famille.

Exemples
--------

### Valeurs valides


```css
12Hz     Entier positif
4.3Hz    Flottant
14KhZ    Unité insensible à la casse
+0Hz     Zero avec un signe + et une unité
-0kHz    Zero avec un signe - et une unité
```

### Valeurs invalides


```css
12.0     Cette valeur est un nombre pas une fréquence (il manque l'unité).
7 Hz     Aucun espace n'est autorisé entre le nombre et l'unité.
0        Bien qu'un zéro puisse être utilisé sans unité pour une longueur, ce n'est pas le cas pour une fréquence.
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
@color-profile
==============

La règle @ CSS **`@color-profile`** définit et nomme un profil de couleur qui peut être utilisé ensuite avec la fonction `color()` afin d'indiquer une couleur.

Syntaxe
-------


```css
@color-profile --swop5c {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}
```

### Descripteurs

`src`

Indique l'URL où sont situées les informations sur le profil de couleur.

`rendering-intent`

Si le profil de couleur contient plusieurs indications de rendu, ce descripteur permet de sélectionner celui à utiliser pour définir la correspondance de la couleur sur les gamuts plus petits pour lesquels ce profil est défini.

Si ce descripteur est utilisé, sa valeur doit être l'un des mots-clés suivants :

`relative-colorimetric`

La colorimétrie relative au média implique de garder inchangées les couleurs sources qui sont présentes dans le gamut du médium cible, relativement aux points blancs respectifs du média. Les couleurs sources situées en dehors du gamut du medium cible sont ramenées aux couleurs des bords du gamut en utilisant différentes méthodes.

`absolute-colorimetric`

La colorimétrie absolue ICC implique de garder inchangées les couleurs sources qui sont présentes dans le gamut du médium cible, relativement au blanc adopté (un diffuseur parfaitement réfléchissant). Les couleurs sources situées en dehors du gamut du medium cible sont ramenées aux couleurs des bords du gamut en utilisant différentes méthodes.

`perceptual`

Cette méthode est souvent le choix préféré pour les images, notamment lorsqu'il y a des différences conséquentes entre la source et la destination (par exemple une image sur un écran, reproduite sur une impression réfléchissante). Elle prend les couleurs de l'image source et optimise l'apparence pour le medium de destination en utilisant des méthodes propriétaires.

`saturation`

Cette option vise à préserver la saturation relative (chroma) de l'original et à conserver les couleurs unies pures. Toutefois, certains problèmes d'interopérabilité existent comme avec l'indication `perceptual`.


Exemples
--------


```css
@color-profile --swop5c {
  src: url("https://example.org/SWOP2006\_Coated5v2.icc");
}

.header {
  background-color: color(--swop5c 0% 70% 20% 0%);
}
```

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

| Specification |
| --- |
| CSS Color Module Level 5 # at-profile |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
border-inline-style
===================

La propriété **`border-inline-style`** permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe en ligne. Cette propriété logique correspond à différentes propriétés physiques selon le mode d'écriture, la direction et l'orientation du texte. Autrement dit, cette propriété correspond à `border-top-style` et `border-bottom-style` ou à `border-left-style` et `border-right-style` selon les valeurs des propriétés `writing-mode`, `direction` et `text-orientation`.

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

Pour les autres côtés, la bordure peut être mise en forme grâce à la propriété `border-block-style` qui définit `border-block-start-style` et `border-block-end-style`.

Syntaxe
-------


```css
/\* Valeurs de type <'border-style'> \*/
border-inline-style: dashed;
border-inline-style: dotted;
border-inline-style: revert;
border-inline-style: groove;
```

### Valeur

`<'border-style'>`

Le style de la ligne pour la bordure. Voir `border-style`.

### Syntaxe formelle
```

border-inline-style =   
  <'border-top-style'>{1,2}    
  
```

Exemples
--------

### HTML


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

### CSS


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

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

### Résultat

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

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

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

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 qui correspondent à cette propriété logique : `border-top-style`, `border-right-style`, `border-bottom-style`, `border-left-style`.
* `writing-mode`, `direction`, `text-orientation`
padding-inline-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é **`padding-inline-end`** définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété `padding-top`, `padding-right`, `padding-bottom` ou `padding-left` selon les valeurs définies pour `writing-mode`, `direction` et `text-orientation`.

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

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

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
padding-inline-end: 10px;
padding-inline-end: 1em;

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

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

### Valeurs

La propriété `padding-inline-end` peut prendre les mêmes valeurs que la propriété `padding-left`.

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-end =   
  <'padding-top'>    
  
```

Exemples
--------

### HTML


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

### CSS


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

.exemple {
  writing-mode: vertical-lr;
  padding-inline-end: 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`
CSS Text
========

***CSS Text*** (ou module texte de CSS) est un module CSS qui définit comment effectuer des manipulations de texte, comme les coupures de mots, la justification et l'alignement, la gestion des espaces et les transformations de texte.

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

### Propriétés

* `hanging-punctuation`
* `hyphens`
* `letter-spacing`
* `line-break`
* `overflow-wrap`
* `tab-size`
* `text-align`
* `text-align-last`
* `text-indent`
* `text-justify`
* `text-size-adjust`
* `text-transform`
* `white-space`
* `word-break`
* `word-spacing`
Spécifications
--------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1  |
| CSS Text Module Level 3  |
| CSS Text Module Level 4  |
:root
=====

La pseudo-classe **`:root`** permet de cibler la racine de l'arbre représentant le document. Pour un document HTML, `:root` ciblera donc l'élément `<html>` et aura le même comportement que le sélecteur `html` mais sa spécificité sera plus forte.


```css
/\* Sélectionne l'élément racine du document \*/
/\* Pour un document HTML, c'est <html> \*/
:root {
  background: yellow;
}
```

Syntaxe
-------

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

`:root` peut être utile lorsqu'on déclare des propriétés CSS personnalisées globales :


```css
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # root-pseudo |

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

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

**Attention :** Cette propriété a été remplacée par la propriété `break-before`.

La propriété CSS **`page-break-before`** permet d'ajuster les sauts de page placés *avant* l'élément courant.Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un `<div>` qui ne génère pas de boîte.


```css
/\* Valeurs avec un mot-clé \*/
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;

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

Synonymes avec `break-before`
-----------------------------

La propriété `page-break-before` est désormais remplacée par `break-before`.

Pour des raisons de compatibilité, si on traite `page-break-before` comme un synonyme de `break-before`, on pourra utiliser le tableau de correspondance suivant :

| `page-break-before` | `break-before` |
| --- | --- |
| `auto` | `auto` |
| `left` | `left` |
| `right` | `right` |
| `avoid` | `avoid` |
| `always` | `page` |

Syntaxe
-------

### Valeurs

`auto`

Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).

`always`

Le saut de page est toujours forcé avant l'élément.

`avoid`

Les sauts de page sont évités avant l'élément.

`left`

Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page gauche.

`right`

Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page droite.

`recto` 
Expérimental

Si la page progresse de gauche à droite, cette valeur est équivalente à `right`. Si la page progresse de droite à gauche, elle est synonyme de `left`.

`verso` 
Expérimental

Si la page progresse de gauche à droite, cette valeur est équivalente à `left`. Si la page progresse de droite à gauche, elle est synonyme de `right`.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | les éléments de bloc dans le flux normal de l'élément racine. Les agents utilisateurs peuvent également l'appliquer sur d'autres éléments comme `table-row`. |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

page-break-before =   
  auto     |  
  always   |  
  avoid    |  
  left     |  
  right    |  
  inherit    
  
```

Exemples
--------


```css
/\* Pour éviter d'avoir un saut de page avant \*/
/\* une note dans un div \*/
div.note {
  page-break-before: avoid;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # page |
| CSS Paged Media Module Level 3 # page-break-before |

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

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

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

* `break-before`
* `break-after`
* `break-inside`
* `page-break-after`
* `page-break-inside`
* `orphans`
* `widows`
Jeux de caractères CSS
======================

**Les jeux de caractères pour CSS** est un module CSS qui permet de définir le jeu de caractères utilisé dans les feuilles de style.

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

### Règles @

* `@charset`
Spécifications
--------------

| Specification |
| --- |
| Unknown specification  |

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

{{Compat}}