OUJOOD.COM
Définition et utilisation de la propriété css all
La propriété all réinitialise toutes les propriétés, à l'exception de unicode-bidi et direction, à leur valeur initiale ou héritée.L'objectif est de permettre la réinitialisation des styles au niveau des composants. Il est parfois bien plus facile de repartir de zéro en matière de style que de se battre contre tout ce qui existe déjà.
La Syntaxe CSS
all: initial|inherit|unset;
| Valeurs par défaut | none |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.all="initial" |
Prise en charge de la propriété css all dans navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 37 | 79 | 27 | 9.1 | 24 |
Exemple 📋 Copier le code
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: small;
color: blue;
}
#exemple1 {
background-color: yellow;
color: red;
}
#exemple2 {
background-color: yellow;
color: red;
all: inherit;
}
#exemple3 {
background-color: yellow;
color: red;
all: initial;
}
#exemple4 {
background-color: yellow;
color: red;
all: unset;
}
</style>
</head>
<body>
<p>Sans la propriété all :</p>
<div id="exemple1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<p>avec all: inherit:</p>
<div id="exemple2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<p>avec all: initial:</p>
<div id="exemple3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<p>avec all: unset:</p>
<div id="exemple4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</body>
</html>
Valeurs de la propriété all
| Valeur | Description |
|---|---|
| initial | Définit de touttes les valeurs des propriétés de élément à leur valeurs par défaut. |
| inherit | Change toutes les propriétés appliquées à l'élément ou au parent de l'élément à leur valeur parentale |
| unset | Change toutes les propriétés appliquées à l'élément ou au parent de l'élément à leur valeur parentale si elles sont héritables ou à leur valeur initiale si elles ne le sont pas. |