luzer.sk

Hovorí sa, že treba kráčať s dobou a tak sa dnes s predstihom pozrieme na budúce vymoženosti, ktoré nám prinesie CSS...

V dnešnej dobe, kedy už väčšina internetových prehliadačov zvláda CSS (Kaskádové štýly) verzie 2.1 je potreba niečoho nového, čo poskytne tvorcom webu väčšie možnosti, ktoré sa nekončia iba pri jednoduchom formátovaní textu ako je to pri "dva-jednotke". Máme tu nové veci ako AJAX (Asynchrónny JavaScript a XML), či Web 2.0 aplikácie, ktoré umožňujú spustiť IM klienta priamo v okne prehliadača, či dokonca vytvoriť pseudo operačný systém, ktorý zvláda upravovať kancelárske dokumenty, kresliť obrázky, či dokonca aj surfovať po webe.. ;) Avšak k novým programátorským trendom treba štipku krásy, ktorá sa pomocou aktuálneho CSS 2.1 dá dosiahnuť len veľmi ťažko.. Avšak poďme sa pozrieť na nejaké každodenné problémy, ktoré môžme hravo vyriešiť pomocou CSS3.

Určite ste sa stretli s dilemou kedy ste chceli odlíšiť jednotlivé riadky tabuľky inou farbou. Zvyčajne sa to robí tak, že každému druhému riadku pridáme atribút class s hodnotou napr. "alternative". HTML kód potom vyzerá asi takto:

A v CSS si zadefinujeme jednotlivé farby pre pre triedy "normal" a "alternative":

Výsledkom je pekne vyzerajúca tabuľka, avšak HTML kód musíme "zaprasiť" úplnými zbytočnosťami. No vďaka CSS3 to už nebude potrebné. Ukážme si ako by vyzerala naša ukážka použitím nových pseudotried:

HTML:

A následne kaskádový štýl:

Asi som vás hodil rovno do hlbokej vody, pretože pseudotrieda "nth-child" nepatrí medzi tie najjednoduchšie, no práve naopak medzi tie, ktoré majú čo ponúknuť. S pseudotriedami sme mali možnosť sa stretnúť už aj pri CSS 2.1, kde sme definovali napr. farbu odkazu pod kurzorom na žlto (a:hover{color: yellow;}). Spoznáme ich najmä vďaka dvojbodke, ktorá sa nachádza za menom elementu, ktorý chceme upravovať. No namiesto teórie sa poďme radšej bližsie pozrieť na horeuvedený CSS zápis..

tr:nth-child(2n+1) - označuje pre ktorý element bude pseudotrieda "fungovať"
tr:nth-child(2n+1) - označenie, že ide o pseudotriedu
tr:nth-child(2n+1) - názov pseudotriedy
tr:nth-child(2n+1) - argument pseudotriedy (nie je pri každej, viď. hover)

Pseudotrieda nth-child vyberá podľa argumentu každý element, ktorý mu vyhovuje. Teda napr. ak by bol argument "1", tak jediný element, ktorý by vyhovoval by bol ten prvý. Ak by bol argument "2", tak druhý, atď. Toto sa v praxi nedá až tak efektívne využiť a preto možeme použiť aj premennú "n", ktorá nám zabezpečí väčšie uplatnenie. Ak by teda bol argument "n", tak by všetky elementy vyhoveli tejto podmienke. No pre nás sú zaujímavé len n-té násobky, čiže už spomínané "2n" vyberie každý druhý element - všetky párne ("even") elementy. Ak by sme potrebovali označiť každý tretí, piaty, či tisíci element, tak to bude jednoducho "3n", "5n" alebo "1000n". Nič zložité. Ďalej môžme pripočítavať, či odčítavať čísla. Teda argument môže vyzerať aj takto "10n-1", čo bude vyhovovať práve 9., 19., 29., .. elementu.

To by bolo na dnes asi všetko. Nabudúce sa pozrieme na na niečo, čo je oku viac prívetivejšie ako napríklad zaoblené rohy, či viacnásobné obrázkové pozadie. Dúfam, že som ešte nikoho od CSS3 neodradil a hádam sa tak nestane ani nabudúce.. ;)