all
===

La propriété raccourcie CSS **`all`** permet de réinitialiser toutes les propriétés d'un élément, à l'exception de `unicode-bidi`, `direction`, et des propriétés personnalisées, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre couche de la cascade voire d'une autre feuille de style.

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

Syntaxe
-------


```css
/\* Valeurs globales \*/
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;
```


La propriété `all` est définie avec un des mots-clés globaux de CSS. On notera que la valeur de cette propriété n'a pas d'impact sur les propriétés `unicode-bidi`, `direction`, et les propriétés personnalisées.

### Valeurs

`initial`

Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique `all` devront prendre leurs valeurs initiales.

`inherit`

Ce mot-clé indique que toutes les propriétés qui sont définies pour l'élément auquel s'applique `all` devront prendre les valeurs héritées.

`unset`

Ce mot-clé indique que toutes les propriétés qui s'appliquent à l'élément prendront leur valeur héritée si elles héritent par défaut, ou leur valeur initiale sinon.

`revert`

Le comportement obtenu sera différent selon l'origine de la règle :

* Si la règle provient du site, `revert` remonte la cascade au niveau de la feuille de style de l'utilisatrice ou de l'utilisateur afin que les valeurs spécifiées soient calculées comme si aucune règle du site n'avait été spécifiée pour l'élément. En ce qui concerne `revert`, cette origine (le site) inclut également les origines de surcharge (*override*) et d'animation.
* Si la règle provient d'une feuille de style de l'utilisatrice ou de l'utilisateur, `revert` remonte la cascade au niveau de l'agent utilisateur afin que les valeurs spécifiées soient calculées comme si aucune règle utilisateur ou du site n'avait été spécifiée pour l'élément.
* Si la règle provient de l'agent utilisateur, `revert` agira comme `unset`.

`revert-layer` (en-US)

Indique que toutes les propriétés de l'élément devraient revenir à une couche de cascade précédente existante. S'il n'existe pas de telle couche, les propriétés de l'élément reviendront à la règle correspondante existante de la couche courante ou d'une origine précédente.

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

|  |  |
| --- | --- |
| Valeur initiale | Il n'y a pas de valeur initiale pour cela. |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | comme la valeur spécifiée s'applique sur chaque propriété englobée par le raccourci |
| Type d'animation | comme pour chaque propriété de la propriété raccourcie (toutes les propriétés sauf `unicode-bidi` et `direction`) |

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

all =   
  initial       |  
  inherit       |  
  unset         |  
  revert        |  
  revert-layer    
  
```

Exemples
--------

Dans cet exemple, le fichier CSS contient une mise en forme pour l'élément `<blockquote>` et pour l'élément parent `<body>`. Les différents résultats présentés dans la section éponyme illustrent les effets des différentes valeurs de la propriété `all` lorsqu'elle est appliquée dans la règle `blockquote`.

### HTML


```html
<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```

### CSS


```css
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
  margin: 0;
  padding: 0;
}

blockquote {
  background-color: skyblue;
  color: red;
}
```

### Résultat

#### Pas de propriété `all`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}
```


Dans ce scénario, aucune propriété `all` n'est appliquée dans la règle `blockquote`. L'élément `<blockquote>` utilise la mise en forme par défaut du navigateur, qui lui fournit une marge, ainsi que des couleurs d'arrière-plan et de texte indiquées par la feuille de style. Il se comporte comme un *élément de bloc* : le texte qui suit l'élément est placé en dessous.

#### `all: initial`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: initial;
}
```


Lorsque la propriété `all` vaut `initial` au sein de la règle `blockquote`, l'élément `<blockquote>` n'utilise plus la mise en forme par défaut du navigateur : il s'agit maintenant d'un *élément en ligne* (la valeur initiale de `display`), `background-color` vaut `transparent` (sa valeur initiale), `font-size` vaut `medium`, et `color` vaut `black` (là encore, sa valeur initiale).

#### `all: inherit`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: inherit;
}
```


Dans ce cas, l'élément `<blockquote>` n'utilise pas la mise en forme par défaut du navigateur mais hérite des valeurs de l'élément parent, `<body>`. L'élément `<blockquote>` est désormais un *élément de bloc* (il hérite de cette caractéristique via la valeur de `display` pour `<body>`), `background-color` vaut `#F0F0F0` (héritée), `font-size` vaut `small` (héritée), et `color` vaut `blue` (héritée).

#### `all: unset`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: unset;
}
```


Lorsque la valeur `unset` est appliquée à la propriété `all` dans la règle `blockquote`, l'élément `<blockquote>` n'utilise pas la mise en forme par défaut du navigateur. Comme `background-color` n'est pas une propriété héritée, contrairement à `font-size` et `color` qui sont héritées, l'élément `<blockquote>` est un élément en ligne (la valeur initiale de `display`), `background-color` vaut `transparent` (sa valeur initiale), mais `font-size` vaut toujours `small` (sa valeur héritée), et `color` vaut `blue` (sa valeur héritée).

#### `all: revert`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert;
}
```


Lorsque la propriété `all` utilise la valeur `revert` dans la règle `blockquote`, cette règle est considérée comme absente et les valeurs pour la mise en forme sont héritées de celles appliquées à l'élément parent, `<body>`. Aussi, `<blockquote>` devient un élément de bloc, `background-color` vaut `#F0F0F0`, `font-size` vaut `small`, et `color` vaut `blue` : toutes ces valeurs sont héritées de la règle pour `body`.

#### `all: revert-layer`
```

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
```


```
body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert-layer;
}
```


Ici, on n'a pas de couche de cascade définie dans le fichier CSS et l'élément `<blockquote>` hérite donc de la mise en forme de la règle `body` qui s'applique à l'élément parent. `<blockquote>` est donc un élément de bloc, `background-color` vaut `#F0F0F0`, `font-size` vaut `small`, et `color` vaut `blue`. Dans ce scénario, on est dans le cas où `all: revert-layer` mène au même comportement que `all: revert`.

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # all-shorthand |

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

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

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

Les mots-clés indiquant des valeurs globales pour CSS :

* `initial`
* `inherit`
* `unset`
* `revert`
* `revert-layer` (en-US)