Vše - Triky CSS

Anonim

allNemovitost v CSS změní všechna vlastností vybraného prvku je, s výjimkou directiona unicode-bidivlastnosti, které směru ovládání textu.

.module ( all: unset; )

Jde o to umožnit resetování stylů na úrovni komponent. Někdy je mnohem snazší začít od začátku stylingem než bojovat proti všemu, co tam už je.

Hodnoty

  • initial: resetuje všechny vlastnosti vybraného prvku na jejich počáteční hodnoty definované ve specifikaci CSS.
  • inherit: vybraný prvek zdědí veškerý styl nadřazeného prvku, včetně stylů, které obvykle nejsou dědičné.
  • unset: vybraný prvek zdědí všechny dědičné hodnoty předávané z nadřazeného prvku. Pokud není k dispozici žádná dědičná hodnota, použije se pro každou vlastnost počáteční hodnota ze specifikace CSS.

Několik vlastností nemá ve specifikaci výslovně definovanou počáteční hodnotu a místo toho umožňuje uživatelskému agentovi nastavit počáteční hodnotu - colora font-familyjsou to dva příklady. Pokud je all: initial;nebo all: unset;je použito, použije se jako initialhodnota pro tyto vlastnosti výchozí hodnota agenta uživatele .

allje považována za vlastnost „zkratka“, protože nám umožňuje ovládat hodnoty každé vlastnosti CSS najednou pomocí jediné deklarace. Na rozdíl od většiny stenografických vlastností však neexistuje žádná praktická „longhand“ verze a nemá žádné podvlastnosti.

Ukázka

Na kartě CSS najdete komentáře, které označují, které vlastnosti jsou dědičné. Všimněte si, že když inheritse použije hodnota, tím divzdědí každý z rodiče, zahrnující to width, paddinga border, které nejsou za normálních okolností zdědil.

Podívejte se na ukázku Pen all property od CSS-Tricks (@ css-tricks) na CodePen.

Více informací

  • all v redakčním konceptu kaskádové a dědičné úrovně W3C CSS 4. úrovně
  • Tabulka úplných vlastností CSS2: zobrazuje dědičnost všech vlastností CSS2. Specifikace CSS3 je rozdělena do několika částí a je indexována v tabulce specifikací.
  • Seznámení s počátečním: více podrobností o initialhodnotě.
  • Resetování stylu pomocí 'all: unset' ve Firefoxu 27 (2013) od Camerona McCormacka

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
37 27 Ne 79 9.1

Mobilní / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4.4.3-4.4.4 9.3