Alle - CSS-triks

Anonim

Den allegenskap i CSS tilbakestiller alle de valgte elements egenskaper, med unntak av directionog unicode-bidiegenskapene som kontrolltekst retning.

.module ( all: unset; )

Poenget med det er å tillate tilbakestilling av komponentnivå på stiler. Noen ganger er det langt lettere å starte fra grunnen av med styling i stedet for å kjempe mot alt som allerede er der.

Verdier

  • initial: tilbakestiller alle de valgte elementets egenskaper til de opprinnelige verdiene som definert i CSS-spesifikasjonen.
  • inherit: det valgte elementet arver hele det overordnede elementets utforming, inkludert stiler som normalt ikke er arvelige.
  • unset: det valgte elementet arver eventuelle arvelige verdier som overføres fra det overordnede elementet. Hvis ingen arvelig verdi er tilgjengelig, brukes den opprinnelige verdien fra CSS-spesifikasjonen for hver eiendom.

Noen få egenskaper har ikke en opprinnelig verdi som er eksplisitt definert i spesifikasjonen, og lar i stedet brukeragenten sette den opprinnelige verdien - colorog font-familyer to eksempler. Hvis all: initial;eller all: unset;brukes, brukes standardverdien for brukeragenten som initialverdien for disse egenskapene.

allregnes som en "stenografi" -egenskap fordi den lar oss kontrollere verdiene til hver CSS-eiendom samtidig med en enkelt erklæring. Imidlertid, i motsetning til de fleste stenografiske egenskaper, er det ingen praktisk "langhånds" -versjon, og den har ingen underegenskaper.

Demo

Se CSS-fanen for kommentarer som indikerer hvilke egenskaper som kan arves. Legg merke til at når inheritverdien er brukt, divarver hver eiendom fra foreldrene sine, blant annet det width, paddingog border, som normalt ikke arvet.

Se Pen all property demo av CSS-Tricks (@ css-tricks) på CodePen.

Mer informasjon

  • all i W3C CSS Cascading and Arving Level 4 Editor's Draft
  • CSS2 Full Property Table: viser arvbarhet for alle CSS2-egenskaper. CSS3-spesifikasjonen er delt inn i flere deler og er indeksert i spesifikasjonstabellen.
  • Bli kjent med Initial: flere detaljer om initialverdien.
  • Tilbakestiller stil med 'all: unset' i Firefox 27 (2013) av Cameron McCormack

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
37 27 Nei 79 9.1

Mobil / nettbrett

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