Na začiatku to bolo omnoho jednoduchšie. Hovorím o tých časoch, keď web stránky boli len statické dokumenty, ktoré prehliadač získal zo servra a zobrazil. HTML úplne postačovalo na všetko, čo bolo treba. Obsahovalo štrukútru, vzhľad, aj samotný obsah. Nejaká vykonávacia logika stránky neexistovala (veď to boli statické dokumenty). Odvtedy sa už ale veľa zmenilo a HTML nestačí. Síce stále je základným značkovacím jazykom, ale dnes je jeho hlavnou úlohou definovať štruktúru a obsah. A aj do týchto dvoch oblastí sa mu občas miešajú dvaja noví spolupracovníci. Reč je o JavaScripte ako hlavnom určovateli vykonávacej logiky a Cascading Style Sheets (CSS) ako určovateľa vzhľadu. Práve o tom druhom a o knihe CSS3 Foundations od Iana Lunna si povieme teraz niečo viac.

Takže čo je CSS? Je to jazyk, ktorý umožňuje napísať prezentáciu obsahu. Inak povedané, hovorí o tom, ako by sa mal daný obsah zobraziť. Ako budú jeho jednotlivé časti voči sebe umiestnené a ako budú vyzerať (farba, veľkosť ale aj 2D alebo 3D transformácie). Presne v podobnom duchu začína Ianova kniha. Vysvetľuje, kde je miesto a hlavne určenie CSS-ka v svete webových stránok. A tak, ako pri iných veciach týkajúcich sa webu, ani s CSS to nie je dokonalé. Na jednej strane je to špecifikácia, ktorá sa stále vývíja, a teda v podstate neexistuje moment, kedy by bola definitívne hotová a uzatvorená, na druhej strane sú súčasné prehliadače, ktoré túto špecifikáciu implementujú v rôznom rozsahu a kvalite. A nesmieme zabúdať na staršie verzie prehliadačov, ktoré sú stále z časti používané a majú čiastočne alebo výrazne iný interpreter CSS (najme staršie verzie Internet Explorera). Ian ďalej pokračuje vysvetľovaním jednotlivých verzií špecifikácie, ale aj toho, že to už vlastne nie je jedna špecifikácia, ale súbor niekoľkých, pričom tie sú navzájom viac-menej nezávislé a aj ich vývoj (a súčasný stav) je nezávislý.

Vysvetľovanie CSS začína Selectormi. To je tá časť špecifikácie, ktorá hovorí ako definovať elementy na stránky, ktorých sa štýly týkajú (ako zacieliť štýl na nejaké elementy). Totiž, aby ste vedeli nejakému elementu nastaviť štýly, tak musíte vedieť ten element na stránke nájsť. Okrem základného výberu na základe id, name alebo class existujú ďalšie selektory, ktoré vedia vyberať priameho/nepriameho potomka alebo súrodenca elementu. Za zmienku tiež stoja takzvané pseudo-triedy čo sú triedy, ktoré nedefinuje vy, ale dopĺňa ich elementom priamo prehliadač. Napríklad pseudo-trieda Hover je automaticky doplnená elementu, nad ktorým sa nachádza kurzor. Definovaním štýlu pre túto triedu viem zadefinovať štýl pre všetky (alebo vybrané) elementy, ktoré sa budú v danom momente nachádzať pod kurzorom.

So selektormi a pre nich definovanými štýlmi súvisí ešte jedna zaujímavá vec a to, že jeden element môžete štýlovať viacerými selektormi naraz (napríklad raz zacielite element pomocu jeho triedy, ktorú má priradenú a druhýkrát ako súrodenca elementu s inou triedou). Ak napríklad obe štýly definujú farbu pozadia a tieto farby sú rôzne, ako potom to pozadie bude presne vyzerať? Odpoveď je, že rôzne selektory majú rôznu váhu a teda aj prioritu. Za počítaním tejto váhy je komplikovaný algoritmus priradzovania bodov a výsledok je, že jeden selektor má prevahu nad druhým. Tiež rovnaký selektor definovaný neskôr (nižšie v súbore) má vyššiu prioritu ako rovnaký selektor definovaný predtým. Práve to je dôvod, prečo sa tento jazyk nazýva Cascading Style Sheets.

V ďalšej časti knihy sa Ian venuje tomu ako dokáže CSS definovať štruktúru stránky. Na tomto mieste treba rozlišovať štruktúru údajov definovanú v HTML, ktorá by sa dala prirovnávať k štruktúre údajov databázy a štruktúre definovanej v CSS, čo je skôr štruktúra vzhľadu – ako sú objekty rozmiestnené vedľa seba na stránke. CSS štruktúra je postavená na niekoľkých základných princípoch. Prvým je box model. Je to model toho, ako prehliadač vidí štruktúru jedného elementu na stránke. Každý element má totiž okraj, ktorý môže mať štýl a napríklad vnútorné aj vonkajšie odsadenie. A tým automaticky všetky elementy získavajú určité vlastnosti, ktoré sa dajú cez CSS štýly nastavovať. Ďalším príncípom je napríklad float a clear. To je príklad práve tých štýlov, ktoré menia štruktúru pôvodne definovanú v HTML na štrukúru vzhľadu. V HTML sú totiž elementy definované vždy za sebou. Vďaka float štýlu ich ale dokážem na stránke umiestňovať vedľa seba (float = plávu k ľavému alebo pravému okraju – podľa toho, ako to zadefinujem). Štýlom clear zase viem povedať, že na danom riadku bude len tento jeden element s týmto štýlom a ostatné elementy musia byť pod ním. To samozrejme nie je všetko, čo sa týka štruktúry, ale úplné pojednanie o nej by vyžadovalo minimálne jeden samostatný článok. Tak poďme ďalej.

Štvrtá časť knihy je venovaná typografii. Štýlu písma, farbe, veľkosti, ale hlavne samotnému fontu. Kedysi boli časy, že prehliadače vedeli používať len fonty nainštalované na počítači, a tak tvorcovi stránky ostávalo len dúfať, že keď vybral nejaký font, tak ho budú mať ľudia pristupujúci na stránku nainštalovaný. Dnes už je to našťastie inak, a existujú príkazy v CSS, ktoré vedia inštruovať prehliadač, aby si príslušný font stiahol zo servera danej stránky (alebo nejakého oficiálneho repozitára fontov ako napríklad udržuje Google).

Posledné dve časti knihy sa venujú 2D a 3D transformáciam, ako aj spôsobu ako sa vysporiadať s rozdielmi, na ktoré môžete natrafiť pri rôznych (najmä) starších prehliadačoch. Ale osobitná časť je venovaná tiež zobrazovani na rôznych zariadeniach (tablety, mobily), čo je dnes už pre vyspelú stránku samozrejmosť.

Možno ste sa dostali k CSS tak ako ja. Ako k niečomu, do čoho ste na nejakom projekte potrebovali len okrajovo pychnúť a neriešiť viac ako nevyhnutné minimum. Ale myslím si, že ak budete vo svete IT dosť dlho a neskončíte v nejakej jeho mŕtvej vetve (teda ostanete najbližších 20 rokov zaseknutí na nejakej technológii/frameworku, aby ste potom zrazu precitli a zistili, že svet okolo sa pohol), tak si to skôr alebo neskôr nájde aj vás. Tak ako si to našlo aj mňa. Jedného dňa príde úloha, kde vedomosti typu „nepoznám to, ale v prípade problému nájdem riešenie na webe“ už nebudú stačiť. Pre také prípady je dobré mať po ruke knihu ako je CSS3 Foundations a začať si budovať seriózne základy CSS. Mimochodom to, čo som tu napísal v článku a ešte ďalšie témy, ktoré nájdete v tej knihe sú naozaj „Foundations“ – základy. Existujú ďalšie, omnoho zaujímavejšie a komplikovanejšie témy, ktoré sa týkajú CSS, lebo jeho svet je väčší než by sa mohlo zdať…