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

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

A CSS-szel való munka során előfordulhat, hogy olyan helyzetben találjuk magunkat, amelyben több CSS-szabály szelektorja is ugyanarra az elemre mutat.

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 <html> 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!

 


 

Nyereményjáték!


Rovatunk elsődleges célja, hogy közelebbről is bemutassa a legismertebb webtechnológiákat. Azok között az olvasók között, akik minden héten követik rovatunkat, azaz velünk tanulják a programozás alapjait és kitöltik a feladatsort, a sorozat végén egy laptopot sorsolunk ki.
 

A játék heti kérdése:
Melyik szelektornak van a legalacsonyabb prioritása?
1. Elem
2. Osztály
3. ID
 

A választ a tanulok@erdsoft.com e-mail-címre kell elküldeni, a tárgysorba pedig a következőt kell beírni: HÉTNAP-TANULOK. Sok szerencsét!
 


 

Néhány szó rólunk:

Az ErdSoft (www.erdsoft.com) 2011-ben alakult meg. Csapatunkat a fiatalos lendület, a szakértelem, a folyamatos tanulás és tapasztalatgyűjtés jellemzi. Ügyfeleinknek igyekszünk teljes körű szolgáltatást nyújtani — bátran fordulhatnak hozzánk, legyen szó webfejlesztésről, alkalmazásokról, SEO-optimalizálásról, grafikai tervezésről, marketingről vagy szövegírásról. Csapatunk sikerét mi sem bizonyítja jobban, mint a több száz elkészült weboldal és a számos elégedett ügyfél Szerbiában, Magyarországon és az Egyesült Királyságban.

Szeretne értesülni, ha új cikk jelenik meg Számtek rovatunkban? Iratkozzon fel értesítőnkre!

E-mailben értesíteni fogjuk Önt az új cikkekről. Feliratkozáshoz kérjük adja meg a nevét és az e-mail címét.

Hozzászólások

Kapcsolódó cikkek

A vízesés és az öröklődés
Számtek
  • Erdsoft
  • 2019.10.17.
  • LXXIV. évfolyam 42. szám
A vízesés és az öröklődés
Számtek
  • Erdsoft
  • 2019.10.03.
  • LXXIV. évfolyam 39. szám
Facebook

Támogatóink