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

La propriété **`padding-top`** 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-top`, `padding-top` 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-top` donc).

Syntaxe
-------


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

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

/\* Valeurs globales \*/
padding-top: inherit;
padding-top: initial;
padding-top: 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-top =   
  <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-top: 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-top`, `padding-right`, `padding-bottom` et `padding-left`.
::-webkit-meter-suboptimum-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-suboptimum-value`** donne une couleur jaune à l'élément `<meter>` lorsque la valeur de l'attribut est en dehors de l'intervalle haut des valeurs.

Exemples
--------

### CSS


```css
meter::-webkit-meter-suboptimum-value {
  background:
    -webkit-gradient linear,
    left top,
    left bottom;
  height: 100%;
  box-sizing: border-box;
}
```

### HTML


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

### Résultat

**Note :** Cette fonctionnalité ne sera visible que depuis un navigateur 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-even-less-good-value`
* `::-webkit-meter-optimum-value`
<string>
========

Le type de donnée CSS **`<string>`** représente une chaîne de caractères. En CSS, les chaînes de caractères sont présentes dans de nombreuses propriétés comme `content`, `font-family` et `quotes`.

Syntaxe
-------

Une chaîne de caractères CSS est formée d'un ou plusieurs caractères Unicode délimités par des quotes (`'`) ou des doubles quotes (`"`). Une chaîne délimitée par des doubles quotes ne peut pas contenir de double quotes à moins qu'elles soient échappées à l'aide d'une barre oblique inversée (`\`). Le même principe s'applique aux chaînes délimitées par des quotes simples, qui ne peuvent contenir de quotes simples sans qu'elles soient échappés à l'aide d'une barre oblique inversée (`\`).

Le caractère barre oblique inversée doit être échappé afin de faire partie d'une chaîne de caractère.

Les nouvelles lignes ne sont pas acceptées, sauf si elles sont échappées à l'aide d'un caractère de saut de ligne tel que `\A` ou `\00000a`. Toutefois, des chaînes de caractères peuvent s'étendre sur plusieurs lignes. Dans ce cas, il est possible de couper la chaîne en plusieurs lignes en utilisant une barre oblique inversée (`\`) comme dernier caractère de chaque ligne.

Les caractères peuvent être décrits en utilisant leur point de code Unicode hexadécimal, qui doit alors être échappé à l'aide du caractère `\`. `\27` représente par exemple le guillemet droit simple (`'`) et `\A9` le symbole du *copyright* ©.

**Note :** Les entités telles que `&nbsp;` ou `&#8212;` ne peuvent pas être utilisées pour les chaînes de caractères CSS.

Exemples
--------


```css
"Chaîne avec des guillemets doubles"
"Chaîne avec plusieurs \" guillemets doubles"
'Chaîne avec des guillemets simples'
'Chaîne avec plusieurs \' guillemets simples'

"Chaîne avec une \Anouvelle ligne"

"Une grande chaîne \
de caractères"
"Une grande chaîne de caractères"
```


**Note :** on peut également échapper des doubles quotes avec `\22` et les simples quotes avec `\27`.

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

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

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

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

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

* Valeurs et unités en CSS
* Tutoriel - Introduction aux valeurs et unités CSS
* Types de donnée en CSS
mask-border-outset
==================

**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é CSS **`mask-border-outset`** indique la distance entre le masque de la bordure et la boîte de la bordure.

Syntaxe
-------


```css
/\* Valeur de longueur \*/
/\* Type <length> \*/
mask-border-outset: 1rem;

/\* Valeur numérique \*/
/\* Type <number> \*/
mask-border-outset: 1.5;

/\* Décalage vertical | horizontal \*/
mask-border-outset: 1 1.2;

/\* haut | horizontal | bas \*/
mask-border-outset: 30px 2 45px;

/\* haut | droit | bas | gauche \*/
mask-border-outset: 7px 12px 14px 5px;

/\* Valeurs globales \*/
mask-border-outset: inherit;
mask-border-outset: initial;
mask-border-outset: unset;
```


La propriété `mask-border-outset` peut être utilisée avec une, deux, trois ou quatre valeurs. Chaque valeur peut être de type `<length>` ou `<number>`. Les valeurs négatives ne sont pas autorisées.

* Si une seule valeur est utilisée, c'est ce décalage qui est utilisé pour chaque côté.
* Lorsque deux valeurs sont utilisées, la première indique le décalage en haut et en bas et la seconde indique le décalage à gauche et à droite.
* Lorsque trois valeurs sont utilisées, la première indique le décalage avec le côté haut, la deuxième avec le côté gauche et le côté droit et la troisième le décalage avec le côté bas.
* Lorsque quatre valeurs sont indiquées, elles s'appliquent respectivement aux côtés haut, droit, bas et gauche (c'est-à-dire dans le sens des aiguilles d'une montre).
### Valeurs

`<length>`

La distance, avec une dimension, pour le décalage du masque.

`<number>`

Le décalage du masque, exprimé comme un multiple de `border-width`.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | tous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments `defs` et des éléments graphiques |
| Héritée | non |
| Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | discrète |

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

mask-border-outset =   
  [ <length> | <number> ]{1,4}    
  
```

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border-outset |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Sélecteurs de classe
====================

Les **sélecteurs de classe** CSS permettent de cibler des éléments d'un document en fonction du contenu de l'attribut `class` de chaque élément.


```css
/\* Cible tous les éléments ayant la classe "spacious" \*/
.spacious {
  margin: 2em;
}

/\* Cible tous les éléments <li> ayant la classe "spacious" \*/
li.spacious {
  margin: 2em;
}

/\* Cible tous les éléments <li> ayant une classe qui \*/
/\* contient à la fois "spacious" et "elegant" \*/
li.spacious.elegant {
  margin: 2em;
}
```


L'attribut `class` est une liste de termes séparés par des espaces, il est nécessaire qu'un de ces termes corresponde exactement au nom utilisé dans le sélecteur pour que l'élément soit ciblé.

Syntaxe
-------
```

.nomdeclasse { déclarations CSS }
```


Cela est exactement équivalent à l'utilisation du sélecteur d'attribut de la façon suivante :
```

[class~=nomdeclasse] { déclarations CSS }
```

Exemples
--------

### CSS


```css
.classy {
  background-color: skyblue;
}
.toto {
  font-weight: bold;
}
```

### HTML


```html
<div class="classy">Voici un div avec du texte.</div>
<div class="toto classy truc">
  Les éléments peuvent avoir plusieurs classes, le sélecteur fonctionnera tout
  de même !
</div>
<div>En voilà un autre.</div>
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # class-html |

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

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

La propriété **`widows`** définit le nombre minimum de lignes qui peuvent être laissées en haut de la page, région ou colonne suivante. En utilisant la propriété `widows`, on évite d'avoir des veuves sur une seule ligne.


```css
/\* Valeurs entières \*/
/\* type <integer> \*/
widows: 2;
widows: 3;

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


**Note :** En typographie, une ligne veuve est la dernière ligne d'un paragraphe qui apparaît seule en haut d'une nouvelle page (alors que le paragraphe démarrait sur une page antérieure).

Syntaxe
-------

### Valeurs

`<integer>`

Cet entier indique le nombre minimum de lignes qui peuvent apparaître en haut d'une nouvelle page, région ou colonne lorsqu'une rupture intervient. Si la valeur est négative, la déclaration est invalide.

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

|  |  |
| --- | --- |
| Valeur initiale | `2` |
| Applicabilité | les éléments conteneurs de blocs |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | by computed value type |

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

widows =   
  <integer [1,∞]>    
  
```

Exemple
-------

### CSS


```css
div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

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

### HTML


```html
<div>
  <p>Un premier paragraphe avec un peu de texte.</p>
  <p>
    Un deuxième paragraphe avec un peu plus de texte et qui permet d'illustrer
    le fonctionnement de widows.
  </p>
  <p>
    Enfin, un troisième paragraphe avec un peu plus de texte que le premier.
  </p>
</div>
```

### Résult

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

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |

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

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

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

* `orphans`
* Médias paginés
border-block-style
==================

La propriété **`border-block-style`** permet de définir le style pour la bordure sur les côtés d'un élément qui correspondent à l'axe de bloc. 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-inline-style` qui définit `border-inline-start-style` et `border-inline-end-style`.

Syntaxe
-------


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

/\* Valeurs globales \*/
border-block-style: inherit;
border-block-style: initial;
border-block-style: revert;
border-block-style: unset;
```

### Valeur

`<'border-style'>`

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

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

border-block-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-block-style: dashed;
}
```

### Résultat

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

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

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`
:nth-of-type
============

La pseudo-classe CSS **`:nth-of-type()`** permet de cibler les éléments selon leur position parmi les voisins du même type (les mêmes noms de balise).

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

Syntaxe
-------

La pseudo-classe `nth-of-type` ne prend qu'un argument qui représente le motif de répétition pour les éléments ciblés.

Voir `:nth-child` pour une explication plus détaillée de sa syntaxe.


```css
:nth-of-type(<an-plus-b> | even | odd) {
  /\* ... \*/
}
```

Exemples
--------

### Exemple simple

Dans cet exemple nous allons colorer un paragraphe sur deux avec des couleurs différentes et mettre le premier paragraphe en gras.

#### HTML


```html
<div>
  <div>Cet élément n'est pas compté.</div>
  <p>1er paragraphe.</p>
  <p class="fancy">2e paragraphe.</p>
  <div>Cet élément n'est pas compté.</div>
  <p class="fancy">3e paragraphe.</p>
  <p>4e paragraphe.</p>
</div>
```

### CSS


```css
/\* Paragraphes impairs \*/
p:nth-of-type(2n + 1) {
  color: red;
}

/\* Paragraphes pairs \*/
p:nth-of-type(2n) {
  color: blue;
}

/\* Premier paragraphe \*/
p:nth-of-type(1) {
  font-weight: bold;
}

/\* Cela ciblera le 3e paragraphe, car on cible les éléments impairs (2n+1) et qui ont la classe fancy.
Le deuxième paragraphe a bien la classe fancy, mais n'est pas ciblé, car pair (et non :nth-of-type(2n+1)) \*/
p.fancy:nth-of-type(2n + 1) {
  text-decoration: underline;
}
```

### Résultat

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

| Specification |
| --- |
| Selectors Level 4 # nth-of-type-pseudo |

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

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

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

* `:nth-child`
* `:nth-last-of-type`
abs()
=====

La fonction (en-US) CSS **`abs()`** contient un calcul et renvoie la valeur absolue de l'argument, avec le même type que l'argument.

L'instruction `abs(A)` renverra `A` si la valeur numérique `A` est supérieure ou égale à 0. Sinon, elle renverra la valeur de `-1 * A`.

Syntaxe
-------


```css
/\* propriété: abs(expression) \*/
width: abs(20% - 100px);
```


La fonction `abs()` prend une seule expression comme argument.

### Syntaxe formelle
```

<abs()> =   
  abs( <calc-sum> )    
  
<calc-sum> =   
  <calc-product> [ [ '+' | '-' ] <calc-product> ]\*    
  
<calc-product> =   
  <calc-value> [ [ '*' | '/' ] <calc-value> ]\*    
  
<calc-value> =   
  <number>        |  
  <dimension>     |  
  <percentage>    |  
  <calc-keyword>  |  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          |  
  pi         |  
  infinity   |  
  -infinity  |  
  NaN          
  
```

Exemples
--------

### Variables positives

La fonction `abs()` peut être utilisée afin de s'assurer qu'une valeur est toujours positive. Dans l'exemple suivant, on a une propriété personnalisée, `--font-size`, qui est utilisée comme valeur pour `font-size`. Envelopper cette propriété dans un appel à la fonction `abs()` convertira une valeur négative en une valeur positive.


```css
h1 {
  font-size: abs(var(--font-size));
}
```

### Contrôler la direction d'un dégradé

Il est aussi possible d'utiliser la fonction `abs()` pour contrôler la direction d'un dégradé. Dans l'exemple qui suit, en utilisant un angle de `-45deg`, le dégradé commencerait en rouge avant de passer au bleu. En utilisant `abs()` afin de rendre la valeur positive, le dégradé commencera en bleu et passera ensuite au rouge.


```css
div {
  --deg: -45deg;
  background-image: linear-gradient(abs(var(--deg)), blue, red);
}
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # sign-funcs |

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

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

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

* `sign()` (en-US)
<dimension>
===========

Le type de donnée **`<dimension>`** représente une valeur de type `<number>` directement suivie d'une unité : par exemple `10px`.

CSS utilise des dimensions pour définir des distances (type `<length>`), des durées (type `<time>`), des fréquences (type `<frequency>`), des résolutions (type `<resolution>`) ainsi que d'autres quantités.

Syntaxe
-------

La syntaxe d'une valeur de type `<dimension>` est un nombre (valeur de type `<number>`) immédiatement suivi d'une unité représentée par son identifiant. Les identifiants utilisés pour les unités sont insensibles à la casse.

Exemples
--------

### Dimensions valides


```css
12px      12 pixels
1rem      1 rem
1.2pt     1.2 points
2200ms    2200 millisecondes
200hz     200 Hertz
200Hz     200 Hertz (les unités sont insensibles à la casse)
```

### Dimensions invalides


```css
12 px       L'unité doit immédiatement être indiquée après le nombre
12"px"      Les unités sont des identifiants et ne doivent pas être entourées de quotes
```

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
-webkit-mask-box-image
======================

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

La propriété **`-webkit-mask-box-image`** permet de définir l'image de masque utilisée pour la boîte de bordure d'un élément.

* Valeur initiale : `none`
* Applicabilité : à tous les éléments
* Héritée : non
* Type de média : visuel
* Valeur calculée : comme la valeur définie
Syntaxe
-------
```

-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
```


Où :

`<mask-box-image>`

``<uri>()` | <gradient> | none`

`<top>` `<right>` `<bottom>` `<left>`

`<length> | <percentage>`

`<x-repeat>` `<y-repeat>`

`repeat | stretch | round`

### Valeurs

`<uri>`

L'emplacement de la ressource qui doit être utilisée comme image de masque.

`<gradient>`

Une fonction `-webkit-gradient` utilisée pour générer l'image de masque.

`none`

Ce mot-clé indique que la boîte de bordure n'a pas de masque.


`<length>`

Le décalage à appliquer à l'image de masque (cf. `<length>` pour les unités possibles).

`<percentage>`

Le décalage de l'image exprimé en pourcentages relatifs à la dimension de la boîte de bordure de l'élément (la largeur ou la hauteur selon l'axe).

`repeat`

L'image est répétée autant de fois que nécessaire pour remplir la boîte de bordure. On pourra avoir des morceaux d'image si les dimensions de celle-ci ne permettent pas d'en copier un nombre entier sur la boîte.

`stretch`

L'image de masque est étirée pour être contenue exactement dans la boîte de bordure.

`round`

L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure.

Exemples
--------


```css
.exempleUn {
  -webkit-mask-box-image: url("mask.png");
}

.exempleDeux {
  -webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
}
```

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

Cette propriété est une propriété propriétaire liée à 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
----------

* `-webkit-mask` (en-US)
* `-webkit-mask-origin` (en-US)
* `-webkit-mask-attachment`
* `-webkit-mask-clip` (en-US)
* `-webkit-mask-image`
* `-webkit-mask-composite`
* `-webkit-mask-repeat` (en-US)