recursal/MDN huggingface dataset:
padding-left
============

La propriété **`padding-left`** d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La zone de remplissage correspond à l'espace entre le contenu et la bordure. `padding-left` 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-left` donc).

Syntaxe
-------


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

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

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

### Valeurs

`<length>`

Cette valeur définit une largeur 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-left =   
  <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-left: 20%;
  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-top`, `padding-right`, `padding-bottom` et `padding-left`.
:first
======

La pseudo-classe **`:first`**, liée à la règle @ `@page` décrit la mise en forme de la première page lors de l'impression d'un document. ( voir `:first-child` pour le premier élément d'un noeud )


```css
/\* Cible le contenu de la première page \*/
/\* lorsqu'on imprime \*/
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}
```


Seul un sous-ensemble restreint de propriétés peut être modifié via cette pseudo-classe :

* Les propriétés liées aux marges : `margin`
* Les propriétés liées aux lignes veuves et orphelines : `orphans` et `widows`
* Les propriétés liées aux sauts de page : `page-break`

De plus, seules les unités absolues peuvent être utilisées pour les marges.

Syntaxe
-------

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

### CSS


```css
@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}
```

### HTML


```html
<p>Première page.</p>
<p>Deuxième page.</p>
<button>Imprimer</button>
```

### JavaScript


```js
document.querySelector("button").addEventListener("click", () => {
  window.print();
});
```


Appuyez sur le bouton "Imprimer!" pour imprimer l'exemple. Les mots sur la première page doivent être quelque part autour du centre, tandis que les autres pages auront leur contenu à la position par défaut.

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

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

* `@page`
* `:left`
* `:right`
font-variant-position
=====================

La propriété **`font-variant-position`** permet d'utiliser des glyphes de plus petite taille positionnés en exposant ou en indice par rapport à la ligne de base utilisée (qui reste la même).

Généralement, les glyphes utilisés sont ceux utilisés pour les éléments HTML `<sub>` et `<sup>`.


```css
/\* Valeurs avec un mot-clé \*/
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;

/\* Valeurs globales \*/
font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: unset;
```


Lorsque ces glyphes alternatifs sont activés, si un caractère de l'ensemble concerné ne possède pas de glyphe correspondant, l'ensemble des caractères est affiché avec une méthode de secours qui synthétise ces glyphes.

Ces glyphes alternatifs possèdent la même boîte em et la même ligne de base que le reste du texte. La modification est purement graphique et il n'y a pas d'impact sur la hauteur de ligne ou sur les autres caractéristiques liées aux boîtes.

Syntaxe
-------

La valeur de cette propriété est définie grâce à l'un des mots-clés définis ci-après.

### Valeurs

`normal`

Les glyphes alternatifs sont désactivés.

`sub`

Ce mot-clé permet d'utiliser les glyphes utilisés en indice.

`super`

Ce mot-clé permet d'utiliser les glyphes utilisés en exposant.

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

|  |  |
| --- | --- |
| Valeur initiale | `normal` |
| Applicabilité | all elements and text. S'applique aussi à `::first-letter` et `::first-line`. |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |

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

font-variant-position =   
  normal  |  
  sub     |  
  super     
  
```

Exemples
--------

### CSS


```css
.exemple {
  font-variant-position: super;
}
```

### HTML


```html
<p>
  Alice <span class="exemple">ne s’était pas fait le moindre mal.</span>
  Vite elle se remet sur ses pieds et regarde en l’air&nbsp;; mais tout est noir
  là-haut. Elle voit devant elle un long passage et le Lapin Blanc qui court à
  toutes jambes.
</p>
```

### Résultat

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-position-prop |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
scroll-margin-right
===================

La propriété **`scroll-margin-right`** définit la marge de défilement de l'élément sur le côté droit. La zone de défilement est déterminée en prenant la boîte de bordure modifiée, en prenant le rectangle englobant puis en ajoutant les décalages indiqués.

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

Syntaxe
-------


```css
/\* Valeurs de longueur \*/
/\* Type <length> \*/
scroll-margin-right: 10px;
scroll-margin-right: 1em;

/\* Valeurs globales \*/
scroll-margin-right: inherit;
scroll-margin-right: initial;
scroll-margin-right: unset;
```

### Valeurs

`<length>`

Un décalage par rapport au côté correspondant du conteneur de défilement.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

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

scroll-margin-right =   
  <length>    
  
```

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

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

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

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

La pseudo-classe **`:left`**, liée à la règle `@page`, permet de cibler les pages de gauche lors d'une impression. Ceci permet de mettre en forme spécifiquement les pages de gauche.


```css
/\* Sélectionne le contenu des pages gauches \*/
/\* lors de l'impression \*/
@page :left {
  margin: 2in 3in;
}
```


La position de la page soit à gauche ou à droite dépend de la direction d'écriture globale du document. Par exemple, si la première page est selon la direction « gauche à droite » alors elle sera une page `:right`, si elle est définie de « droite à gauche » ce sera une page `:left`.

**Note :** Il n'est pas possible de changer toutes les propriétés CSS. Seules les propriétés `margin`, `padding`, `border` et `background` de **la boîte correspondant à la page** peuvent être modifiées. Toutes les autres propriétés CSS seront ignorées. Seule la boîte correspondant à la page pourra être affectée, le contenu du document ne pourra pas être modifié.

Syntaxe
-------

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


```css
@page :left {
  margin: 2cm 3cm;
}
```

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

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

* `@page`
* `:first`
* `:right`
page-break-inside
=================

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

La propriété **`page-break-inside`** ajuste la façon dont sont appliqués les sauts de page au sein de l'élément courant.


```css
/\* Valeurs avec un mot-clé \*/
page-break-inside: auto;
page-break-inside: avoid;

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

Syntaxe
-------

### Valeurs

`auto`

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

`avoid`

L'agent utilisateur évite d'insérer un saut de page au sein de l'élément.

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-inside =   
  avoid    |  
  auto     |  
  inherit    
  
```

Alias avec `break-inside`
-------------------------

La propriété `page-break-inside` a désormais été remplacée par la propriété `break-inside`.

Pour des raisons de compatibilité, `page-break-inside` devrait être considérée par les navigateurs comme synonyme de `break-inside`. De cette façon, les sites utilisant `page-break-inside` pourront continuer de fonctionner. Voici un sous-ensemble des valeurs de cette propriété et des correspondances

| `page-break-inside` | `break-inside` |
| --- | --- |
| `auto` | `auto` |
| `avoid` | `avoid` |

Exemples
--------

### HTML


```html
<div class="page">
  <p>Un premier paragraphe.</p>
  <section class="list">
    <span>Une liste</span>
    <ol>
      <li>Un</li>
      <!-- <li>Deux</li> -->
    </ol>
  </section>
  <ul>
    <li>Un</li>
    <!-- <li>Deux</li> -->
  </ul>
  <p>Un deuxième paragraphe.</p>
  <p>Un troisième paragraphe, un peu plus long.</p>
  <p>
    Un quatrième paragraphe, un peu plus long voire plus long que le troisième.
  </p>
</div>
```

### CSS


```css
.page {
  background-color: #8cffa0;
  height: 90px;
  width: 200px;
  columns: 1;
  column-width: 100px;
}

.list,
ol,
ul,
p {
  break-inside: avoid;
}

p {
  background-color: #8ca0ff;
}

ol,
ul,
.list {
  margin: 0.5em 0;
  display: block;
  background-color: orange;
}

p:first-child {
  margin-top: 0;
}
```

### Résultat

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # page-break-inside |

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-before`
* `orphans`
* `widows`
scroll-padding-right
====================

La propriété **`scroll-padding-right`** est une propriété qui permet de définir le remplissage sur le côté droit entre l'élément et la zone de défilement.

Les propriétés pour le remplissage de la zone de défilement permettent de définir des décalages par rapport à la zone de défilement de l'élément (*scrollport*). On peut ainsi éviter à un élément d'être affiché là où d'autres barres sont présentes ou encore donner plus d'espace entre un élément et les barres de défilement pour y naviguer.

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

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
scroll-padding-right: auto;

/\* Valeurs de longueur \*/
/\* Type <length> \*/
scroll-padding-right: 10px;
scroll-padding-right: 1em;
scroll-padding-right: 10%;

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

### Valeurs

`<length-percentage>`

Un décalage intérieur entre la boîte de défilement et le bord correspondant de l'élément. C'est une longueur ou un pourcentage valide.

`auto`

Le décalage est déterminé par l'agent utilisateur. Cette valeur correspond généralement à `0px` mais le navigateur peut utiliser une heuristique et déterminer si une valeur non nulle est préférable au regard du contexte dans lequel se trouve l'élément.

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

|  |  |
| --- | --- |
| Valeur initiale | `auto` |
| Applicabilité | conteneurs d'ascenseurs |
| Héritée | non |
| Pourcentages | relative to the scroll container's scrollport |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

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

scroll-padding-right =   
  auto                       |  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSS Generated Content
=====================

***CSS Generated Content*** est un module CSS qui définit comment ajouter du contenu à un élément.

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

### Propriétés

* `content`
* `quotes`
Spécifications
--------------

| Specification |
| --- |
| CSS Generated Content Module Level 3  |
:valid
======

La pseudo-classe **`:valid`** permet de cibler tout élément `<input>` ou `<form>` dont la validation (en-US) du contenu s'effectue correctement par rapport au type de donnée attendu. On peut ainsi facilement mettre en forme les champs correctement remplis par l'utilisateur.


```css
input:valid {
  background-color: #ddffdd;
}
```

Syntaxe
-------

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

Cet exemple présente un formulaire dont les éléments se colorent en vert lorsqu'ils sont valides et en rouge lorsqu'ils sont invalides.

### CSS


```css
input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:valid {
  border-color: #008000;
}
```

### HTML


```html
<form>
  <label>Veuillez saisir une URL :</label>
  <input type="url" />
  <br />
  <br />
  <label>Veuillez saisir une adresse électronique :</label>
  <input type="email" required />
</form>
```

### Résultat

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

La couleur rouge est généralement utilisée afin d'indiquer une valeur invalide. Les personnes ayant du mal à différencier les couleurs ne seront pas capables de déterminer la validité du champ si celui-ci n'est pas accompagné d'un indicateur qui n'est pas basé sur une couleur. Pour résoudre ce problème, on pourra utiliser un texte indicatif et/ou une icône.

* Explications des recommendation WCAG 1.4
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
Spécifications
--------------

| Specification |
| --- |
| HTML Standard # selector-valid |
| Selectors Level 4 # validity-pseudos |

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

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

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

* `:invalid`
* `:required`
* `:optional`
* La validation des données d'un formulaire
* Accéder à l'état de validité en JavaScript (en-US)
:playing
========

**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 sélecteur de pseudo-classe CSS **`:playing`** est une pseudo-classe d'état d'une ressource audio, vidéo ou autre type de ressource capable d'être lue ou mise en pause lorsque cet élément est lu.

Une ressource est lue même si elle se trouve en mémoire tampon ou mise en pause pour une raison autre que l'interaction du visiteur qui aurait déclenché sa mise en pause.


```css
:playing {
}
```

Syntaxe
-------

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

### CSS


```css
:playing {
  border: 5px solid green;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # selectordef-playing |

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

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

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

* `:paused`
scroll-snap-align
=================

La propriété **`scroll-snap-align`** définit la position de la boîte d'accroche (*snap positions*) comme un alignement entre la zone d'accroche et le conteneur (la boîte de défilement de l'élément). Les deux valeurs fournies à cette propriété s'appliquent respectivement à l'axe de bloc et à l'axe en ligne. Lorsqu'une seule valeur est fournie, la seconde prendra par défaut la valeur de la première.

Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
scroll-snap-align: none;
scroll-snap-align: start end;
scroll-snap-align: center;

/\* Valeurs globales \*/
scroll-snap-align: inherit;
scroll-snap-align: initial;
scroll-snap-align: unset;
```

### Valeurs

`none`

La boîte ne définit aucune position d'accroche sur cet axe.

`start`

Le point d'alignement situé au début de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.

`end`

Le point d'alignement situé à la fin de l'axe et sur le bord de la boîte de défilement est une position d'accroche sur cet axe.

`center`

Le point d'alignement situé au centre de l'axe et à l'intérieur de la boîte de défilement est une position d'accroche sur cet axe.

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

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

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

scroll-snap-align =   
  [ none | start | end | center ]{1,2}    
  
```

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-snap-align |

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

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

**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 **`::marker`** représente le marqueur d'un élément d'une liste (par exemple la puce ou le numéro de l'élément d'un élément `<li>`). Ce pseudo-élément ne fonctionne que pour les éléments ou pseudo-éléments pour lesquels `display` vaut `list-item` (par défaut c'est le cas des éléments `<li>` et `<summary>`).


```css
::marker {
  color: red;
  font-size: 1.5em;
}
```

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

Seul un sous-ensemble de propriétés CSS peuvent être utilisées pour une règle qui utilise `::marker` :

* `color`,
* `text-combine-upright`, `unicode-bidi` et `direction`
* `content`
* Toutes les propriétés liées aux polices (font).

**Note :** La spécification indique que d'autres propriétés CSS pourraient être prises en charge à l'avenir.

Syntaxe
-------

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

### CSS


```css
li::marker {
  color: red;
}
```

### HTML


```html
<ol>
  <li>Savoir lacer ses chaussures</li>
  <li>Et compter deux par deux.</li>
</ol>
```

### Résultat

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |

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

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

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

* Les éléments HTML relatifs aux listes :
    + `<ul>`
    + `<ol>`
    + `<li>`
* `<summary>`
CSS Color
=========

***CSS Color*** est un module des spécifications CSS qui décrit la gestion des couleurs, les types de donnée associés, la fusion des couleurs et la gestion de l'opacitié. Ce module ne contient pas l'ensemble des propriétés CSS qui prennent une valeur de type `<color>`, toutefois, ces propriétés dépendent des notions et règles définies dans cette spécification.

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

### Propriétés

* `color`
* `opacity`
* `color-adjust`
### Types de données

* `<color>`
Guides
------

Appliquer des couleurs à des éléments HTML grâce à CSS

Un guide décrivant comment utiliser CSS pour colorer différents types de contenu. Cet article couvre l'ensemble des propriétés CSS ayant trait aux couleurs.

Outils
------

Sélecteur de couleurs

Cet outil permet de créer, ajuster et tester des couleurs sur mesure.

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

| Specification |
| --- |
| CSS Color Module Level 4  |
| CSS Color Module Level 5  |

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

{{Compat}}Voir aussi
----------

* Des propriétés liées aux couleurs mais qui font partie d'autres spécifications :
    + `background-color`,
    + `border-color`,
    + `outline-color`,
    + `text-decoration-color`,
    + `text-emphasis-color`,
    + `text-shadow`,
    + `caret-color`,
    + `column-rule-color`
* En CSS, les dégradés ne sont pas des couleurs mais des images.