Alle - CSS-trucs

Anonim

Het allpand in CSS herstelt alle eigenschappen van het gekozen element, met uitzondering van de directionen de unicode-bidieigenschappen die de controle richting van de tekst.

.module ( all: unset; )

Het punt hiervan is het opnieuw instellen van stijlen op componentniveau. Soms is het veel gemakkelijker om helemaal opnieuw te beginnen met stylen in plaats van te vechten tegen alles wat er al is.

Waarden

  • initial: zet alle eigenschappen van het geselecteerde element terug naar hun oorspronkelijke waarden zoals gedefinieerd in de CSS-specificatie.
  • inherit: het geselecteerde element neemt de stijl van het bovenliggende element over, inclusief stijlen die normaal niet kunnen worden overgenomen.
  • unset: het geselecteerde element erft alle overneembare waarden die zijn doorgegeven van het bovenliggende element. Als er geen overneembare waarde beschikbaar is, wordt de initiële waarde uit de CSS-specificatie voor elke eigenschap gebruikt.

Een paar eigenschappen hebben geen initiële waarde die expliciet is gedefinieerd in de specificatie en staan ​​in plaats daarvan de user-agent toe om de initiële waarde in te stellen - coloren dit font-familyzijn twee voorbeelden. Als all: initial;of all: unset;wordt toegepast, wordt de standaardwaarde van de user-agent gebruikt als initialwaarde voor deze eigenschappen.

allwordt beschouwd als een "steno" -eigenschap omdat het ons in staat stelt om de waarden van elke CSS-eigenschap in één keer te beheren met een enkele declaratie. In tegenstelling tot de meeste steno-eigenschappen is er echter geen praktische "handgeschreven" versie en heeft deze geen sub-eigenschappen.

Demo

Zie het CSS-tabblad voor opmerkingen die aangeven welke eigenschappen kunnen worden overgenomen. Merk op dat wanneer de inheritwaarde wordt gebruikt, het diverft elke eigenschap van zijn ouder, met inbegrip van het is width, paddingen borderdie normaal gesproken niet geërfd.

Bekijk de demo van alle eigenschappen van Pen door CSS-Tricks (@ css-tricks) op CodePen.

Meer informatie

  • all in de W3C CSS Cascading and Inheritance Level 4 Editor's Draft
  • CSS2 Full Property Table: toont de overerfbaarheid van alle CSS2-eigenschappen. De CSS3-specificatie is onderverdeeld in meerdere delen en is geïndexeerd in de tabel met specificaties.
  • Kennismaken met Initial: meer informatie over de initialwaarde.
  • Stijl opnieuw instellen met 'all: unset' in Firefox 27 (2013) door Cameron McCormack

Browser-ondersteuning

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.

Bureaublad

Chrome Firefox D.W.Z Rand Safari
37 27 Nee 79 9.1

Mobiel / tablet

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