Főleg meglévő CSS formázásoknál jöhet elő az, hogy sok mindent kellene módosítani az alap CSS piszkálása nélkül (arra építkezve, megtartva azt is) és esetleg az adott elem formázása több helyen került beállításra.

Egy példa (aminek amúgy nem sok értelme, de jól szemlélteti a dolgot):

body
{
  color: black;
  line-height: 26px;
}

div
{
  color: #2a2a2a;
  line-height: 28px;
}

p
{
  font-family: arial;
}

A HTML:

<div><p>Suspendisse porta....</p></div>

Ennek az eredménye:


Itt ha komolyabb módosítást szeretnénk, akkor több mindent felül kellene írni. Van azonban lehetőség arra, hogy kinyírjuk a formázásokat.

Erre az "all" tulajdonság szolgál, ami jelen esetben így néz ki:

p
{
  all: unset;
}

Az unset értékkel minden formázás törlésre kerül, konkrétan az örökölt, vagy az eredeti (böngésző által meghatározott) értékre kerül visszaállításra.

Jelen példában a

color: #2a2a2a;
line-height: 28px;

a div-től örökölt, így azok érvényben maradnak, ami látható ha például pirosra állítjuk a színét:


De minden stílust elveszít, ami a p elemre vonatkozik.

Persze a div-nél beállított stílusok is törölhetők:

p, div
{
  all: unset;
}

Érdekel a webfejlesztés, weboldalak készítése?

Kattints ide oktató videókért!

Az értéke az unset mellett lehet initial is. Ezzel az adott elem a kezdeti, böngésző által meghatározott stílusra áll vissza, aminek értelmében például a betűtípus, szín visszaállításra kerül, de például a sormagasság nem.

p
{
  all: initial;
}

És van még egy értéke, az inherit, amely az örökölt értéke állítja vissza, vagyis minden közvetlenül az elemnél beállított stílus törlődik. Jelen példában a divtől örökölt stílusokra áll vissza (többek között).