Pređi na sadržaj

Kaskade, nasleđivanje i specificitet

Da li ste se ikada zapitali kako brauzer odlučuje koja CSS definicija će zapravo prevagnuti i doneti odluku kako će predstaviti vaš HTML kod?

Priča je prilično kompleksna. CSS (eng. Cascade Style Sheets), kao što se iz imena naslućuje, kroz kaskade određuje koje će osobine da modifikuje datom elementu. Kaskada je povezana sa tri osnovna koncepta: značaj, nasleđivanje i specificitet.

Značaj

Stilovi koje će vaš brauzer da interpretira su definisana sa 3 različite destinacije, i sledećim redom poništavaju jedni druge:

  1. Podrazumevani stilovi vašeg pretraživača
  2. Specifična podešavanja korisnika
  3. Autorski stilovi, tj. bilo koji CSS kod inline, u stranici ili eksterni

U ovu listu je potrebno dodati i deklaraciju !important koja kada se primeni sa strane korisnika, preuzima najveći značaj, tako da konačna lista bi izgledala ovako:

  1. Podrazumevani stilovi pretraživača
  2. Specifična podešavanja korisnika
  3. Autorski stilovi
  4. Autorski stilovi +  !important
  5. Korisnička podešavanja + !important

Nasleđivanje

Kroz nasleđivanje se propagiraju vrednosti podređenih elemenata (eng. child element) od njihovih ancestora (eng. parent element). Što znači da će se neke CSS osobine automatski da nasleđuju kroz podređene elemente, na primer ako nad <body> tagom definišete font, ova vrednost će se nasleđivati kroz sve elemente, dok god je ne prepišete nekom drugom vrednošću na nižim nivoima.

body {font-family: "Times New Roman", Times, serif;}
p {font-family: Arial, Helvetica, sans-serif;}
<body>
<h1>Ovaj naslov će naslediti definiciju iz <body> taga</h1>
<p>Ovaj paragraf će korisiti drugu porodicu fontova </p>

Ne nasleđuju sve CSS osobine, u tu svrhu možete korisiti inherit vrednost.

Stvari se mogu zakomplikovati kada koristite relativne vrednosti, na primer za veličinu teksta:

<body>
<h1>Naslov je 24px</h1>
<p>Ovaj tekst je veličine 14px
<ul>
<li>Ovde očekujemo isto veličinu teksta od 14px, međutim ona je 20px</li>
</ul>
</p>
body { font-size:62.5%; } 
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* !=14px*/

U gore navedenom primeru, lista će na kraju imati veličinu teksta od 20px umesto očekivanih 14px iz razloga pravila nasleđivanja.

U CSS sam za <li> tag koristila relativnu vrednost za veličinu fonta. Pošto je veličina fonta nasleđena od „parent“ elementa, kojem je izračunata vrednost 14px, <li> element će naslediti tu osobinu, i veličina fonta će biti 1.4 puta veća od prethodnika tj. 20px.

Specificitet

Bitno je znati da svako CSS pravilo koje napišete ima svoju težinu. Pravilo veće težine će prevagnuti koje CSS osobine će se primeniti nad vašim HTML kodom. Ukoliko su dva pravila iste težine, ono koje je definisano poslednje će se na kraju primeniti.

Kako izračunati specificitet?

Postoje nekoliko pravila, ali jedna od jednostavnijih formula je sledeća:

Vrednost 1 – elementi i pseudo elementi

Vrednost 10 – atributi, klase i pseudo-klase

Vrednost 100 – elementi definisani sa ID

Vrednost 1000 – „inline“ stilovi

Primeri:

div.container = element + klasa = 1 + 10 = 11

#article p = ID + element = 100 + 1 = 101

body #footer a:hover = 1 + 100 + 1 + 10 = 112

Web Inspector - Chrome
Precrtana pravila su nadjačana zbog specificiteta, nesleđivanja ili važnosti

Predlažem da što više korisite Web Inspectore (Chrome, Safari, Firefox), FireBug plug-in (FireFox) ili Developer Toolbar (IE, Edge) kako biste lakše razumeli CSS pravila.

Postavi svoj prvi komentar

Ostavite odgovor

Vaša adresa e-pošte neće biti objavljena. Neophodna polja su označena *