A vízesés és az öröklődés

Melyik CSS-szabály „nyer” az ilyen esetekben, és melyik szabály lesz alkalmazva? Ezt a vízesés (cascade) mechanizmus határozza meg, de fontos szerepet kap az öröklődés is (az elemek egyes tulajdonságokat örökölnek a szülő elemektől, másokat viszont nem).

Mai cikkünkben bemutatjuk a CSS-vízesést, és megfigyeljük, hogyan öröklődnek a tulajdonságok.

A vízesés (cascade)

 Leegyszerűsítve mondhatjuk, hogy a vízesés határozza meg a CSS-szabályok sorrendjét — de természetesen ennél sokkal összetettebb a dolog. Az, hogy melyik szabály lesz a „nyerő”, a következő három faktortól függ:

1. Fontosság

2. Specifikusság

3. A forrás sorrendje

Fontosság

A CSS-ben létezik egy olyan szintaxis, amely gondoskodik róla, hogy egy bizonyos deklaráció mindig nyerjen. Ez az !important funkció. Ezt azért fontos ismerni, hogy tudjuk, mit jelent, ha más kódjában találkozunk vele. Javasoljuk azonban, hogy NE használd ezt a funkciót, ha nem feltétlenül szükséges, mert megváltoztatja a vízesés működését, és nagyon nehézzé teszi a debuggolást. A funkció akkor lehet hasznos, amikor olyan CMS-rendszerben dolgozunk, ahol a legfontosabb CSS-modulokat nem tudjuk szerkeszteni, mégis nagyon szeretnénk felülírni egy stílust, melyet másképpen nem tudnánk.

Specifikusság 

A specifikusság azt mutatja, mennyire specifikus a szelektor — hány elemre lehet érvényes. Az elemszelektoroknak alacsony a specifikusságuk. Az osztályszelektoroknak magasabb a specifikussági szintjük. Az ID-szelektoroknak még magasabb, őket csak az !important funkció segítségével lehet „legyőzni”.

A forrás sorrendje 

A forrás sorrendje azért fontos, mert ez a harmadik faktor, melyet figyelembe kell venni a „győztes” szabály meghatározása során — a frissebb források mindig felülírják a régebbieket.

Egy fontos megjegyzés: 

Fontos kiemelni, hogy a vízeséselméletnél a stílusok egymás felett való alkalmazása a tulajdonságok szintjén történik — a tulajdonságok felülírhatnak más tulajdonságokat, de teljes szabályok nem fognak felülírni más szabályokat. Amikor több CSS-szabály is vonatkozik egy-egy elemre, minden szabály alkalmazva lesz rajta, majd csak ezután lesz elemezve, melyik stílus lesz a „győztes”, ha egyes tulajdonságok közötti konfliktusra kerül sor.

Öröklődés

Az öröklődés a következő dolog, melyre fontos figyelmet fordítani a CSS megismerése során. Az öröklődés elve azon alapul, hogy egyes tulajdonságértékek öröklődni fognak a szülő elemről a gyerekre, míg mások nem. Azt, hogy mely elemek öröklődnek, a legtöbbször egy kis logikával könnyen ki tudjuk találni.

Magától értetődő például, hogy a font-family és a color öröklődnek. Az öröklődésnek köszönhetően a betűcsaládot be tudjuk állítani a

elemben, majd szükség esetén felülírhatjuk ezeket a betűtípusokat azoknak az elemeknek az esetében, amelyeknél ez szükséges. Gondolj csak bele, mennyire idegesítő lenne, ha egyenként kellene beállítanod a betűtípust minden elemnél.

Ezzel szemben az is logikus, hogy a margin, padding, border és background-image NEM öröklődik. Képzeld csak el, mekkora káosz lenne, ha mindezek a tulajdonságok öröklődnének a konténer elem minden elemére, és mindegyiket egyenként kellene érvényteleníteni minden egyes elemen! 

Az öröklődés kezelése

A CSS négy speciális és univerzális értéket kínál az öröklődés kezelésére:

inherit — a kiválasztott elem tulajdonságértéke ugyanaz lesz, mint a szülő elemé;

initial — a kiválasztott elem tulajdonságértéke ugyanaz lesz, mint a böngésző alapértelmezett stíluslapjának értékkészlete a szóban forgó elemre;

unset — visszaállítja a tulajdonságot a természetes értékére, ami annyit tesz, hogy ha a tulajdonság természetesen öröklődik, akkor úgy viselkedik, mint az inherit, más esetben pedig mint az initial;

revert — visszafordítja a tulajdonságot arra az értékre, amely akkor lenne érvényes, ha a jelenlegi eredetre nem alkalmaztunk volna semmilyen stílust.

Ezek közül az értékek közül minden bizonnyal az inherit a legérdekesebb, hiszen lehetővé teszi, hogy pontosan meghatározzuk, melyik elem örökölje a tulajdonságértéket a szülő elemtől.

Az összes tulajdonságérték átállítása

A CSS all tulajdonsága akkor hasznos, ha szeretnénk ezeket az öröklődési értékeket (majdnem) minden tulajdonságon egyszerre alkalmazni. Értéke csak a négy öröklődési érték egyike lehet (inherit, initial, unset vagy revert). Ez egy kényelmes mód arra, hogy visszavonjuk a stíluson eszközölt változtatásokat, és visszatérjünk egy ismert pontra, mielőtt újabb változtatásokba kezdenénk.

Ha a cikk nagy részét sikerült megértened, gratulálunk, egyre kényelmesebben mozogsz a CSS világában. A következő lépés a doboz modell megismerése lesz, amivel a jövő heti cikkünkben fogunk foglalkozni.

Ha még nem vagy teljesen magabiztos a vízesést és az öröklődést illetően, ne aggódj — ez az eddigi legnehezebb leckénk, mely időnként még a profi fejlesztőknek is fejtörést okoz. Térj vissza rá még néhányszor a következő cikkünk előtt, második olvasásra már biztosan érthetőbb lesz!

Az oldal sütiket használ, hogy személyre szabjuk a tartalmakat és reklámokat, hogy működjenek a közösségi média funkciók, valamint hogy elemezzük a weboldal forgalmát. Bővebben a "Részletek mutatása" gombra olvashat.
Az oldal sütiket használ, hogy személyre szabja az oldalon megjelenő tartalmat és reklámokat.