Napomena: aktiviran adaptivna verzija sajt koji se automatski prilagođava mala velicina Vaš pretraživač i sakriva neke od detalja stranice radi čitljivosti. Sretno gledanje!

Drago mi je što vas mogu ponovo pozdraviti na stranicama bloga. Site on! 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 se zove prosljeđivanje svojstava od roditeljskog elementa do djece. Ili ako ste jasniji: prosljeđivanje CSS svojstava sa gornje oznake na one ugniježđene. Štaviše, da li je svojstvo naslijeđeno ili ne, ovisi o samom svojstvu, a ne o oznakama na koje je primijenjeno. Kako radi? Vrlo je jednostavno, vratimo se na naš izgled uz pomoć kojeg smo naučili:

Ako napišemo u CSS-u:

Telo (boja: zelena;)

Ta boja natpisa "I ovdje pišemo bilo koji tekst koji nas zanima" čudno će postati zelena. A šta ć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 prikačenu uz njega div i dalje (ako je bilo gdje). I odmah zadatak za vas: koje će boje biti naš natpis ako imamo sljedeći kod

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

Tačan odgovor: crveno. Pošto 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. Prioritet nasljeđivanja u CSS-u nije čak ni nula, jednostavno ga nema. Šta nam ovo govori? Da, da će bilo koje svojstvo postavljeno direktno na ugniježđenu oznaku biti izvršeno umjesto svojstva koje bi naslijedio (ali nismo dozvolili da se to dogodi, jer smo naveli isto svojstvo, ali s drugom vrijednošću).

Ovo je jasno demonstrirano prethodnim primjerom, gdje je oznaka div nije dao oznaku raspon naslijediti zelenu boju teksta od oznake tijelo, a sve zato što smo za oznaku div 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 isti tag biti eksplicitno, ali na drugačiji način, isto svojstvo je navedeno. Pa hajde da pogledamo naš CSS:

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

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

I samo unutar pasusa - crveno

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

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

Drugi važna tačka: ako nakon vrijednosti CSS svojstva stavi razmak i upiši ! bitan, 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 ispravnu strukturu tako da ne morate tako grubo preklapati jedno svojstvo s drugim, ali ponekad njegova upotreba može biti vrlo praktična.

I za kraj, evo šta treba da imate na umu ako vam nešto ne pođe za rukom – ako to napišete ovako:

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

Tada će se primijeniti vrijednost koja je ispod u kodu, tj zeleno... Takvih slučajeva može biti mnogo, pogotovo dok imate malo iskustva, a u isto vrijeme mogu biti prilično raznoliki, kako biste se brže snašli u problemu, savjetujem vam da to iskoristite. Kako ih koristiti i šta su, možete pročitati na linku iznad.

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

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

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

U ovom poglavlju:

Nasljedstvo

Kada specificirate stil za element, neka svojstva mogu naslijediti njegova djeca i potomci, ovaj efekat se naziva nasljeđivanjem.

Na primjer, svi elementi koji se nalaze unutar elementa su njegova djeca i potomci. Ako je 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 pasusa je takođe crvena.

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

Boja teksta zaglavlja plava

Boja teksta pasusa je crvena.

Izračunavanje specifičnosti (prioriteta) selektora

Postoji mnogo načina za primjenu vizualnog stila željeni element... Ali šta se dešava ako dva ili više međusobno isključivih selektora izaberu isti element? Ova dilema je rešena sa dva CSS principi: specifičnost selektora i kaskade.

Specifičnost selektora(specifičnost selektora) određuje njihov prioritet u listi stilova. Š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čunavanje je izvedeno na sljedeći način:

• Broji se broj identifikatora u selektoru (grupa a)
• Broji broj selektora klasa, atributa i pseudo-klasa u selektoru (grupa b)
• Broji broj selektora tipa i pseudo-elemenata u selektoru (grupa c)
• Selektor unutar negacije pseudo-klase (: ne) se računa kao bilo koji drugi selektor, ali sama pseudo-klasa negacije ne učestvuje u izračunavanju selektora
• Univerzalni selektor (*) i kombinatori nisu uključeni u izračunavanje težine selektora

U primjeru ispod, selektori su raspoređeni po 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 od različite grupe ne zbrajaju u jedno zajedničko, tj. uzmimo iz primjera zadnji red sa specifičnošću selektora "101" - to ne znači broj "sto 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 u odnosu na stil definiran u internom ili vanjskom listu stilova. Međutim, ako za specifična imovina u internoj ili eksternoj tablici stilova sa posebnom! važnom deklaracijom, imat će prednost nad vrijednošću sličnog svojstva u internom stilu. Važna deklaracija se pojavljuje nakon vrijednosti svojstva, prije tačke zarez:

Prvi paragraf

Drugi paragraf.

Kaskadno

Cascading je CSS funkcija pomoću koje pretraživač određuje koje će vrijednosti svojstva biti primijenjene 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 sa 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 se vrijednosti konfliktnih svojstava pravila nalaze ispod u stilska lista je postavljena za element:

Boja teksta pasusa je zelena.

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

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

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

H1 (boja: siva; porodica fontova: sans-serif; ivica-dno: 1px puna crna;)

Obično su dodatna pravila za element naznačena 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 drugog nivoa * / h2 (ivica-dno: 1px puna crna;)

Prag za ulazak u CSS nije previsok, 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 listovima. Ali ova prividna jednostavnost vara. Nakon nekoliko sati rada, vaša savršeno sastavljena stranica izgleda sjajno u Safariju, ali propada ako ne prihvatite neophodne mere unapred, da sve radi kako treba i u Internet Explorer... U panici, dodajete gomilu hakova i filtera gdje ste jednostavno morali podesiti nekoliko postavki ili jednostavno koristiti drugačiji pristup. Znati kako da se uhvatite u koštac sa ovim problemima dolazi sa iskustvom i mnogo pokušaja i grešaka, i neuspjeha koji vas vode na pravi put za učenje CSS-a. Razumijevanje nekih koncepata koji su na prvi pogled prilično teški za razumijevanje i koji izgledaju krajnje dosadni izuzetno je važno za dalju upotrebu. Ali mnogi jednostavno ne obraćaju dovoljno pažnje na njihovo razumijevanje, što je često korijen svih problema pri njihovom korištenju. Dva slična koncepta su specifičnost i nasljeđe. Nije baš uobičajena riječ u vokabularu web dizajnera, zar ne? Mnogo je zanimljivije i zabavnije govoriti o radijusu granice i sjeni teksta, ali specifičnost i nasljeđe su fundamentalni. osnovni konceptišto svako ko tvrdi da se naziva stručnjakom za CSS mora jasno razumjeti. Razumijevanje ovih koncepata pomoći će vam da kreirate čiste, fleksibilne i fleksibilne tablice stilova. Hajde da pogledamo šta oni znače i kako rade. Kaskadno postavljanje je u srcu CSS-a. To na kraju određuje koja će se svojstva promijeniti. dati element... Kaskada je povezana s tri glavna koncepta: porijeklo, prioritet i specifičnost. CSS kaskada prolazi kroz ova tri koraka pravila kako bi se odredila svojstva koja treba dodijeliti elementu. Na kraju ovog procesa, težina će biti kaskadna za svako pravilo, a ova težina određuje koje pravilo ima prednost u slučaju spora.

Poreklo i prioritet

Stilski listovi mogu imati nekoliko porijekla:

1. Korisnički agent
   • Na primjer, podrazumevani stil pretraživača
2. Korisnik
   • Stil koji je odredio korisnik u postavkama pretraživača
3. Autor
   • Stil autora 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 su stilovi iz raznih izvora obrađeno - tako da pravila autora nadjačavaju pravila korisnika i pretraživača, itd. Tu je i Važna konstrukcija prioriteta, koja se koristi za balansiranje upotrebe prilagođenih i autorskih stilskih tablica. Dok tabela stilova za autorstvo podrazumevano ima prednost nad ostalima, prilagođeno pravilo deklarisano sa! Importan klauzulom će nadjačati čak i onu autorsku sa istom klauzulom. Imajući ovo na umu, pogledajmo konačnu listu, uzlaznim redoslijedom po važnosti prema prioritetu i porijeklu:

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

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

Specifičnost

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

Kako izračunati specifičnost?

Ako postoji nekoliko metoda za izračunavanje specifičnosti selektora. Većina brz način je kako slijedi: Dodajte 1 svakom elementu ili pseudo-elementu (na primjer: prije i: poslije); dodajte 10 svakom atributu (na primjer), klasi ili pseudo-klasi (: link ili: hover); 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: posljednje dijete - 1 ID + 1 klasa + 1 pseudo-klasa + 3 elementi = 123 Slična metoda opisana u W3C specifikaciji 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 cifre prema elementima selektora, atributima itd.):

• a = 1 ako je inline stil,
• b = broj akreditiva,
• c = broj atributa selektora, klasa i pseudo-klasa,
• d = broj imena 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 skraćena svojstva automatski dodjeljuje svim podsvojstvima, čak i ako ih vraća na njihove originalne vrijednosti. Ako koristite uvezene tablice stilova u CSS-u (@import), morate ih deklarirati prije svih ostalih pravila kako bi bili uzeti u obzir prije 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 previše složena pravila. Da biste to izbjegli, trebate imati na umu osnovna pravila za rad sa specifičnostima:

• Kada počnemo raditi na CSS-u, koristite uobičajene selektore i usput dodajte pojedinosti i usavršite ih
• Korištenje složenih selektora ne znači da ih morate učiniti što složenijim
• Trebali biste se više oslanjati na specifičnosti nego na redoslijed selektora, tako da će vaše stilove biti lakše uređivati ​​i održavati (posebno izvan ljudi).

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

Nasljedstvo

Nasljeđivanje je način propagiranja vrijednosti svojstava elemenata od roditelja do djeteta. Neka CSS svojstva nasljeđuju djeca elemenata po defaultu. Na primjer, ako postavite oznaka tijela font specifičan za stranicu, tada će font biti naslijeđen drugim elementima, na primjer, naslovima i paragrafima, bez potrebe za odgovarajućom registracijom svaki put. CSS specifikacija definira kada se svako svojstvo nasljeđuje po defaultu. Nisu sva svojstva naslijeđena, ali možemo prisiliti neka svojstva da budu naslijeđena dodjeljivanjem vrijednosti nasljeđivanja. Iako je ovo donekle izvan okvira ovog članka, treba napomenuti da se nasljeđivanje u CSS-u ne smije brkati sa nasljeđivanjem u objektno orijentiranom programiranju (OOP). Ovako izgleda definicija OOP nasljeđivanja sa 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 [...] koristeći klase koje su već definisane... 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. Šta to znači? Svako svojstvo u CSS-u prolazi kroz proces od četiri koraka kako bi se odredila njegova vrijednost. Evo citata iz W3C specifikacije: Konačna vrijednost svojstva je rezultat izračuna u četiri koraka: vrijednost specificirana u specifikaciji (specificirana vrijednost), zatim se rješava u vrijednost koja se koristi za nasljeđivanje (izračunata vrijednost), koja se pretvara u apsolutnu vrijednost, ako je potrebno, i već se konačno transformira 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 pretraživač) određuje odakle treba koristiti vrijednost za svojstvo - iz stilova, da li je naslijeđena ili ima svoj originalni izgled.
2. Izračunata vrijednost.
Navedena vrijednost se rješava u izračunatu vrijednost i postoji čak i kada se svojstvo ne primjenjuje. Dokument ne bi trebao biti otkucan kako bi se datu vrijednost je utvrđeno.
3. Vrijednost za korištenje.
Korištena vrijednost uzima izračunatu vrijednost i s njom rješava sve zavisnosti koje se mogu izračunati tek nakon toga
4. Stvarna vrijednost.
Ova vrijednost se koristi za konačno prikazivanje nakon primjene bilo kakvih aproksimacija (na primjer, transformacija decimalni brojevi u celinu).

Ako pogledate specifikaciju CSS svojstva, vidjet ćete da to opisuje. izvorno značenje(podrazumevano), elemente na koje se primenjuje, status nasleđivanja i njegovu izračunatu vrednost (između ostalog). Na primjer, specifikacija za svojstvo background-color je sljedeća: Ime: background-color Vrijednost: Početno: transparentno Primjenjuje se na: sve elemente Naslijeđeno: ne Procenti: N / A Mediji: vizualni Izračunata vrijednost: izračunata boja (e) Malo ste zbunjeni? Možda. Dakle, šta treba da razumijemo iz svega ovoga? I zašto ovo ima veze sa nasljeđem? Hajdemo na prvu rečenicu 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 listi stilova i, shodno tome, čak i u ovom slučaju, može se naslijediti i preuzeti vrijednost koja je postojala po defaultu. 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, nasljeđe u u ovom slučaju vrlo jednostavno za razumjeti. Zamislite da morate odrediti veličinu fonta ili familiju fontova za svaki element, a ne samo da ga dodate u body tag? Ovo 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 po defaultu. 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 izuzetak. IE podržava samo nasljeđivanje vrijednosti od verzije 8, sa izuzetkom svojstava smjera i vidljivosti. Cool.

Koristeći alate

Ako koristite alate kao što su Firebug ili Safari-jev web inspektor, možete vidjeti kako funkcionira određena kaskada, koji selektori imaju veću specifičnost i kako funkcionira nasljeđivanje za određeni element. Na primjer, ispod je Firebug u akciji, provjeravajući element na stranici. Možete vidjeti da su neka svojstva zamijenjena (na snimku ekrana su precrtana) drugim, specifičnijim (specifičnim) pravilima:
Na sljedećem snimku ekrana prikazuje se Safari Web Inspector izračunate vrijednosti element. Na ovaj način možete vidjeti vrijednosti čak i ako nisu jasno napisane u tablici stilova:

Zaključak

Čak i ako stvarno ne razmišljate o njima, ova pitanja su u vama svakodnevni rad kao posao osobe koja kodira CSS. Posebno u slučaju specifičnosti, važno je znati kako to utiče na stilove i kako ga planirati tako da uzrokuje samo minimalnu količinu problema kodiranja. I bolje je da uopšte ne zove. 11. marta 2014. u 18:23

Enkapsuliranje CSS stilova - Dio 1. Problem

• CSS,
• Html

Glavni pokretač rasta weba na prijelazu milenijuma bio je potrošnja sadržaja. Web stranice su kreirane kako bi svojim posjetiteljima pružile bilo koju korisne informacije ili zabavni sadržaj. Ali unutra poslednjih godina značaj web resursa koji pružaju usluge korisnicima dramatično je porastao generiranje sadržaj (tekst i grafički editor, tabele, instant messengeri, itd.). To je uzrokovalo transformaciju sajtova u aplikacije na jednoj stranici i migraciju na web složenih interfejsa koji su ranije bili prerogativ aplikativnih programa.

U procesu ovih transformacija i migracija pokazalo se da rast radne snage izrade i održavanja web interfejsa značajno nadmašuje rast njegove složenosti. Pokušali su (i još uvijek pokušavaju) riješiti problem podjelom na module, apstrakcijom, enkapsulacijom. U tu svrhu je i stvoren veliki broj JavaScript okviri (Backbone, Ember, Angular), HTML šabloni (Jade, Handlebars), sistemi za upravljanje zavisnošću (RequireJS), itd.

Najtežim sa ove tačke gledišta pokazao se CSS, gde, po dizajnu jezika, bilo koje svojstvo deklarisano u bilo kojoj uključenoj CSS datoteci ili tagu stila može uticati na prikaz bilo kog 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 da generiše svoj HTML prikaz (nazovimo ga blok) i gdje ga umetnuti u DOM stablo. U ovom slučaju, blokovi mogu biti ugniježđeni jedan u drugom. Na nivou oznake, blok se sastoji od korijenski element i podređeni elementi.
Zadatak je da na prikaz elemenata bilo kojeg bloka može utjecati samo namerno 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 kada se mijenjaju svojstva elemenata drugih blokova ( svojstva curenja), i sa 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, prilikom klasifikacije curenja možemo se ograničiti na slučaj curenja 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. Usklađenost 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, like svojstva širine i visina sa zadanom vrijednošću auto) ili oponaša (na primjer, kao svojstvo boje pozadine sa zadanom vrijednošću transparentno), zatim imaju krajnji korisnik to će ostaviti utisak 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, jer stilovi matičnog elementa formalno se ne primjenjuju na podređeni element, već na praksi ovo ponašanje se čak može smatrati i poželjnim. Ali ako krenemo od formalno sa stanovišta, morate priznati da konformizam stilova definitivno narušava njihovu inkapsulaciju. As praktično dokaz autor poziva radoznalog čitaoca da koristi test patke.

3. Kaskadni haos

Primjena stilova na selektore cilja je proces u tri koraka.
U prvoj fazi od Ukupno DOM stabla su odabrana sve elemente koji odgovaraju selektoru ciljnog elementa. Na primjer, za .current-block h3 selektor, prvi korak će odabrati sve elemente sa oznakom h3. Ne postoji način da se ograniči prostor za odabir na bilo koji dio DOM stabla.
U drugom koraku, odabrane stavke se filtriraju da odgovaraju selektoru prelaskom roditeljske elemente ciljni element. Kada se koristi 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,
.current-block h3 (pozadina: plava;) .outer-block h3 (pozadina: crvena;)

Jedini način Da biste ograničili prostor za pretragu, koristite kombinator djece i najbliži sibling kombinator + (susjedni kombinator siblinga). Da biste to učinili, potrebno je postaviti tačnu putanju u DOM stablu od ciljnog elementa do korijenskog elementa bloka, što dovodi do povećanja povezanosti CSS i HTML koda.

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

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

4. Kondicioniranje položaja

Elementi bloka mogu promijeniti svoj prikaz ovisno o poziciji 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;)