Tout - Astuces CSS

Anonim

La allpropriété en CSS réinitialise toutes les propriétés de l'élément sélectionné, à l'exception des propriétés directionet unicode-bidiqui contrôlent la direction du texte.

.module ( all: unset; )

Le but est de permettre la réinitialisation des styles au niveau des composants. Parfois, il est beaucoup plus facile de repartir de zéro avec le style plutôt que de lutter contre tout ce qui est déjà là.

Valeurs

  • initial: réinitialise toutes les propriétés de l'élément sélectionné à leurs valeurs initiales telles que définies dans la spécification CSS.
  • inherit: l'élément sélectionné hérite de tout le style de son élément parent, y compris les styles qui ne sont normalement pas héritables.
  • unset: l'élément sélectionné hérite de toutes les valeurs héritables transmises par l'élément parent. Si aucune valeur héritable n'est disponible, la valeur initiale de la spécification CSS est utilisée pour chaque propriété.

Quelques propriétés n'ont pas de valeur initiale explicitement définie dans la spécification et permettent à l'agent utilisateur de définir la valeur initiale - coloret font-familysont deux exemples. Si all: initial;ou all: unset;est appliqué, la valeur par défaut de l'agent utilisateur est utilisée comme initialvaleur pour ces propriétés.

allest considérée comme une propriété «abrégée» car elle nous permet de contrôler les valeurs de chaque propriété CSS à la fois avec une seule déclaration. Cependant, contrairement à la plupart des propriétés abrégées, il n'y a pas de version pratique «longue main» et elle n'a pas de sous-propriétés.

Démo

Voir l'onglet CSS pour les commentaires qui indiquent quelles propriétés peuvent être héritées. Notez que lorsque la inheritvaleur est utilisée, les divhérite tous les biens de son parent, y compris son width, paddinget borderqui ne sont pas normalement hérité.

Voir la démonstration de la propriété Pen all par CSS-Tricks (@ css-tricks) sur CodePen.

Plus d'information

  • all dans le brouillon de l'éditeur W3C CSS Cascading and Inheritance Level 4
  • CSS2 Full Property Table: montre l'héritabilité de toutes les propriétés CSS2. La spécification CSS3 est divisée en plusieurs parties et est indexée sur le tableau des spécifications.
  • Se familiariser avec Initial: plus de détails sur la initialvaleur.
  • Réinitialiser le style à l'aide de 'all: unset' dans Firefox 27 (2013) par Cameron McCormack

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
37 27 Non 79 9.1

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
88 85 4.4.3-4.4.4 9,3