All - Propriété CSS
Résumé des caractéristiques de la propriété all
initial | unset | revert | revert-layer | inheritDescription de la propriété all.
all est une propriété CSS qui représente TOUTES les propriétés. Elle permet, en une seule
écriture, d'appliquer la même valeur à toutes les propriétés d'un élément.
Elle est surtout utilisée pour les initialisations, avec les valeurs initial, unset, etc.
Cette propriété très particulière est en quelques sortes un résumé universel, qui initialise en une seule écriture toutes les propriétés,
de même que les autres propriétés résumées initialisent plusieurs propriétés.
Par exemple flex initialise les trois propriétés flex-grow, flex-schrink et flex-basic.
Il y a cependant deux propriétés qui ne seront pas initialisées par all : ce sont direction et unicode-bidi.
all ne peut accepter que les valeurs d'initialisation : une écriture comme all:20px;
n'a pas de sens dans la mesure où de nombreuses propriétés n'acceptent pas la valeur numérique 20px.
Les propriétés personnalisées ne sont pas impactées par all.
Rappelons que les propriétés personnalisées sont définies par le développeur et que leur nom commence obligatoirement
par un double tiret. Exemple :
--couleur-logo:#845884;
Syntaxes pour all.
- all: revert; all: revert-layer;
Force toutes les propriétés de l'élément à la valeur qu'elles auraient eu sans l'application d'aucun styles utilisateur. Plus d'informations sur les valeurs
revertetrevert-layer. - all: unset;
Force toutes les propriétés de l'élément à la valeur de l'élément parent si ces propriétés peuvent être héritées, et à leur valeur initiale si elles ne peuvent pas être héritées. Voir la valeur
unset. - all: inherit
Force toutes les propriétés de l'élément à la valeur héritée de l'élément parent. Voir la valeur
inherit. - all: initial;
Force toutes les propriétés de l'élément à leur valeur initiale. Voir la valeur
initial.
Manipulation de la propriété all par programme.
Modifier la valeur de all avec Javascript.
Le code ci-dessous est un exemple pour modifier la valeur de la propriété all sur UN élément.
Deux syntaxes sont possibles : la première traite l'objet style comme un tableau, la deuxième comme un objet.
let el = document.getElementById('id');
el.style['all'] = 'initial';
let el = document.getElementById('id');
el.style.all = 'initial';
Récupérer la valeur de all avec Javascript.
La valeur de la propriété doit avoir été affecté à l'élément via son attribut style, ou par le code précédent, mais pas en passant
par un sélecteur CSS.
let el = document.getElementById('id');
el.style['all'] = 'initial';
let el = document.getElementById('id');
el.style.all = 'initial';
Récupérer la valeur calculée de all.
De façon générale, la valeur calculée peut avoir été définie explicitement (par l'attribut style de l'élément ou via un sélecteur CSS),
ou provenir de la cascade des héritages.
Dans le cas de all la valeur calculée n'a pas beaucoup de sens car all est une propriété qui résume toutes les autres.
Définir la valeur de all avec JQuery.
$('#id').css('all', 'initial');
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété all et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Dans le cas de la propriété all la valeur calculée sera toujours vide.
Simulateur.
Le fonctionnement de la propriété all est assez complexe. Jouez avec le simulateur ci-dessous pour vous en faire une idée.
Le résultat comporte deux éléments, l'un étant le parent de l'autre, pour mettre en évidence l'effet de la valeur inherit.
all n'est pas réversible : vous devrez recharger la page pour retrouver la mise en forme de départ.
all va être modifiée.
Prise en charge de la propriété all par les navigateurs courants.
allNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
UC Browser pour Androïd
Opéra mini
Historique de la propriété all.
-
Module CSS - Cascade et héritage - Niveau 3
Introduction de la propriétéallrésumant toutes les autres propriétés.
13 Juillet 2001Document de travail.
03 Octobre 2013Candidat à la recommandation.
22 Décembre 2020Proposé à la recommandation.
11 Février 2021Recommandation. -
Module CSS - Cascade et héritage - Niveau 4
Ajout de la valeurrevert, acceptée par la propriétéall.21 Avril 2015Document de travail.14 Janvier 2016Candidat à la recommandation. -
Module CSS - Cascade et héritage - Niveau 5
Ajout de la valeurrevert-layer, pour la propriétéall.19 Janvier 2021Document de travail.13 Janvier 2022Candidat à la recommandation.
Voir aussi, au sujet de la cascade.
La spécification "Module CSS - Cascade et héritage" (CSS Cascading and Inheritance) du W3C regroupe les informations concernant l'organisation des feuilles de styles complexes et l'héritage.