Napomena: aktiviran adaptivna verzija stranica koja se automatski prilagođava mala veličina Vaš preglednik i skriva neke pojedinosti stranice radi čitljivosti. Sretno gledanje!

Drago mi je da vas sve ponovno mogu pozdraviti na stranicama bloga. stranica na! U prošlom članku ukratko smo razgovarali i razvrstali nekoliko jednostavni primjeri... Danas je naša tema tako važna stvar kao što je nasljeđivanje u CSS-u. CSS nasljeđivanje naziva se prosljeđivanje svojstava s roditeljskog elementa na djecu. Ili ako ste jasniji: prosljeđivanje CSS svojstava s gornje oznake na one ugniježđene. Štoviše, hoće li se svojstvo naslijediti ili ne, ovisi o samom svojstvu, a ne o oznakama na koje je primijenjeno. Kako radi? Vrlo je jednostavno, vratimo se našem izgledu uz pomoć kojeg smo naučili:

Ako napišemo u CSS-u:

Tijelo (boja: zelena;)

Ta boja natpisa "I ovdje pišemo bilo koji tekst koji nas zanima" čudno će postati zelena. A što će se dogoditi ako svoj natpis priložimo u blok? Odnosno, ovo je ono što je dio kodeksa koji nas zanima postao:

Tada će natpis i dalje ostati zelen, budući da je vlasništvo boja naslijeđen, što znači da je proslijeđen iz oznake tijelo na oznaku koja je na njoj pričvršćena razd i dalje (ako je bilo gdje). I odmah zadatak za vas: koje će boje biti naš natpis ako imamo sljedeći kod

Za referencu - oznaka koja jednostavno označava dio teksta. Ako ništa nije navedeno za njega u CSS-u, onda ne radi ništa.

Točan odgovor: crveno. Budući da je div oznaka prekinula nasljeđivanje od tijela (ali samo za oznake ugniježđene unutar div).

Koji je prioritet nasljeđivanja u CSS-u?

Da, apsolutno nikakve. Prednost nasljeđivanja u CSS-u nije ni nula, jednostavno ga nema. Što nam ovo govori? Da, da će se svako svojstvo postavljeno izravno na ugniježđenu oznaku izvršiti umjesto svojstva koje bi naslijedio (ali nismo dopustili da se to dogodi, jer smo naveli isto svojstvo, ali s drugom vrijednošću).

To je jasno prikazano prethodnim primjerom, gdje je oznaka razd nije dao oznaku raspona naslijediti zelenu boju teksta od oznake tijelo, a sve zato što smo za oznaku razd Jasno su najavili crvenu boju, što znači da crvena boja ima najveći prioritet...

Ili možda ne? Pogledajmo primjer u nastavku, gdje će za istu oznaku biti eksplicitno, ali na drugačiji način, navedeno je isto svojstvo. Pa pogledajmo naš CSS:

Div p (Boja: zelena;) p (boja: crvena;)

I tamo i tamo boja je jasno naznačena za odlomke, ali u jednom od slučajeva, samo za odlomke unutar bloka, pogledajmo rezultat:

I samo unutar paragrafa - crveno

Da prijatelji, ovaj put ništa revolucionarno, logika je pobijedila :) Doista, to je razlog zašto su to kaskadne tablice, tako da možete posebno specificirati boje za ugniježđene elemente i ne brinuti o "presijecanju" svojstava.

Sumirajmo: CSS nasljeđivanje ima najniži mogući prioritet, ali zapamtite da nisu sva svojstva naslijeđena. Svojstva koja imaju pojašnjenje okolnosti (pri pokazivaču miša; ako je jedna oznaka ugniježđena u drugu, itd.) imaju prednost nad svojstvima navedenim za sve ostale slučajeve.

Još važna točka: ako nakon vrijednosti CSS svojstva stavi razmak i napiši ! važno, tada će ovo svojstvo uvijek i svugdje imati najviši prioritet. Primjer snimanja:

P (boja: crvena! Važno;)

Savjetovao bih vam da izbjegavate ovu tehniku, umjesto da razmislite unaprijed ispravna struktura tako da ne morate tako grubo preklapati jedno svojstvo s drugim, ali ponekad njegova uporaba može biti vrlo praktična.

I za kraj, evo što biste trebali imati na umu ako vam nešto ne uspije – ako to napišete ovako:

P (boja: crvena;) p (boja: zelena;)

Tada će se primijeniti vrijednost koja je ispod u kodu, tj zelena... Takvih slučajeva može biti mnogo, pogotovo dok imate malo iskustva, a pritom mogu biti i poprilično raznoliki, kako biste se brzo snašli u problemu, savjetujem vam da ga iskoristite. Kako ih koristiti i što su, možete pročitati na gornjoj poveznici.

1) Svojstva navedena za klasu (klasu) ili jedinstveni identifikator (id) imaju najveći prioritet, a prioritet id-a je veći od prioriteta klase. Sve o tim selektorima i općenito o konceptu selektora naučit ćete u sljedećem članku.

Još jednom da vas podsjetim da je najbolji učitelj HTML-a i CSS-a praksa + referenca, što sam, inače, preporučio u članku o tome. Također preporučujem pretplatu na ažuriranja na mom blogu, jer ću nakon opće edukacije i uvodnih članaka svakako pisati o nekim od zamršenosti i, ako smijem reći, tajnama ispravnog izgleda stranice.

To je sve za danas, hvala na pažnji!

U ovom poglavlju:

Nasljedstvo

Prilikom navođenja stila za element, neka svojstva mogu naslijediti njegova djeca i potomci, ovaj učinak se naziva nasljeđivanjem.

Na primjer, svi elementi koji se nalaze unutar elementa su njegova djeca i potomci. Ako u stilu za pitaj sa koristeći CSS svojstva boje boje teksta su crvena, tada će boja teksta svih njegovih djece i potomaka također postati crvena:

Boja teksta zaglavlja je crvena

Boja teksta odlomka je također crvena.

Naslijeđena svojstva mogu se nadjačati primjenom pojedinačnog pravila za željeni element:

Boja teksta zaglavlja plava

Boja teksta odlomka je crvena.

Izračunavanje specifičnosti (prioriteta) selektora

Postoji mnogo načina za primjenu vizualnog stila željeni element... Ali što se događa ako dva ili više međusobno isključivih selektora odaberu isti element? Ova dilema je riješena s dva CSS principi: specifičnost selektora i kaskade.

Specifičnost selektora(specifičnost selektora) određuje njihov prioritet u stilskoj tablici. Što je selektor specifičniji, to mu je veći prioritet. Za izračunavanje specifičnosti selektora koriste se tri grupe brojeva (a, b, c), izračun je učinjeno kako slijedi:

• Broji se broj identifikatora u selektoru (skupina a)
• Broji broj selektora klasa, atributa i pseudo-klasa u selektoru (skupina b)
• Broji broj selektora tipa i pseudoelemenata u selektoru (skupina c)
• Selektor unutar negacije pseudoklase (: not) broji se kao bilo koji drugi selektor, ali sama pseudoklasa negacije ne sudjeluje u izračunavanju selektora
• Univerzalni selektor (*) i kombinatori nisu uključeni u izračun težine selektora

U primjeru u nastavku, birači su raspoređeni prema rastućoj specifičnosti:

* / * a = 0 b = 0 c = 0 -> specifičnost = 0 * / li / * a = 0 b = 0 c = 1 -> specifičnost = 1 * / ul li / * a = 0 b = 0 c = 2 -> specifičnost = 2 * / ul ol + li / * a = 0 b = 0 c = 3 -> specifičnost = 3 * / h1 + * / * a = 0 b = 1 c = 1 -> specifičnost = 11 * / ul ol li.red / * a = 0 b = 1 c = 3 -> specifičnost = 13 * / li.red.level / * a = 0 b = 2 c = 1 -> specifičnost = 21 * / # x34y / * a = 1 b = 0 c = 0 -> specifičnost = 100 * / # s12: nije (p) / * a = 1 b = 0 c = 1 -> specifičnost = 101 * /

Najveći prioritet je broj iz grupe "a", broj iz grupe "b" ima srednji prioritet, broj iz grupe "c" ima najmanji prioritet. Brojevi iz različite grupe ne zbrajaju se u jedno zajedničko, t.j. uzmimo iz primjera zadnji redak sa specifičnošću selektora "101" - to ne znači broj "sto i jedan", to znači da je jedan selektor iz "a" grupe (identifikator) i jedan selektor iz korištena je grupa "c" (selektor tipa).

Umetnuti stil ima prednost nad stilom definiranim u internom ili vanjskom listu stilova. Međutim, ako za specifično svojstvo u internom ili vanjskom stilskom listu s posebnom! važnom deklaracijom, imat će prednost nad vrijednošću sličnog svojstva u internom stilu. Važna deklaracija pojavljuje se nakon vrijednosti svojstva, prije točke-zarez:

Prvi odlomak

Drugi stavak.

Kaskadno

Cascading je CSS značajka pomoću koje preglednik određuje koje će se vrijednosti svojstva primijeniti na element kada dođe do sukoba svojstava. Sukob svojstava nastaje kada je definirano više pravila za element čiji selektori imaju istu specifičnost i sadrže ista svojstva ali s različitim značenjima.

Kaskadno funkcioniranje radi na sljedeći način: ako je u tablici stilova za jedan element definirano nekoliko pravila, čiji selektori imaju istu specifičnost i sadrže proturječna svojstva, tada su vrijednosti sukobljenih svojstava pravila koje se nalaze ispod u stilski list postavljen je za element:

Boja teksta odlomka je zelena.

Ako različita pravila za jedan element sadrže svojstva koja nisu u sukobu, tada se kombiniraju u jedan stil, tj. svako novo pravilo dodaje nove informacije o stilu prema gornjem pravilu:

H1 (boja: siva; font-family: sans-serif;) h1 (obrub-dno: 1px puna crna;)

Kôd u gornjem primjeru je ekvivalentan kodu u primjeru ispod, u kojem su sva tri svojstva navedena u jednom pravilu:

H1 (boja: siva; font-family: sans-serif; obrub-dno: 1px puna crna;)

Obično su navedena dodatna pravila za element u slučajevima kada je jedan stil postavljen za nekoliko elemenata odjednom, ali osim ovoga potrebno je dodati još nešto za određeni element:

H1, h2, h3 (/ * isti stil za tri elementa * / boja: siva; porodica fontova: sans-serif;) / * dodatno pravilo za naslove druge razine * / h2 (obrub-dno: 1px puna crna;)

Prag za ulazak u CSS nije jako visok, prvenstveno zbog same prirode njegove sintakse, koja je transparentna i lako razumljiva čak i neiskusnom web dizajneru. Toliko je jednostavno da jednostavno možete kodirati jednostavnu stranicu u CSS-u nakon samo nekoliko sati učenja o kaskadnim stilskim tablicama. Ali ova prividna jednostavnost vara. Nakon nekoliko sati rada, vaša savršeno sastavljena stranica izgleda sjajno u Safariju, ali propada ako ne prihvatite potrebne mjere unaprijed, da sve radi kako treba i u Internet Explorer... U panici, dodajete hrpu hakova i filtara gdje ste jednostavno morali podesiti nekoliko postavki ili jednostavno koristiti drugačiji pristup. Znati kako se uhvatiti u koštac s tim problemima dolazi s iskustvom i puno pokušaja i pogrešaka te neuspjeha koji vas navode na pravi put učenja CSS-a. Razumijevanje nekih koncepata koji su na prvi pogled poprilično teško razumljivi i koji izgledaju iznimno dosadno iznimno je važno za daljnju upotrebu. No, mnogi jednostavno ne pridaju dovoljno pozornosti njihovom razumijevanju, što je često korijen svih problema prilikom korištenja. Dva slična koncepta su specifičnost i nasljeđe. Nije baš česta riječ u rječniku web dizajnera, zar ne? Mnogo je zanimljivije i zabavnije govoriti o radijusu granice i sjeni teksta, ali specifičnost i nasljeđe su temeljni. Osnovni konceptišto svatko tko tvrdi da se naziva stručnjakom za CSS mora jasno razumjeti. Razumijevanje ovih koncepata pomoći će vam stvoriti čiste, fleksibilne tablice stilova koje se mogu održavati. Pogledajmo što znače i kako rade. Kaskadno je u središtu CSS-a. U konačnici određuje koja će se svojstva promijeniti. zadanog elementa... Kaskada je povezana s tri glavna koncepta: podrijetlo, prioritet i specifičnost. CSS kaskada prolazi kroz ova tri koraka pravila kako bi odredila koja svojstva dodijeliti elementu. Na kraju ovog procesa, težina će se kaskadno rasporediti za svako pravilo, a ta težina određuje koje pravilo ima prednost u slučaju spora.

Porijeklo i prioritet

Stilski listovi mogu imati nekoliko podrijetla:

1. Korisnički agent
   • Na primjer, zadani stil preglednika
2. Korisnik
   • Stil koji je odredio korisnik u postavkama preglednika
3. Autor
   • Autorski stil naveden od strane autora stranice (vanjski, umetnuti ili umetnuti stil, kada su u HTML dokumentu informacije o stilu za jedan element navedene u njegovom atributu stila)

Prema zadanim postavkama, postoji redoslijed u kojem se stilovi iz raznih izvora obrađeno - tako da autorska pravila nadjačavaju pravila korisnika i preglednika itd. Također postoji! Važna konstrukcija prednosti, koja se koristi za uravnoteženje upotrebe prilagođenih i autorskih stilskih tablica. Dok tablica stilova za izradu prema zadanim postavkama ima prednost nad ostalima, prilagođeno pravilo deklarirano s klauzulom! Importan nadjačat će čak i onu za izradu s istom klauzulom. Imajući to na umu, pogledajmo konačni popis, uzlaznim redoslijedom važnosti prema prioritetu i porijeklu:

1. Oglasi korisničkog agenta,
2. prilagođeni oglasi,
3. Oglasi za autorska prava,
4. Izjave autora uz! Važna konstrukcija,
5. Prilagođene deklaracije s! Važna konstrukcija.

Ova fleksibilnost u određivanju prioriteta ključna je za kaskadne tablice stilova jer omogućuje korisnicima da nadjačaju stilove koji bi mogli ometati dostupnost web stranice. (Korisniku će možda trebati više veliki ispis ili neku drugu boju teksta, na primjer.)

Specifičnost

Kako smo gore saznali, svaki CSS pravilo ima određenu težinu, odnosno može biti više ili manje važno od drugih, ili biti jednako važno po svojoj važnosti. Ova težina određuje koja će se svojstva primijeniti na stavku kada postoje konkurentske norme. Nakon sortiranja po prioritetu i porijeklu, kaskadno rangiranje rezultirajuća pravila jednaka u smislu ovih parametara prema specifičnosti - ako je jedno pravilo specifičnije (specifičnije) od drugog, ono ga nadjačava. Ako dva pravila imaju istu težinu (podrijetlo, prioritet i specifičnost), koristi se ono koje je naknadno objavljeno.

Kako izračunati specifičnost?

Ako postoji više metoda za izračun specifičnosti selektora. Najviše brz način je kako slijedi: Dodajte 1 svakom elementu ili pseudoelementu (na primjer: prije i: poslije); dodajte 10 svakom atributu (na primjer), klasi ili pseudo-klasi (: link ili: lebdjeti); dodajte 100 za svaki ID i dodajte 1000 inline stilu. Izračunajmo specifičnost sljedećih selektora koristeći ovu metodu: p.note - 1 klasa + 1 element = 11 #bočna traka p - 1 ID + 1 atribut + 1 element = 111 tijelo #main .post ul li: zadnje dijete - 1 ID + 1 klasa + 1 pseudo klasa + 3 elementa = 123 Slična metoda opisana u specifikaciji W3C sugerira da započnemo procjenom specifičnosti kao nula (u broju abcd svaka znamenka je nula a = 0, b = 0, c = 0 i d = 0) i zamijenimo znamenke prema elementima selektora, atributima itd.):

• a = 1 ako je inline stil,
• b = broj vjerodajnica,
• c = broj atributa selektora, klasa i pseudo-klasa,
• d = broj naziva elemenata i pseudoelemenata.

Izračunajmo specifičnost sljedećeg skupa selektora:

• a = 1, b = 0, c = 0, d = 0 -> 1000 podnožje nav li: zadnje dijete
• a = 0, b = 0, c = 1, d = 3 → 0013 #unos bočne trake: nije ()
• a = 0, b = 1, c = 1, d = 1 → 0111

Zapamtite da je ne-CSS oznakama prezentacije dodijeljena vrijednost specifičnosti nula, koja će se primijeniti na oznaku fonta, na primjer. Vraćajući se na! Važna konstrukcija, ne zaboravite da se korištenjem ovog prioriteta za kratka svojstva automatski dodjeljuje svim podsvojstvima, čak i ako ih vraća na njihove izvorne vrijednosti. Ako koristite uvezene tablice stilova u CSS-u (@import), morate ih deklarirati prije svih ostalih pravila tako da se smatraju ispred svih pravila u CSS datoteci.

Kako učiniti da specifičnost radi za vas

Ako nemarno slijedite specifičnost, onda vas to može dovesti do stvaranja nečeg nejasnog s masivnim hijerarhijska struktura nepotrebna i pretjerano složena pravila. Da biste to izbjegli, morate imati na umu osnovna pravila za rad sa specifičnostima:

• Kada počnemo raditi na CSS-u, upotrijebite uobičajene selektore i usput dodajte pojedinosti i dotjerajte ih
• Korištenje složenih selektora ne znači da ih trebate učiniti što složenijim
• Trebali biste se više oslanjati na specifičnost nego na redoslijed selektora, tako da će se vaše tablice stilova lakše uređivati ​​i održavati (osobito izvan ljudi).

Refaktoring CSS selektori manje specifično za eksponencijalni stupanj teže je nego samo dodavanje specifičnih pravila kako se pojave situacije.

Nasljedstvo

Nasljeđivanje je način širenja vrijednosti svojstava elemenata s roditelja na dijete. Neka CSS svojstva prema zadanim postavkama nasljeđuju djeca elemenata. Na primjer, ako postavite oznaka tijela font specifičan za stranicu, tada će font naslijediti drugi elementi, na primjer, naslovi i odlomci, bez potrebe za odgovarajućom registracijom svaki put. CSS specifikacija definira kada se svako svojstvo nasljeđuje prema zadanim postavkama. Nisu sva svojstva naslijeđena, ali možemo prisiliti neka svojstva da budu naslijeđena dodjeljivanjem vrijednosti nasljeđivanja. Iako je ovo donekle izvan dosega ovog članka, treba napomenuti da se nasljeđivanje u CSS-u ne smije miješati s nasljeđivanjem u objektno orijentiranom programiranju (OOP). Ovako izgleda definicija OOP nasljeđivanja s Wikipedije, što jasno daje do znanja da ne govorimo o istoj stvari: U objektno orijentiranom programiranju (OOP), nasljeđivanje je način formiranja novih klasa [...] korištenjem klase koje su već definirane... Nasljeđe se koristi da vam pomogne u korištenju postojeći kod uz minimalne promjene. Nove [klase ...] nasljeđuju atribute i ponašanje postojećih klasa. ...

Kako funkcionira nasljeđivanje?

Kada element naslijedi vrijednost od svog roditelja, on nasljeđuje svoju izračunatu vrijednost. Što to znači? Svako svojstvo u CSS-u prolazi proces u četiri koraka kako bi se odredila njegova vrijednost. Evo citata iz W3C specifikacije: Konačna vrijednost svojstva rezultat je izračuna u četiri koraka: vrijednost specificirana u specifikaciji (specificirana vrijednost), zatim se razrješava na vrijednost koja se koristi za nasljeđivanje (izračunata vrijednost), što se pretvara u apsolutnu vrijednost, ako je potrebno, i već se konačno pretvara u vrijednost u skladu s ograničenjima lokalnog okruženja ("stvarna vrijednost"). Drugim riječima:

1. Navedena vrijednost.
Korisnički agent (korisnički agent, isti preglednik) određuje odakle treba koristiti vrijednost za svojstvo - iz stilova, da li je naslijeđena ili ima svoj izvorni izgled.
2. Izračunata vrijednost.
Navedena vrijednost razrješava se u izračunatu vrijednost i postoji čak i kada se svojstvo ne primjenjuje. Dokument ne bi trebao biti upisan kako bi zadanu vrijednost je utvrđeno.
3. Vrijednost za korištenje.
Korištena vrijednost uzima izračunatu vrijednost i s njom rješava sve ovisnosti koje se mogu izračunati tek nakon toga
4. Stvarna vrijednost.
Ova se vrijednost koristi za konačno renderiranje nakon primjene bilo kakvih aproksimacija (na primjer, transform decimalni brojevi u cjelinu).

Ako pogledate specifikaciju CSS svojstva, vidjet ćete da to opisuje. izvorno značenje(zadano), elemente na koje se primjenjuje, status nasljeđivanja i njegovu izračunatu vrijednost (između ostalog). Na primjer, specifikacija za svojstvo background-color je sljedeća: Naziv: background-color Vrijednost: Početno: transparentno Primjenjuje se na: sve elemente Naslijeđeno: nema Postotke: N / A Mediji: vizualni Izračunata vrijednost: izračunata boja(e) Malo zbunjeni? Može biti. Dakle, što bismo trebali razumjeti iz svega ovoga? A zašto to ima veze s nasljedstvom? Okrenimo se prvoj rečenici ovog odjeljka, što će nam sada biti jasnije. Kada element naslijedi vrijednost od svog roditelja, on nasljeđuje svoju izračunatu vrijednost. Izračunata vrijednost postoji čak i ako nije bila u stilskoj tablici i, sukladno tome, čak i u ovom slučaju, može se naslijediti i preuzeti vrijednost koja je postojala prema zadanim postavkama. Na ovaj način možete koristiti nasljeđivanje čak i ako roditelj nije imao određenu specifičnu vrijednost.

Korištenje nasljeđivanja

Najvažnija stvar koju trebate znati o nasljeđivanju je njegovo postojanje i način na koji funkcionira. Općenito, zapravo, nasljedstvo u u ovom slučaju vrlo jednostavno za razumjeti. Zamislite da morate odrediti veličinu fonta ili obitelj fontova za svaki element, a ne samo ga dodati u oznaku body? To bi bilo strašno glomazno, zbog čega je nasljeđivanje tako korisno. Nemojte ga prekidati korištenjem generičkog selektora (*) sa svojstvima koja su naslijeđena prema zadanim postavkama. Ne morate pamtiti sve naslijeđene vrijednosti, ali zauzvrat ih morate zapamtiti. Rijetko je da CSS članak ne sadrži ništa loše vijesti o Internet Exploreru. Ovaj članak nije iznimka. IE podržava samo nasljeđivanje vrijednosti od verzije 8, s izuzetkom svojstava smjera i vidljivosti. Cool.

Korištenje alata

Ako koristite alate poput Firebuga ili Safarijevog web inspektora, možete vidjeti kako određena kaskada funkcionira, koji selektori imaju veću specifičnost i kako nasljeđivanje funkcionira za određeni element. Na primjer, ispod je Firebug u akciji, provjeravajući element na stranici. Možete vidjeti da su neka svojstva nadjačana (na snimci zaslona precrtana) drugim, specifičnijim (specifičnim) pravilima:
Na sljedećoj snimci zaslona prikazuje Safari Web Inspector izračunate vrijednosti element. Na ovaj način možete vidjeti vrijednosti čak i ako nisu jasno zapisane u tablici stilova:

Zaključak

Čak i ako stvarno ne razmišljate o njima, ova pitanja su u vama svakodnevni rad poput posla osobe koja kodira CSS. Pogotovo u slučaju specifičnosti, važno je znati kako to utječe na stilske tablice i kako ga planirati tako da uzrokuje samo minimalnu količinu problema kodiranja. I bolje je da uopće ne zove. 11. ožujka 2014. u 18.23 sati

Enkapsuliranje CSS stilova - 1. dio. Problem

• CSS,
• HTML

Glavni pokretač web rasta na prijelazu tisućljeća bio je potrošnja sadržaj. Web stranice su stvorene kako bi svojim posjetiteljima pružile bilo što korisna informacija ili zabavni sadržaj. Ali u posljednjih godina važnost web resursa koji pružaju usluge korisnicima dramatično je porasla generiranje sadržaj (tekst i grafički urednik, proračunske tablice, instant messengeri, itd.). To je uzrokovalo transformaciju web-mjesta u aplikacije na jednoj stranici i migraciju na web složenih sučelja koja su prije bila prerogativ aplikacijskih programa.

U procesu ovih transformacija i migracija pokazalo se da rast radnog intenziteta izrade i održavanja web sučelja značajno nadmašuje rast njegove složenosti. Pokušali su (i još pokušavaju) riješiti problem cijepanjem u module, apstrakcijom, enkapsulacijom. U tu svrhu stvorena je veliki broj JavaScript okviri (Backbone, Ember, Angular), HTML predlošci (Jade, Handlebars), sustavi upravljanja ovisnostima (RequireJS) itd.

Najtežim s ove točke gledišta pokazao se CSS, gdje, dizajnom jezika, bilo koje svojstvo deklarirano u bilo kojoj uključenoj CSS datoteci ili oznaci stila može utjecati na prikaz bilo kojeg elementa DOM stabla.

Formalizacija zadatka.

Radi jednostavnosti, pretpostavimo da je sav JavaScript kod umotan u module koji ne znaju ništa jedan o drugom i sadrže sve što im je potrebno za rad. Modul zna kako generirati svoj HTML prikaz (nazovimo ga blok) i gdje ga umetnuti u DOM stablo. U ovom slučaju, blokovi se mogu ugniježditi jedan u drugom. Na razini označavanja blok se sastoji od korijenski element i dječji elementi.
Zadatak je da na prikaz elemenata bilo kojeg bloka može utjecati samo namjerno promjena u HTML prikazu i odgovarajućim CSS datotekama i oznakama stila.

Svaka nenamjerna promjena u prikazu blok elemenata će biti pozvana curenja stilova.

Do curenja stilova može doći kao kod promjene svojstava elemenata drugih blokova ( svojstva curenja), te s promjenama u DOM stablu ( kaskadno curenje).

Izvori curenja stila

Ako uzmemo u obzir bilo koji blok sam po sebi, onda stilovi mogu procuriti i izvana i izvana. Zbog činjenice da će curenje prema van za jedan blok biti curenje izvana za drugi, pri klasifikaciji propuštanja možemo se ograničiti na slučaj propuštanja izvana.

1. Nasljeđivanje imovine

Ako neki element nedostaje u CSS svojstvu, eksplicitno postavljena vrijednost koristi se zadana vrijednost. Ako ovo naslijediti vrijednost, tada se vrijednost svojstva postavlja jednaka vrijednosti svojstva roditeljskog elementa.
Dakle, korijenski element trenutnog bloka može naslijediti stilove svog roditelja, koji po definiciji pripada drugom bloku.

Na primjer,
.vanjski blok (boja: crvena;)

2. Sukladnost svojstava

Ako CSS svojstvo bilo kojeg elementa nema eksplicitnu vrijednost, koristi se zadana vrijednost. Ako se ovo svojstvo podudara sa svojstvom roditeljskog elementa (na primjer, kao svojstva širine i visina sa zadanom vrijednošću auto) ili oponaša (na primjer, kao svojstvo boje pozadine sa zadanom vrijednošću transparentno), zatim krajnji korisnik to će ostaviti dojam da su stilovi roditeljskog elementa procurili preko stilova djeteta.

Na primjer,
.vanjski blok (pozadina: crvena;)

Vrijedi napomenuti da se samo postojanje stila propušta kroz konformizam, budući da stilovi roditeljskog elementa formalno se ne primjenjuju na podređeni element, ali na praksi ovo ponašanje se čak može smatrati i poželjnim. Ali ako krenemo od formalni gledišta, morate priznati da konformizam stilova definitivno narušava njihovu inkapsulaciju. Kao praktičan dokaz autor poziva znatiželjnog čitatelja da se posluži testom patke.

3. Kaskadni kaos

Primjena stilova na birače cilja proces je u tri koraka.
U prvoj fazi od Ukupno DOM stabla su odabrana svi elementi koji odgovaraju selektoru ciljnog elementa. Na primjer, za .current-block h3 selektor, prvi korak će odabrati sve elemente s oznakom h3. Ne postoji način da se ograniči prostor odabira na bilo koji dio DOM stabla.
U drugom koraku, odabrane stavke se filtriraju kako bi odgovarale biraču pomicanjem roditeljski elementi ciljni element. Kada koristite kombinator potomaka, podudaranje može ići sve do korijena DOM stabla. Kada se koristi opći sibling kombinator ~ (generalni sibling kombinator), do prvog sibling elementa.

Na primjer,
.trenutni blok h3 (pozadina: plava;) .vanjski blok h3 (pozadina: crvena;)

Jedini način Da biste ograničili prostor za pretraživanje, koristite podređeni kombinator i najbliži sibling kombinator + (kombinator susjednih siblinga). Da biste to učinili, trebate postaviti točan put u DOM stablu od ciljnog elementa do korijenskog elementa bloka, što dovodi do povećanja spajanja CSS i HTML koda.

U trećem koraku odabranim i filtriranim ciljevima dodjeljuju se svojstva stila. Štoviše, ako se za isti ciljni element prijavi više selektora, svaki sa svojom varijantom svojstva, tada se vrijednost svojstva određuje na temelju specifičnosti selektora, a ako je jednaka, na temelju redoslijeda deklaracije.

Dakle, pod određenim uvjetima (korišteni kombinatori, omjer specifičnosti, red deklaracije), stilovi elemenata vanjskog bloka mogu utjecati na stilove elemenata ugniježđenog bloka. Ovaj bi se utjecaj mogao izbjeći ako je moguće odrediti regiju DOM stabla u kojoj se odabiru i filtriraju ciljni elementi.

4. Kondicioniranje položaja

Elementi bloka mogu promijeniti svoj prikaz ovisno o položaju bloka u DOM stablu kada se koriste srodni kombinatori (+ i ~) ili pseudo-klase (: first-child, itd.) u selektorima.

Na primjer,

Blok (pozadina: crvena;) .blok + .blok (pozadina: plava;)