{"id":76,"date":"2015-04-28T19:31:15","date_gmt":"2015-04-28T17:31:15","guid":{"rendered":""},"modified":"2018-09-17T21:53:05","modified_gmt":"2018-09-17T19:53:05","slug":"pozeratelny-web-alebo-cascading-style-sheets","status":"publish","type":"post","link":"https:\/\/spireng.sk\/en\/pozeratelny-web-alebo-cascading-style-sheets\/","title":{"rendered":"Pozerate\u013en\u00fd web alebo Cascading Style Sheets"},"content":{"rendered":"

\"Obr\u00e1zok\"Na za\u010diatku to bolo omnoho jednoduch\u0161ie. Hovor\u00edm o t\u00fdch \u010dasoch, ke\u010f web str\u00e1nky boli len statick\u00e9 dokumenty, ktor\u00e9 prehliada\u010d z\u00edskal zo servra a zobrazil. HTML \u00faplne posta\u010dovalo na v\u0161etko, \u010do bolo treba. Obsahovalo \u0161truk\u00fatru, vzh\u013ead, aj samotn\u00fd obsah. Nejak\u00e1 vykon\u00e1vacia logika str\u00e1nky neexistovala (ve\u010f to boli statick\u00e9 dokumenty). Odvtedy sa u\u017e ale ve\u013ea zmenilo a HTML nesta\u010d\u00ed. S\u00edce st\u00e1le je z\u00e1kladn\u00fdm zna\u010dkovac\u00edm jazykom, ale dnes je jeho hlavnou \u00falohou definova\u0165 \u0161trukt\u00faru a obsah. A aj do t\u00fdchto dvoch oblast\u00ed sa mu ob\u010das mie\u0161aj\u00fa dvaja nov\u00ed spolupracovn\u00edci. Re\u010d je o JavaScripte ako hlavnom ur\u010dovateli vykon\u00e1vacej logiky a Cascading Style Sheets (CSS) ako ur\u010dovate\u013ea vzh\u013eadu. Pr\u00e1ve o tom druhom a o knihe CSS3 Foundations<\/a> od Iana Lunna si povieme teraz nie\u010do viac.<\/p>\n

Tak\u017ee \u010do je CSS? Je to jazyk, ktor\u00fd umo\u017e\u0148uje nap\u00edsa\u0165 prezent\u00e1ciu obsahu. Inak povedan\u00e9, hovor\u00ed o tom, ako by sa mal dan\u00fd obsah zobrazi\u0165. Ako bud\u00fa jeho jednotliv\u00e9 \u010dasti vo\u010di sebe umiestnen\u00e9 a ako bud\u00fa vyzera\u0165 (farba, ve\u013ekos\u0165 ale aj 2D alebo 3D transform\u00e1cie). Presne v podobnom duchu za\u010d\u00edna Ianova kniha. Vysvet\u013euje, kde je miesto a hlavne ur\u010denie CSS-ka v svete webov\u00fdch str\u00e1nok. A tak, ako pri in\u00fdch veciach t\u00fdkaj\u00facich sa webu, ani s CSS to nie je dokonal\u00e9. Na jednej strane je to \u0161pecifik\u00e1cia, ktor\u00e1 sa st\u00e1le v\u00fdv\u00edja, a teda v podstate neexistuje moment, kedy by bola definit\u00edvne hotov\u00e1 a uzatvoren\u00e1, na druhej strane s\u00fa s\u00fa\u010dasn\u00e9 prehliada\u010de, ktor\u00e9 t\u00fato \u0161pecifik\u00e1ciu implementuj\u00fa v r\u00f4znom rozsahu a kvalite. A nesmieme zab\u00fada\u0165 na star\u0161ie verzie prehliada\u010dov, ktor\u00e9 s\u00fa st\u00e1le z \u010dasti pou\u017e\u00edvan\u00e9 a maj\u00fa \u010diasto\u010dne alebo v\u00fdrazne in\u00fd interpreter CSS (najme star\u0161ie verzie Internet Explorera). Ian \u010falej pokra\u010duje vysvet\u013eovan\u00edm jednotliv\u00fdch verzi\u00ed \u0161pecifik\u00e1cie, ale aj toho, \u017ee to u\u017e vlastne nie je jedna \u0161pecifik\u00e1cia, ale s\u00fabor nieko\u013ek\u00fdch, pri\u010dom tie s\u00fa navz\u00e1jom viac-menej nez\u00e1visl\u00e9 a aj ich v\u00fdvoj (a s\u00fa\u010dasn\u00fd stav) je nez\u00e1visl\u00fd.<\/p>\n

Vysvet\u013eovanie CSS za\u010d\u00edna Selectormi. To je t\u00e1 \u010das\u0165 \u0161pecifik\u00e1cie, ktor\u00e1 hovor\u00ed ako definova\u0165 elementy na str\u00e1nky, ktor\u00fdch sa \u0161t\u00fdly t\u00fdkaj\u00fa (ako zacieli\u0165 \u0161t\u00fdl na nejak\u00e9 elementy). Toti\u017e, aby ste vedeli nejak\u00e9mu elementu nastavi\u0165 \u0161t\u00fdly, tak mus\u00edte vedie\u0165 ten element na str\u00e1nke n\u00e1js\u0165. Okrem z\u00e1kladn\u00e9ho v\u00fdberu na z\u00e1klade id<\/em>, <\/span>name<\/em> alebo <\/span>class<\/em> existuj\u00fa \u010fal\u0161ie selektory, ktor\u00e9 vedia vybera\u0165 priameho\/nepriameho potomka alebo s\u00farodenca elementu. Za zmienku tie\u017e stoja takzvan\u00e9 <\/span>pseudo-triedy<\/em> \u010do s\u00fa triedy, ktor\u00e9 nedefinuje vy, ale dop\u013a\u0148a ich elementom priamo prehliada\u010d. Napr\u00edklad pseudo-trieda <\/span>Hover<\/em> je automaticky doplnen\u00e1 elementu, nad ktor\u00fdm sa nach\u00e1dza kurzor. Definovan<\/span>\u00ed<\/span>m \u0161t\u00fdlu pre t\u00fato triedu viem zadefinova\u0165 \u0161t\u00fdl pre v\u0161etky (alebo vybran\u00e9) elementy, ktor\u00e9 sa bud\u00fa <\/span>v danom momente<\/span> nach\u00e1dza\u0165 pod kurzorom.<\/span><\/p>\n

So selekto<\/span>r<\/span>mi a pre nich definovan\u00fdmi \u0161t\u00fdlmi s\u00favis\u00ed e\u0161te jedna zauj\u00edmav\u00e1 vec a to, \u017ee jeden element m\u00f4\u017eete \u0161t\u00fdlova\u0165 viacer\u00fdmi selektormi naraz <\/span>(napr\u00edklad raz zacielite element pomocu jeho triedy, ktor\u00fa m\u00e1 priraden\u00fa a druh\u00fdkr\u00e1t ako s\u00far<\/span>o<\/span>d<\/span>e<\/span>nc<\/span>a<\/span> elementu s inou triedou). Ak napr\u00edklad obe \u0161t\u00fdl<\/span>y<\/span> definuj\u00fa farbu pozadia <\/span>a tieto farby s\u00fa r\u00f4zne,<\/span> ako potom to pozadie bude presne vyzera\u0165? Odpove\u010f je, \u017ee r\u00f4zne selektory maj\u00fa r\u00f4znu v\u00e1hu a teda aj prioritu. Za po\u010d\u00edtan\u00edm tejto v\u00e1hy je komplikovan\u00fd algoritmus priradzovania bodov a v\u00fdsledok je, \u017ee jeden selektor m\u00e1 prevahu nad druh\u00fdm. Tie\u017e rovnak\u00fd selektor definovan\u00fd nesk\u00f4r (ni\u017e\u0161ie v s\u00fabore) m\u00e1 vy\u0161\u0161iu prioritu ako rovnak\u00fd selektor definovan\u00fd predt\u00fdm. Pr\u00e1ve to je d\u00f4vod, pre\u010do sa tento jazyk naz\u00fdva Cascading Style Sheets.<\/span><\/p>\n

V \u010fal\u0161ej \u010dasti knihy sa Ian venuje tomu ako dok\u00e1\u017ee CSS definova\u0165 \u0161trukt\u00faru str\u00e1nky. Na tomto mieste treba rozli\u0161ova\u0165 \u0161tr<\/span>u<\/span>kt\u00faru \u00fadajov definovan\u00fa v HTML, ktor\u00e1 by sa dala prirov<\/span>n\u00e1v<\/span>a\u0165 k \u0161trukt\u00fare \u00fadajov <\/span>datab\u00e1zy a \u0161trukt<\/span>\u00fa<\/span>re definovanej v CSS, \u010do je sk\u00f4r \u0161trukt\u00far<\/span>a<\/span> vzh\u013eadu \u2013 ako s\u00fa objekty rozmiestnen\u00e9 ved\u013ea seba na str\u00e1nke. CSS \u0161trukt\u00fara je postaven\u00e1 na nieko\u013ek\u00fdch z\u00e1kladn\u00fdch princ\u00edpoch. Prv\u00fdm je <\/span>box model<\/em>. Je to model toho, ako prehliada\u010d vid\u00ed \u0161trukt\u00faru jedn\u00e9ho element<\/span>u<\/span> na str\u00e1nke. Ka\u017ed\u00fd element m\u00e1 toti\u017e okraj, ktor\u00fd m\u00f4\u017ee ma\u0165 \u0161t\u00fdl a napr\u00edklad vn\u00fatorn\u00e9 aj vonkaj\u0161ie odsadenie. A t\u00fdm automaticky v\u0161etky elementy z\u00edskavaj\u00fa ur\u010dit\u00e9 vlastnosti, ktor\u00e9 sa daj\u00fa cez CSS \u0161t\u00fdly nastavova\u0165. \u010eal\u0161\u00edm pr\u00ednc\u00edpom je napr\u00edklad <\/span>float<\/em> a <\/span>clear<\/em>. To je pr\u00edklad pr\u00e1ve t\u00fdch \u0161t\u00fdlov, ktor\u00e9 menia \u0161trukt\u00faru p\u00f4vodne definovan\u00fa v HTML na \u0161truk\u00faru vzh\u013eadu. V HTML s\u00fa toti\u017e elementy definovan\u00e9 v\u017edy za sebou. V\u010faka float \u0161t\u00fdlu ich ale dok\u00e1\u017eem na str\u00e1nke umiest\u0148ova\u0165 ved\u013ea seba (float = pl\u00e1vu k \u013eav\u00e9mu alebo prav\u00e9mu okraj<\/span>u<\/span> \u2013 pod\u013ea toho, ako to zadefinujem). \u0160t\u00fdlom clear zase viem poveda\u0165, \u017ee na danom riadku bude len tento jeden element s t\u00fdmto \u0161t\u00fdlom a ostatn\u00e9 elementy musia by\u0165 pod n\u00edm. To samozrejme nie je v\u0161etko, \u010do sa t\u00fdka \u0161trukt\u00fary, ale \u00fapln<\/span>\u00e9<\/span> pojednanie o nej by vy\u017eadovalo minim\u00e1lne jeden samostatn\u00fd \u010dl\u00e1nok. Tak po\u010fme \u010falej.<\/span><\/p>\n

\u0160tvrt\u00e1 \u010das\u0165 knihy je venovan\u00e1 typografii. \u0160t\u00fdlu p\u00edsma, farbe, ve\u013ekosti, ale hlavne samotn\u00e9mu fontu. Kedysi boli \u010das<\/span>y<\/span>, \u017ee prehliada\u010de vedeli pou\u017e\u00edva\u0165 len fonty nain\u0161talovan\u00e9 na po\u010d\u00edta\u010di, a tak tvorcovi str\u00e1nky ost\u00e1valo len d\u00fafa\u0165, \u017ee ke\u010f vybral nejak\u00fd font, tak ho bud\u00fa ma\u0165 \u013eudia pristupuj\u00faci na str\u00e1nku nain\u0161talovan<\/span>\u00fd<\/span>. Dnes u\u017e je to na\u0161\u0165astie inak, a <\/span>existuj\u00fa <\/span>pr\u00edkazy v CSS, ktor\u00e9 vedia in\u0161truova\u0165 prehliada<\/span>\u010d, aby si pr\u00edslu\u0161n\u00fd font stiahol zo servera <\/span>danej <\/span>str\u00e1nky (alebo nejak\u00e9ho ofici\u00e1lneho repozit\u00e1ra fontov ako napr\u00edklad udr\u017euje Google).<\/span><\/p>\n

Posledn\u00e9 dve \u010dasti knihy sa venuj\u00fa 2D a 3D transform\u00e1ciam, ako aj sp\u00f4sobu ako sa vysporiada\u0165 s rozdielmi, na ktor\u00e9 m\u00f4\u017eete natrafi\u0165 pri r\u00f4znych (najm\u00e4) star\u0161\u00edch prehliada\u010doch. Ale osobitn\u00e1 \u010das\u0165 je venovan\u00e1 tie\u017e zobrazovani na r\u00f4znych zariadeniach (tablety, mobily), \u010do je dnes u\u017e pre vyspel\u00fa str\u00e1nku samozrejmos\u0165.<\/p>\n

Mo\u017eno ste sa dostali k CSS tak ako ja. Ako k nie\u010domu, do \u010doho ste na nejakom projekte potrebovali len okrajovo pychn\u00fa\u0165 a nerie\u0161i\u0165 viac ako nevyhn<\/span>utn<\/span>\u00e9 minimum. Ale mysl\u00edm si, \u017ee ak budete v<\/span>o<\/span> svete IT dos\u0165 dlho a neskon\u010d\u00edte v nejakej jeho m<\/span>\u0155<\/span>tvej vetve (teda ostanete najbli\u017e\u0161\u00edch 20 rokov zaseknut\u00ed na nejak<\/span>ej<\/span> technol\u00f3gii\/frameworku, aby ste potom zrazu precitli a zistili, \u017ee svet okolo sa pohol), tak si to sk\u00f4r alebo nesk\u00f4r n\u00e1jde aj v\u00e1s. Tak ako si to na\u0161lo aj m\u0148a. Jedn\u00e9ho d\u0148a pr\u00edde \u00faloha, kde vedomosti typu \u201enepozn\u00e1m to, ale v pr\u00edpade probl\u00e9mu n\u00e1jdem rie\u0161enie na webe\u201c u\u017e nebud\u00fa sta\u010di\u0165. Pre tak\u00e9 pr\u00edpady je dobr\u00e9 ma\u0165 po ruke knihu ako je<\/span> CSS3 Foundations <\/span>a za\u010da\u0165 si budova\u0165 seri\u00f3zne z\u00e1klady CSS. Mimochodom to, \u010do som tu nap\u00edsal v \u010dl\u00e1nku a e\u0161te \u010fal\u0161ie t\u00e9my, ktor\u00e9 n\u00e1jdete v tej kn<\/span>i<\/span>he s\u00fa naozaj \u201eFoundations\u201c – z\u00e1klady. Existuj\u00fa \u010fal\u0161ie, omnoho zauj\u00edmavej\u0161ie a komplikovanej\u0161ie t\u00e9my, ktor\u00e9 sa t\u00fdkaj\u00fa CSS, lebo jeho svet je v\u00e4\u010d\u0161\u00ed ne\u017e by sa mohlo zda\u0165…<\/span><\/p>","protected":false},"excerpt":{"rendered":"

Na za\u010diatku to bolo omnoho jednoduch\u0161ie. Hovor\u00edm o t\u00fdch \u010dasoch, ke\u010f web str\u00e1nky boli len statick\u00e9 dokumenty, ktor\u00e9 prehliada\u010d z\u00edskal zo servra a zobrazil. HTML \u00faplne posta\u010dovalo na v\u0161etko, \u010do bolo treba. Obsahovalo \u0161truk\u00fatru, vzh\u013ead, aj samotn\u00fd obsah. Nejak\u00e1 vykon\u00e1vacia logika str\u00e1nky neexistovala (ve\u010f to boli statick\u00e9 dokumenty). Odvtedy sa u\u017e ale ve\u013ea zmenilo a […]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-76","post","type-post","status-publish","format-standard","hentry","category-vyvoj-softveru"],"_links":{"self":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/comments?post=76"}],"version-history":[{"count":1,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts\/76\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/posts\/76\/revisions\/158"}],"wp:attachment":[{"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/media?parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/categories?post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spireng.sk\/en\/wp-json\/wp\/v2\/tags?post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}