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

La fonction CSS **`blur()`** permet d'appliquer un flou gaussien sur l'image d'entrée. Le résultat de cette fonction est une valeur `<filter-function>`.

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

Syntaxe
-------


```css
blur(rayon)
```

### Paramètres

`rayon`

Le rayon d'application du flou, défini par une longueur CSS (`<length>`). Cela définit l'écart-type de la fonction gaussienne appliquée (c'est-à-dire le nombre de pixels qui se mélangeront). Ainsi, plus la valeur est grande, plus le flou sera prononcé. Si on utilise la longueur nulle `0`, l'image ne sera pas modifiée. La valeur utilisée par défaut lors d'une interpolation est `0`.

Exemples
--------

### Définir un flou en pixels ou en rem


```css
blur(0);        /\* Aucun effet \*/
blur(8px);      /\* Un flou avec un rayon de 8px \*/
blur(1.17rem);  /\* Un flou avec un rayon de 1.17rem \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-blur |

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

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

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

* `<filter-function>` et les autres fonctions associées
    + `brightness()`
    + `contrast()`
    + `drop-shadow()`
    + `grayscale()`
    + `hue-rotate()`
    + `invert()`
    + `opacity()`
    + `saturate()`
    + `sepia()`
Fusion des marges
=================

Les marges haute et basse des blocs sont parfois fusionnées en une seule marge dont la taille est la plus grande des deux marges fusionnées. C'est ce qu'on appelle **la fusion des marges**.
La fusion des marges se produit si on a l'un de ces trois cas :

Des éléments voisins adjacents

Les marges des éléments voisins adjacents sont fusionnés (sauf quand le dernier voisin doit passer à la ligne pour dégager les flottements). Ainsi :


```html
<p>La marge basse de ce paragraphe est fusionnée…</p>
<p>… avec la marge haute de celui-ci.</p>
```


Aucun contenu séparant le parent et ses descendants

S'il n'y a aucune bordure, remplissage, contenu en ligne (*inline*), lorsqu' un contexte de formatage de blocs est créé ou *dégagement* pour séparer la marge haute d'un bloc avec la marge haute d'un ou plusieurs des blocs descendants ou quand il n'y a aucune bordure, remplissage, contenu en ligne, `height`, `min-height` ou `max-height` pour séparer la marge basse d'un bloc avec la marge basse d'un ou plusieurs des blocs descendants, ces marges sont fusionnées. La marge fusionnée termine en dehors de l'élément parent.

Des blocs vides

S'il n'y a aucune bordure, remplissage, contenu en ligne, `height` ou `min-height` pour séparer la marge haute d'un bloc de sa marge basse, ces deux marges sont fusionnées.

On peut avoir des cas de fusion plus complexes lorsque ces cas de figures sont combinés.

Ces règles s'appliquent également lorsque les marges sont égales à 0. Ainsi, la marge d'une descendant finit toujours en dehors de l'élément parent (selon la deuxième règle vue ci-avant) quelle que soit la marge de l'élément parent (nulle ou non).

Lorsqu'on manipule des marges négatives, la taille de la marge fusionnée est la somme de la marge positive la plus grande et de la marge négative la plus petite (celle dont la valeur est plus éloignée de 0).

Les marges des éléments flottants et positionnés de façon absolue ne sont jamais fusionnées.

Exemples
--------

### HTML


```html
<p>La marge basse de ce paragraphe est fusionnée…</p>
<p>
  … avec la marge haute de ce paragraphe. On a donc une marge de
  <code>1.2rem</code> entre les deux.
</p>

<div>
  Cet élément contient deux paragraphes !
  <p>
    Celui-ci a une marge de <code>.4rem</code> par rapport au texte ci-dessus.
  </p>
  <p>
    La marge basse de cet élément fusionne avec la marge basse de l'élément
    parent. On a donc <code>2rem</code> de marge.
  </p>
</div>

<p>Bip bap bop.</p>
```

### CSS


```css
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}
```

### Résultat

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

{{Specifications}}Voir aussi
----------

* La référence CSS
Utiliser plusieurs arrière-plans
================================

Avec CSS, on peut appliquer plusieurs arrière-plans à des éléments. Ceux-ci seront empilés les uns sur les autres (le premier de la liste étant le plus « haut » dans la pile et le dernier étant le plus « bas ». Seul le dernier arrière-plan peut décrire une couleur.

Pour cela, il suffit d'utiliser une liste de valeur avec `background` :


```css
.maClasse {
  background: background1, background2, ..., backgroundN;
}
```


Cela fonctionne aussi bien avec la propriété raccourcie `background` qu'avec les propriétés détaillées, exception faite de `background-color`. On peut donc utiliser une liste de valeurs, chacune pour un arrière-plan différent, pour les propriétés suivantes : `background`, `background-attachment`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`.

Exemples
--------

Dans cet exemple, on cumule trois arrière-plans : le logo de Firefox, une image de bulles et un dégradé linéaire (cf. `linear-gradient`).

### HTML


```html
<div class="multi-bg-example"></div>
```

### CSS


```css
.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
}
```

### Résultat

Comme on peut le voir ici, le logo qui est le premier élément de la liste apparaît en haut, il est suivi par les bulles puis par le dégradé. Chacune des propriétés (`background-repeat` et `background-position`) s'applique aux arrière-plans correspondant (la première valeur de la liste pour le premier arrière-plan, etc.).

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

* Utiliser les dégradés CSS
Générateur de box-shadow
========================

Cet outil visuel permet de construire des effets d'ombre et de générer du code pour la propriété `box-shadow` qui pourra être ajouté à votre feuille de style.

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

* Le générateur d'ombres CSS
Générateur de border-radius
===========================

Cet outil peut être utilisé afin de générer du code pour la propriété `border-radius`.
Générateur de border-image
==========================

Cet outil peut être utilisé afin de générer des valeurs pour la propriété `border-image`.
additive-symbols
================

Le descripteur **`additive-symbols`**, utilisé pour la règle @ `@counter-style` est semblable au descripteur `symbols()` et permet à l'utilisateur de définir les symboles qui doivent être utilisé pour représenter le compteur lorsque le descripteur `system` (en-US) prend la valeur `additive`. Le descripteur `additive-symbols` définit des *tuples additifs*. Un tuple additif est une paire contenant un symbole et un entier positif qui représente un poids. Le système additif est utilisé afin de construire des systèmes de notation additive tels que les nombres romains.


```css
additive-symbols: 3 "0";
additive-symbols:
  3 "0",
  2 "\2E\20";
additive-symbols:
  3 "0",
  2 url(symbol.png);
```


Lorsque la valeur du descripteur `system` est `cyclic`, `numeric`, `alphabetic`, `symbolic` ou `fixed`, c'est le descripteur `symbols` qui est utilisé à la place de `additive-symbols` afin de définir les symboles utilisés pour le compteur.

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

|  |  |
| --- | --- |
| En lien avec les règles @ | `@counter-style` |
| Valeur initiale | `n/a (required)` |
| Valeur calculée | comme spécifié |

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

additive-symbols =   
  [ <integer [0,∞]> && <symbol> ]#    
  
<symbol> =   
  <string>        |  
  <image>         |  
  <custom-ident>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Exemples
--------

### CSS


```css
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols:
    V 5,
    IV 4,
    I 1;
}
.exemple {
  list-style: additive-symbols-example;
}
```

### HTML


```html
<ul class="exemple">
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
  <li>Cinq</li>
</ul>
```

### Résultat

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

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

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

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

* `list-style`,
* `list-style-image`,
* `list-style-position`
* `symbols()` : la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
pad
===

Le descripteur **`pad`**, utilisé dans la règle @ `@counter-style` peut être utilisé pour que la représentation du marqueur pour le compteur ait une longueur minimale. Si la représentation du marqueur est plus courte que la longueur indiquée, le marqueur sera complété autant de fois que nécessaire avec le symbole indiqué. Les représentations du marqueur qui sont plus longues que la longueur minimale indiquée dans le descripteur sont construites normalement.

Le descripteur `pad` utilise deux paramètres :

* un entier indiquant la longueur minimale de la représentation du marqueur
* Le symbole utilisé pour compléter la représentation du marqueur si nécessaire.
Syntaxe
-------


```css
pad: 3 "0";
```

### Valeurs

`<integer> && <symbol>`

La composante `<integer>` indique la longueur minimale du marqueur. La valeur doit être positive. Si la représentation du marqueur est plus courte, elle sera complétée avec la valeur indiquée par la composante `<symbol>`.

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

|  |  |
| --- | --- |
| En lien avec les règles @ | `@counter-style` |
| Valeur initiale | `0 ""` |
| Valeur calculée | comme spécifié |

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

pad =   
  <integer [0,∞]>  &&  
  <symbol>           
  
<symbol> =   
  <string>        |  
  <image>         |  
  <custom-ident>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Exemples
--------

### CSS


```css
@counter-style pad-example {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5";
  pad: 2 "0";
}
.exemple {
  list-style: pad-example;
}
```

### HTML


```html
<ul class="exemple">
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
  <li>Cinq</li>
</ul>
```

### Résultat

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-pad |

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

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

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

* `list-style`,
* `list-style-image`,
* `list-style-position`,
* `symbols()`, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
suffix
======

Le descripteur **`suffix`**, utilisé avec la règle @ `@counter-style`, afin de définir un symbole qui pourra être utilisé comme suffixe pour la représentation du marqueur. Le symbole en question pourra être une chaîne de caractères, une image ou un identifiant CSS. La valeur par défaut de ce descripteur sera `"\2E\20"` (un point « . » suivi par un espace).

Syntaxe
-------


```css
/\* Une valeur de type <symbol> \*/
suffix: "";
suffix: ") ";
```

### Valeur

`<symbol>`

Un symbole qui sera ajouté comme suffixe à la représentation du marqueur. Cette valeur peut être une valeur de type `<string>`, `<image>` ou `<custom-ident>`.

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

|  |  |
| --- | --- |
| En lien avec les règles @ | `@counter-style` |
| Valeur initiale | ". " (full stop followed by a space) |
| Valeur calculée | comme spécifié |

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

suffix =   
  <symbol>    
  
<symbol> =   
  <string>        |  
  <image>         |  
  <custom-ident>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Exemples
--------

### CSS


```css
@counter-style options {
  system: fixed;
  symbols: A B C D;
  suffix: ") ";
}

.exemple {
  list-style: options;
}
```

### HTML


```html
<ul class="exemple">
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Autre</li>
</ul>
```

### Résultat

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-suffix |

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

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

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

* `list-style`,
* `list-style-image`,
* `list-style-position`,
* `symbols()`, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.
symbols
=======

Le descripteur **`symbols`**, rattaché à la règle @ `@counter-style`, est utilisé pour définir les symboles à utiliser pour construire les représentations du compteur. Un symbole peut être une chaîne de caractères, une image ou un identifiant.


```css
symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("premier.svg") url("deuxieme.svg") url("troisieme.svg");
symbols: indic-numbers;
```


Le descripteur `symbols` doit être défini lorsque la valeur du descripteur `system` (en-US) vaut `cyclic`, `numeric`, `alphabetic`, `symbolic` ou `fixed`. Lorsque `system` vaut `additive`, ce sera le descripteur `additive-symbols` (en-US) qui sera utilisé afin de définir les symboles.

Syntaxe
-------

### Valeurs

* Des chaînes de caractères (`<string>`) délimitées par des quotes simples ou doubles. La barre oblique inversée (\) peut être utilisée afin d'échapper les caractères spéciaux. Ainsi, on peut utiliser des caractères Unicode de cette façon `"\24B6"`.
* Des images (`<image>`) en utilisant la notation fonctionnelle `url(chemin-vers-image.png)`. **Attention : cette fonctionnalité (l'utilisation d'image) est à risque en termes d'implémentation et de conservation dans les spécifications et n'est implémentée par aucun navigateur actuellement.**
* Des identifiants (`<custom-ident>`)

`<symbol>`

Représente le symbole à utiliser pour le système de comptage. La valeur du descripteur `symbols` peut être :

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

|  |  |
| --- | --- |
| En lien avec les règles @ | `@counter-style` |
| Valeur initiale | `n/a (required)` |
| Valeur calculée | comme spécifié |

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

symbols =   
  <symbol>+    
  
<symbol> =   
  <string>        |  
  <image>         |  
  <custom-ident>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Exemples
--------

### CSS


```css
@counter-style symbols-exemple {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.exemple {
  list-style: symbols-exemple;
}
```

### HTML


```html
<ul class="exemple">
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
  <li>Cinq</li>
</ul>
```

### Résultat

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

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

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

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

* `@counter-style`,
* `list-style`,
* `list-style-image`,
* `list-style-position`,
* `symbols()`, la notation fonctionnelle utilisée pour créer des styles de compteur anonymes,
* `url()`.
negative
========

Le descripteur **`negative`**, associé à la règle @ `@counter-style`, permet de définir la représentation du compteur lorsque la valeur est négative.


```css
/\* Valeurs représentant les symboles \*/
negative: "-"; /\* Préfixe '-' si la valeur est négative \*/
negative: "(" ")"; /\* Entoure la valeur avec '(' et ')' si elle est négative \*/
```


Si la valeur du compteur est négative, le symbole fourni par le descripteur sera utilisé comme préfixe à la représentation du compteur. Un deuxième symbole peut être indiqué et est alors utilisé comme suffixe. Le descripteur `negative` n'a d'effet que si la valeur du descripteur `system` est `symbolic`, `alphabetic`, `numeric`, `additive` ou `extends` et si le compteur personnalisé utilise des indices négatifs. Dans les autres cas, si le descripteur `negative` est fourni, il est ignoré.

Syntaxe
-------

### Valeurs

Premier symbole

Le préfixe (type `<symbol>`) à ajouter à la représentation lorsque la valeur du compteur est négative.

Deuxième symbole Facultatif

Si cette valeur (type `<symbol>`) est présente, le symbole sera ajouté après la représentation du compteur lorsque sa valeur est négative.

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

|  |  |
| --- | --- |
| En lien avec les règles @ | `@counter-style` |
| Valeur initiale | `"-" hyphen-minus` |
| Valeur calculée | comme spécifié |

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

negative =   
  <symbol> <symbol>?    
  
<symbol> =   
  <string>        |  
  <image>         |  
  <custom-ident>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Exemples
--------

### CSS


```css
@counter-style neg {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  negative: "(-" ")";
}
.exemple {
  list-style: neg;
}
```

### HTML


```html
<ul class="exemple" start="-3">
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
  <li>Cinq</li>
</ul>
```

### Résultat

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-system |

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

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

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

* `list-style`,
* `list-style-image`,
* `list-style-position`,
* `symbols()`, la notation fonctionnelle pour créer des styles de compteur anonymes.
prefix
======

Le descripteur **`prefix`**, utilisé avec la règle @ `@counter-style`, permet de définir un symbole qui sera ajouté comme préfixe à la représentation du marqueur. Si aucune valeur n'est fournie, la valeur utilisée par défaut sera la chaîne de caractères vide.

Syntaxe
-------


```css
/\* Valeurs de symbole \*/
prefix: "»";
prefix: "Page";
```

### Valeurs

`<symbol>`

Définit le symbole à utilisé comme préfixe devant le marqueur du compteur de la liste. Cette valeur peut être une valeur de type `<string>`, `<image>` ou `<custom-ident>`.

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

|  |  |
| --- | --- |
| En lien avec les règles @ | `@counter-style` |
| Valeur initiale | "" (the empty string) |
| Valeur calculée | comme spécifié |

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

prefix =   
  <symbol>    
  
<symbol> =   
  <string>        |  
  <image>         |  
  <custom-ident>    
  
<image> =   
  <url>       |  
  <gradient>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

Exemples
--------

### CSS


```css
@counter-style chapitres {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "Chapitre ";
}

.exemple {
  list-style: chapitres;
  padding-left: 15ch;
}
```

### HTML


```html
<ul class="exemple">
  <li>Au fond du terrier</li>
  <li>La mare aux larmes</li>
  <li>La course cocasse</li>
  <li>L'habitation du lapin blanc</li>
  <li>Conseils d'une chenille</li>
</ul>
```

### Résultat

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-prefix |

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

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

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

* `list-style`,
* `list-style-image`,
* `list-style-position`,
* `symbols()`, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.
fallback
========

Le descripteur **`fallback`**, associé à la règle @ `@counter-style` est utilisé afin d'indiquer un style de secours au cas où le style courant ne permet pas de créer une représentation pour le marqueur du compteur pour une valeur donnée. Si le style de secours indiqué ne le permet pas non plus, ce sera le style de secours du style de secours qui sera utilisé et ainsi de suite. Si un style de secours valide n'est pas indiqué, ce sera la valeur `decimal` qui sera utilisée. Les scénarios pour lesquels ce style de secours est utilisé sont :

* Lorsque le descripteur `range` (en-US) est utilisé, le style de secours est utilisé pour représenter les valeurs situées en dehors de l'intervalle.
* Lorsque le descripteur `system` (en-US) vaut `fixed` et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste.
Syntaxe
-------


```css
/\* Valeurs avec un mot-clé \*/
fallback: lower-alpha;
fallback: custom-gangnam-style;
```

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

|  |  |
| --- | --- |
| En lien avec les règles @ | `@counter-style` |
| Valeur initiale | `decimal` |
| Valeur calculée | comme spécifié |

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

fallback =   
  <counter-style-name>    
  
```

Exemples
--------

### CSS


```css
@counter-style fallback-example {
  system: fixed;
  symbols: "\24B6" "\24B7" "\24B8";
  fallback: upper-alpha;
}
.exemple {
  list-style: fallback-example;
}
```

### HTML


```html
<ul class="exemple">
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
  <li>Cinq</li>
</ul>
```

### Résultat

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-fallback |

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

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

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

* `list-style`,
* `list-style-image`,
* `list-style-position`,
* `symbols()`, la notation fonctionnelle qui permet de créer des styles de compteur anonymes.