Subscribe

CSS – Cascading/Inheritance

CssKaskada

Ova tema je veoma značajna jer njeno razumevanje omogućava kreiranje dokumenata koji će biti laki za održavanje.

Cascading predstavlja proces koji određuje koji definisani still će biti primenjen na koje svojstvo za svaki definisani tag.

Cascading rešava višestruko postavljanje stilova na nekom elementu u različitim izvorima, dok inheritance rešava problem primene stilova kada nema definisanih stilova na elementima.

Za nasleđivanje je bitno da znamo da stilovo koji se odnose na tekst, njegovu boju i veličinu se nasleđuju od definisanog roditelja, dok stilovi koji su povezani sa prikazivanjem div-ova, paragrafa i drugi elementi kao što su okviri, padding, margin i pozadinske boje se ne nasleđuju.

Stilovi mogu biti definisani na više različitih lokacija (eksterni fajl, HTML fajl, itd…).

Prvi izvor je svakako browser koji primenjuje podrazumevane stilove na definisane tagove (npr. <em> tagovi kreiraju italic tip stila).
Drugi izvor je korisnički definisani stilovi. Ovi stilovi se mogu definisati u browser-u (npr. u Internet Explorer-u ova opcija se nalazi u Tools->Internet options->Accessibility).
Autorski stilovi koje pišete vi kao autor i mogu biti definisani u posebnim css fajlovima i linkovani u html dokumentu, stilovi direktno upisani u html kao i inline stilovi koji su dodeljeni tagovima.

Pored ove kategorizacije postoji i kategorizacija po važnosti: normalna i važna (eng. important).

U W3C specifikaciji CSS-a definisan je tačan redosled primene stilova po sledećem algoritmu:

  • deklaracija u browser-u
  • korisnička normalna deklaracija (normalnom deklaracijom se smatra deklaracija koja nema pravilo !important)
  • autorska normalna deklaracija
  • autorska važna (eng. important) deklaracija
  • korisnički važna (eng. important) deklaracija

Sledeći algoritam koji utiče na primenu stilova je specifičnost selektora. Što je selektor specifičniji, imaće veći prioritet u odnosu na opštiji.

Ukoliko se desi da dve deklaracije imaju isto poreklo (korisnik, autor ili browser) poslednje definisan stil će biti primenjen.

Da bi browser odredio koju vrednost definisanu u stilu da primeni na odgovarajući tag, svakom stilu se dodeljuje težina (eng. weight).

Specifičnost selektora

Specifičnost selektora se računa na sledeći način:

  • a = broj 1 ako je deklaracija data u ‘style’ atributu a ne preko pravila selektora, 0 u drugom slučaju ( u HTML/u vrednosti atributa “style” na elementima nemaju selektore, tako da je tu vrednost spcifičnosti a=1, b=0, c=0 i d=0)
  • b = ukupan broj ID atributa u selektoru
  • c = ukupan broj ostalih atributa i pseudo klasa u selektoru
  • d = broj naziva elemenata i pseudo elemenata u selektoru

Univerzalni selektor, *child selector, neimaju vrednost u proračunu specifičnosti.

Pseudo elementi i klase imaju istu težinu kao i normalni elementi i klase.

Note Podsetnik

Pseudo klasa je način selekcije dela HTML dokumenta koji podrazmeva dinamičko stanje elementa (npr. :first-child, :link, :visited).Pseudo element omogućava postavljanje stila na deo sadržaja elementa iako nije definisan u dokumentu. Pseudo elementi se ne mogu primeniti na inline stilove i moraju biti poslednji definisani u lancu selektora. Ako se koriste, treba ih postaviti nakon  klase ili ID-a selektora i moguće je definisati jedan pseudo-element po selektoru.

Primer pseudo elementa (first-letter selektruje prvo renderovano slovo/karakter):

Primeri računanja specifičnosti selektora:

Šta raditi u scenarijima kada ipak želite da vaš stil bude uvek primenjen, bez obzira na do sada postavljene stilove?

Definisanje !important pravila je način da dodelimo najveći prioritet stilu koji smo definisali.

Ovom rešenju najčešće pribegavamo kada su sajtovi veliki i definisane stilova je teško ispratiti.

Ipak ….

Jedna od najčešćih grešaka u praksi jeste previše korišćenje !important pravila na velikim sajtovima, baš iz razloga što cascade-ing u kombinaciji sa nasleđivanjem može dovesti do komplikacija u razrešenju prioriteta u primeni definisanog stila kada se i najčešće odlučujemo za primenu !important pravila.

Da li smo razumeli specifičnost?

Ako ste pažljivo pročitali tekst, sa lakoćom ćete rešiti sledeći primer.

Predlažemo da pre nego što pogledate rešenje odvojite par minuta i sami pokušate da odredite specifičnost selektora.

Selector Inline style ID Klase, atributi i
pseudo-class
Tipovi elemenata
i pseudo elementi
body#home div#warning p.message 0 2 1 3
* body#home>div#warning p.message 0 2 1 3
#home #warning p.message 0 2 1 1
#warning p.message 0 1 1 1
#warning p 0 1 0 1
p.message 0 0 1 1
p 0 0 1 1

Primer preuzet sa ove lokacije

1 Comment

Leave a Reply