Slušaj robot čitača
Uvod u CSS
Postoje tri načina dodavanja CSS-a u HTML. Prvo ćemo obraditi ekstrerni CSS, koji predstavlja dizajnerski princip o podeli odgovornosti, a koji se svakako i najviše koristi. Zatim ćemo obraditi embedovan ili ugrađen/unutrašnji CSS, koji se koristi samo za najhitnije stilove, koji se primenjuju na deo stranice koji je odmah vidljiv po učitavanju sajta. Ovakav CSS se učitava u isto vreme kada i HTML, pa će to omogućiti da recimo slova budu odmah vidljiva iako se koristi neki redak font, ili da elementi ne menjaju svoje dimenzije kad se spoljni CSS učita, sigurno ste to viđali, taman što nađete gde ste stali s čitanjem, a ono se otvore nove slike ili nešto, i stranica vam skoči ispred nosa. To se može izbeći koriščenjem embedovanog CSS-a. Treći način dodavanja CSS-a, inline, ili unizan, je vrlo problematičan, i najbolje je da o njemu mislite kao o CSS-u koji će dodavati Javascript, radije nego kao CSS koji mi treba da pišemo.
Sva tri načinja dodavanja CSS-a ćemo videti na primeru pravila text-indent, koje nam treba da bismo na prvom sajtu, uvukli svaki drugi red, kao što je to i Timbl uradio.
Kako ubaciti ekstrerni CSS fajl u HTML dokument
Ovde sada imamo jedan problem, a to je da kako smo tekst sa sajta prekopirali, i onda mu naknadno dodavali tagove, to mi sada moramo proći kroz ovaj HTML, i na svaki p tag koji treba da bude uvučen, dodati klasu, class="uvuciRed". Znam ovo je pipavo, ali u opštem slučaju, klase dodajemo na elemente u vreme kada kreiramo elemente, pa je tada sam proces mnogo jednostavniji.
Da biste sebi olakšali posao, možete u svakom redu koji treba uvući od početka strane, kliknu u <p> tag, na isto mesto, držeći sve vreme Alt dugme na tastaturi (mislim da je u VSC-u Alt, ako to ne pali, probajte sa Ctrl). Na ovaj način možemo izvesti multiline editing kôda, znači samo je bitno da svaki put kliknemo na isto mesto, npr <p|>
Na taj način možemo na sve željene redove dodati klasu odjednom. Po dodatku klase, p tag treba da izgleda ovako:
<p class="uvuciRed">
Sada bismo trebali da imamo sledeći kôd:
…</h1>
<p>The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.</p>
<p>Everything there is online about W3 is linked directly or indirectly to this document, including an executive summary of the project, Mailing lists , Policy , November's W3 news , Frequently Asked Questions .</p>
<p>What's out there?</p>
<p class="uvuciRed">Pointers to the world's online information, subjects , W3 servers, etc.</p>
<p>Help</p>
<p class="uvuciRed">on the browser you are using</p>
<p>Software Products</p>
<p class="uvuciRed">A list of W3 project components and their current state. (e.g. Line Mode ,X11 Viola , NeXTStep , Servers , Tools , Mail robot , Library )</p>
<p>Technical</p>
<p class="uvuciRed">Details of protocols, formats, program internals etc</p>
<p>Bibliography</p>
<p class="uvuciRed">Paper documentation on W3 and references.</p>
<p>People</p>
<p class="uvuciRed">A list of some people involved in the project.</p>
<p>History</p>
<p class="uvuciRed">A summary of the history of the project.</p>
<p>How can I help ?</p>
<p class="uvuciRed">If you would like to support the web..</p>
<p>Getting code</p>
<p class="uvuciRed">Getting the code by anonymous FTP , etc.</p>
</body>...
Što za sada neće davati nikakav vidljivi rezultat.
Sada kad smo dodali klase na ciljane elemente, možemo početi i sa CSS-om, pa ćemo kreirati novi fajl, sa ekstenzijom .css i sačuvati ga pored našeg HTML fajla. Ovaj fajl možete nazvati kako god hoćete, ali se najčešće zove samo prosto style.css.
U ovaj novi CSS fajl, ćemo uneti samo sledeće pravilo:
.uvuciRed {
text-indent: 4rem;
}
Dakle, svaki HTML element na kome se nalazi atribut class, se može pogoditi jednim CSS selektorom, koji počinje sa . i odmah iza tačke, bez praznog mesta, vrednost atributa klase, odnosno, ime klase, u našem primeru, .uvuciRed
U CSS-u, oznake poput .uvuciRed nazivamo CSS selektori, i to za klasu u ovom slučaju, jer one selektuju na koje elemente će se pravilo primeniti, a redove unutar {}, nazivamo CSS pravila.
CSS za razliku od HTML-a vrlo lako puca i na najsitnije greške, zato pažljivo kucajte. Ako recimo zaboravite tačku ispred imena klase, ovo pravilo se neće primeniti.
Ok, ako smo CSS fajl, sačuvali kao style.css, onda sada još samo treba da kažemo HTML-u gde da nađe svoj stil.
Da bismo ovo mogli da postignemo, treba nam jedan novi tag, koji do sada nismo koristili, a o kome će kasnije biti više reči, <link>
link tag se uvek piše u head elementu.
Sada, kada smo kreirali novi fajl, treba da ga uključimo u HTML dokument.
<link rel="stylesheet" href="style.css">
Embedovani ili ugrađeni CSS
Sada ćemo videti drugi način dodavanja CSS-a u HTML, i njega nazivamo embedovan ili unutrašnji, ugrađeni CSS.
Kako smo u prošlom primeru dodali klase na sve ciljane elemente, to sada možemo te iste klase koristiti, samo treba da uklonimo <link> element, i da umesto njega ubacimo <style> tag, u koji ćemo pisati CSS.
<style> tag se obično stavlja u zaglavlje, head HTML dokumenta, ali kao po običaju, isto će raditi i ako se nađe u telu, u body elementu. Jedini razlog što se piše u vrhu sajta je da bi se brže učitao, i da bismo ga lakše našli kada budemo hteli da ga izmenimo.
<!DOCTYPE html>
<html>
<head>
<style>
...
</style>
<title>The World Wide Web project</title>
</head>
<body>
...
</body>
</html>
Sav embedovan CSS se stavlja unutar <style> HTML tagova, (redovi 4 i 6), koji se postavljaju unutar <head> tagova, osim toga, potpuno se isto piše kao spoljni CSS.
<style>
.uvuciRed {
text-idnent: 4rem;
}
</style>
I to je sve što smo trebali da uradimo.
Sada se možda pitate, zašto se spolni CSS više koristi, kad obe ove dve metode deluju jednako jednostave, a unutrašnji CSS je mnogo brži?
Pa, bar u prvo vreme, dok još učimo, svaka strana na našem web sajtu, će da bude poseban HTML fajl. I ako sad svaki HTML fajl ima svoj CSS, onda svaka promena mora da se sprovede kroz sve fajlove. Znači, ovo i nije efikasno koliko i spoljni CSS, gde ćemo CSS za sve strane, menjati na jednom mestu.
Kako onda veliki sajtovi menjaju unutrašnji CSS po velikom broju fajlova?
Mnogi web sajtovi koji se danas prave, koriste module koji se poput slagalice sklope u sajt koji mi vidimo. Dok se nama sajt otvori, on izgleda kao celina. Ako je jedan od tih modula CSS, on za nas kao kodere jeste poseban fajl, ali sa klijentske strane izgleda baš kao da smo ubacili CSS diurektno u zaglavlje HTML-a.
Embedovan CSS je kao Šrodingerova mačka, u isto vreme je i poseban fajl, i ugrađen u zaglavlje HTML-a Ovo je kao neka vrsta "uskršnjih jaja", "pronađi sve pomene Šrodingerove mačke
Pa dobro, šta smo time postigli u odnosu na otovreno korišćenje posebnog fajla?
Svaki fajl počev sa HTML dokumentom, svim slikama na sajtu, svim spoljnjim stilovima i javaskript fajlovima, svi moraju da se skinu preko interneta, pre nego što se sajt u celosti otvori. Svaki taj fajl predstavlja zaseban HTTP zahtev, i do skoro su se svi HTTP zahtevi izvršavali jedan po jedan, umesto više njih paralelno, to je veliki broj spoljnih fajlova predstavljao usko grlo u brzini učitavanja sajtova. CSS koji je ugrađen u vrh HTML strane, će se skinuti u isto vreme kad i HTML fajl, bez pravljenja dodatnog HTTP zahteva.
Danas naravno imamo HTTP/2 koji će skidati više fajlova u isto vreme, ali će se HTML fajl uvek skidati prvi, plus, podešavanje korišćenja HTTP/2 se vrši na serveru, pa ne spada u HTML/CSS kurs.
Praksa je da se deo CSS-a, koji se odnosi na tzv "above the fold" deo sajta, koji odmah postaje vidljiv, pre nego što korisnik počne da skroluje, uvodi kao embedovan CSS, dok se sav ostali CSS, odvaja u zaseban fajl (spoljni CSS).
Pa onda, bez daljeg odlaganja, da se upoznamo i sa najgorom stvari na svetu.
Zašto je Inline CSS omražen?
Ovo isto text-indent pravilo, sada treba primeniti na svaki drugi paragraf pomoću atributa style="":
<p style="text-indent: 4rem;">...</p>
Atributa u HTML-u ima mnogo, vrše razne funkcije, i uvek se pišu u formatu ime Atributa=" vrednost Atributa". Style atribut uvek sadrži samo CSS pravila
Sada ovaj isti atribut, treba prekopirati na svaki <p> tag koji treba da se uvuče
Zašto svi mrzimo inline CSS?
Ovakva implementacija CSS-a je generalno omražena, jer će naneti stilsku promenu samo na taj jedan element, pa ako želimo da primenimo isti stil na više tagova, moramo ponoviti isti kôd veliki broj puta.
Ako u budućnosti dođemo na ideju da uklonimo ovaj atribut, ili da ovim <p> elementima povećamo ili smanjimo indentaciju, morali bismo svaki od ovih atributa da nađemo i izmenimo pojedinačno.
Dodatna, bitna karakteristika inline CSS-a je zadrtost. Ako bismo želeli da promenimo stil s nekog drugog mesta u kôdu, ne bismo mogli, inline CSS će uvek da prevlada. Ta zadrtost se obično naziva "specifičnost", i za inline CSS kažemo da je vrlo, vrlo "specifičan". Da bismo ga izmenili s drugog mesta, morali bismo da postignemo isti nivo specifičnosti. Iz tih razloga izbegavamo da koristimo inline CSS.
Sada bismo trebali da imamo sledeći kôd:
…</h1>
<p>The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.</p>
<p>Everything there is online about W3 is linked directly or indirectly to this document, including an executive summary of the project, Mailing lists , Policy , November's W3 news , Frequently Asked Questions .</p>
<p>What's out there?</p>
<p style="text-indent: 4rem;">Pointers to the world's online information, subjects , W3 servers, etc.</p>
<p>Help</p>
<p style="text-indent: 4rem;">on the browser you are using</p>
<p>Software Products</p>
<p style="text-indent: 4rem;">A list of W3 project components and their current state. (e.g. Line Mode ,X11 Viola , NeXTStep , Servers , Tools , Mail robot , Library )</p>
<p>Technical</p>
<p style="text-indent: 4rem;">Details of protocols, formats, program internals etc</p>
<p>Bibliography</p>
<p style="text-indent: 4rem;">Paper documentation on W3 and references.</p>
<p>People</p>
<p style="text-indent: 4rem;">A list of some people involved in the project.</p>
<p>History</p>
<p style="text-indent: 4rem;">A summary of the history of the project.</p>
<p>How can I help ?</p>
<p style="text-indent: 4rem;">If you would like to support the web..</p>
<p>Getting code</p>
<p style="text-indent: 4rem;">Getting the code by anonymous FTP , etc.</p>
</body>...
Što bi trebalo da daje ovakav rezultat:
World Wide Web
The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.
Everything there is online about W3 is linked directly or indirectly to this document, including an executive summary of the project, Mailing lists , Policy , November's W3 news , Frequently Asked Questions .
What's out there?
Pointers to the world's online information, subjects , W3 servers, etc.
Help
on the browser you are using
Software Products
A list of W3 project components and their current state. (e.g. Line Mode ,X11 Viola , NeXTStep , Servers , Tools , Mail robot , Library )
Technical
Details of protocols, formats, program internals etc
Bibliography
Paper documentation on W3 and references.
People
A list of some people involved in the project.
History
A summary of the history of the project.
How can I help ?
If you would like to support the web..
Getting code
Getting the code by anonymous FTP , etc.
Sada kada znamo zašto je inline CSS nezgodan za upotrebu, vredi napomenuti da će u nekim situacijama Javascript dodeljivati stilove elementima kroz inline CSS, tako da kad vidite negde inline CSS na nekom sajtu, taj kod najverovatnije nije tu stavilo ljudsko biće. Čak i tada gledali bismo da js samo promeni klasu na elementu, a da kroz CSS gađamo tu klasu, i odatle primenimo stilove
Poređenje prioriteta različito dodatih CSS-ova
Kada imamo inline CSS, on se smatra za najspecifičniji mogući, i teško da ćemo moći da ga pregazimo s drugog mesta (iz embedovanog ili spoljnog CSS-a). To je ujedno i još jedan razlog zašto ga izbegavamo. Pošto je stilove moguće dodati i putem Javascrpta, to ćemo nekada u kôdu koji gledamo na nekom sajtu, videti inline CSS, ali to ne znači da su to kôderi tu uneli, vrlo je moguće da je javascript upisao taj kôd.
Što se prioriteta unutrašnjeg i spoljašnjeg CSS-a tiče, u celosti važi pravilo o kaskadnoj prirodi CSS-a, te da će stil koji je primenjen kasnije, biti onaj koji će se i ispoljiti. Tako da samo ćemo voditi računa da onaj koji nam je bitniji, bude ispod manje bitnog CSS-a.
Članak prvi put objavljen: 10.1.2022.
Poslednje izmene: 5.2.2022.
Autor: k.