CSS hotová řešení
2006-07-04 12:32 napsal Lukáš Havrlant
Před nedávnem jsem si objednal tuhletu knihu, páč jsem si řekl, že už je konečně na čase se ty kaskádové styly vážně naučit. Kniha mi došla tuším někdy v pátek nebo tak nějak, včera jsem ji dočetl – poslední kapitoly jsem pročítal, když jsme s kámošem hráli Horoese trojku – nechtěl jsem se nudit při jeho tahu :-).
Kniha je rozdělena celkem do šesti částí, to už možná víte. První
jsou „Stručné základy CSS“. Ze všeho nejdříve se
seznámíme s vlastní filosofií CSS, oddělení struktury webu od
vzhledu a podobně. Zároveň se v této části vyskytuje patrně
nejvíce faktických chyb v knize, alespoň co jsem si já všiml.
Například podle knihy můžeme přímý zápis stylů skrze atribut
style používat jen v HTML nebo se dozvíme, že novější
verze XHTML ruší element <style> a styly musíme linkovat
externě. Pokud vím, tak v nejnovější verzi XHTML element
<style> stále zůstal. Následuje popis všemožných
selektorů a hlavně vysvětlení algoritmu kaskády, který jsem doteď nebyl
schopný pořádně pochopit.
Následuje druhá část – „Obecná řešení“.
Tady jsem se hlavně začetl do kapitol zabývající se písmy na webu,
jelikož nikdy pořádně nevím, jestli velikost písma mám určovat v
em nebo v procentech nebo slovně a co je kdy lepší a co
kde dělá problémy a tak dále. Dále jsem si s chutí přečetl
stylování formulářů, kdysi jsem s tím trochu experimentoval a
přicházel na šílené konstrukce, jak to všechno dostat pěkně vedle sebe
a pořád to bylo takové nějaké všelijaké. Dále zde je několik stránek
věnováno stylování tabulek, což jsem úspěšně přeskočil, tabulky
nejsou hlavní oblastí mého zájmu. A na konci této kapitoly
v podstatě přišlo to, na co jsem se těšil skoro nejvíc –
„Vzájemné vztahy prvků stránky“ aneb floatování a
pozicování. Skvěle vysvětleny základní principy obtékání a plavání
včetně ukázkovách obrázků, jak to tedy vypadá v prohlížeči.
Následující část se zabývá chybami prohlížečů, respektive hlavně
chybami exploreru, nečekaně :-). Hodně se zde pracuje
s podtržítkovým hackem, i když bych čekal, že se spíše budou
využívat podmíněné komentáře. Ale jsou zde pochopitelně zmíněny
i další hacky, například selektor >
(html>body). Nechybí ani Explorerové síto aneb zvláštní
styly pro všechny verze IE. Poměrně dost místa je zde věnováno chybám IE
při floatování, což je další část knihy, kterou jsem přečetl
takříkajíc jedním dechem. Všechny hlavní chyby na jednom místě, pěkně
a hlavně srozumitelně vysvětleny, to se cení (i když většina chyb je
stejně hezky popsána i u Dera).
Následuje kapitola čtvrtá, „Řešení vzhledu stránek“. Nekonečně možností jak uspořádat stránku, dvousloupcový layout, třísloupcový a klidně i čtyřsloupcový layout v této knize najdete, určitě si zde nějaký ten svůj layout každý vybere ;-). Jsou zde také popsány výhody a nevýhody „Fixního modelu“, „procentuálního modelu“ či „em modelu“, což mne také potěšilo, protože jsem snad nikde jinde nic tak podrobného o této problematice nečetl. Následuje perlička „Svatý grál“ v originále Holy Grail.
Pak už následuje část knihy zaměřená na řešení konkrétních problémů – překrytí textu obrázkem, fixní pozice v exploreru, svislé centrování bloku, iniciály, hrátky se seznamy aby vypadaly zajímavě a přesto všude stejně, odkazy jako záložky a spousta dalších vychytávek, které se většinou povalují různě po internetu – tady to máte naservírované pěkně na jednom místě, čistě a přehledně. A na závěr páni autoři připravili pár dobrých rad a odkazy na zajímavé zdroje.
Cestou jsem narazil ještě na jednu chybku, konkrétně kapitola o „čističi“:
Obdobně nemůžeme použít ani prázdný blok – např.:
<div class="cleaner"></div>nepomůže, protože prohlížeč obvykle prázdné prvky zcela ignoruje. Museli bychom do něj dát i nějaký (i neviditelný) obsah, tím ale narušíme sémantiku dokumentu.
No nevím, ale přijde mi, že by předchozí kód fungoval, prázdný
div nikomu a ničemu nevadí. To by byly asi tak všechny nesrovnalosti, na
které jsem narazil, či které mě nějak zaujaly. No dobrá, za blbce
jsem tady já, asi to přeci jenom někde vadí :-).
Obecně bych ke knize řekl, že se mimořádně povedla. Mám doma ještě další dvě knihy o CSS – první díl Pixyho a druhý díl Erica Meyera a ani jedna mi moc nesedla. Pixyho byla spíše teoretická, Meyerova zase praktická až příliš. Sledovat, jak Eric krok za krokem mění design stránky a ztrácet se ve stylopisech, které psal před pěti stránkami mi taky moc nesedlo. Za to tahle kniha je taková kombinace obou dvou knih, optimálně praktická a přehledná. Mohu jen doporučit.
Související:
- CSS – Hotová řešení: Prokletí zelené knihy (Dero)
- Konec Blábolníku v Čechách (Plaváček)
- CSS hotová řešení (Plaváček)
- Nová kniha o CSS (Aleš Dobrovolný)
- Petr Staníček – CSS Hotová řešení (Milan Kryl)
Komentáře
Modul atributu style – http://www.fi.muni.cz/…doctype.html byl skutečně v XHTML 1.1 označen jako, česky přeloženo, překonaný.
Obdobně nemůžeme použít ani prázdný blok – např.: nepomůže, protože prohlížeč obvykle prázdné prvky zcela ignoruje. Museli bychom do něj dát i nějaký (i neviditelný) obsah, tím ale narušíme sémantiku dokumentu.
Fungoval i nefungoval. Osobně jsem se setkal s tím, že v některých verzích Mozilly a Firefoxu byl prázdný DIV ignorován (myslím, že svého času mělo problém i Safari). Pro jistotu prostě používám čističe s tvrdou mezerou. Člověk nikdy neví.
Tudíž se nejedná o nesrovnalost, ale o dobrou radu.
Plaváček
Modul atributu style – byl skutečně v XHTML 1.1 označen jako, česky přeloženo, překonaný.
To je pravda, ale přesto bych nepoužíval označení, že se může používat jen v HTML. Jinak mě docela fascinuje, že tahle změna není napsána v patřičném dokumentu. Mám pocit, že takových zrad je v té specifikaci víc.
Fungoval i nefungoval. Osobně jsem se setkal s tím, že v některých verzích Mozilly a Firefoxu byl prázdný DIV ignorován (myslím, že svého času mělo problém i Safari). Pro jistotu prostě používám čističe s tvrdou mezerou. Člověk nikdy neví.
Aha, tak to jsem nevěděl, co jsem zkoušel, tak mi to fungovalo. Nicméně bych se zde zase v tom případě vyhnul spojení „prohlížeč obvykle prázdné prvky zcela ignoruje“.
Tak jako tak jsou tohle jenom detaily, kniha výborná :-).
Ono je to tím, že tu úplně první část knihy psal Pixy, já do jeho rukopisu moc zasahovat nechtěl a navíc nejsem odborník na xhtml. K druhému bodu – no, je to maličkost, mohlo se to formulovat jinak, ale trvám na tom, že kromě IE skutečně velká část prohlížečů prázdný DIV s nějakým clearem skutečně ignorovala. Je to má zkušenost, ale časy se mění :)
Plaváček
ale trvám na tom, že kromě IE skutečně velká část prohlížečů prázdný DIV s nějakým clearem skutečně ignorovala
Je to opravdu možné (ba dokonce jisté, když to říkáš :-)), já jsem zkoušel akorát Firefox, Operu a Explorer a všechny prohlížeče to sežraly, proto mě to jen trochu udivilo. V pořádku, vyřešeno.
Já jsem teda knihu ještě neviděl, ale jak jsem pochopil, je určená především začátečníkům. A proto je třeba zdůraznit problémové části kódování.
To, že v současných verzích tří nejrozšířenějších prohlížečů se prázdné elementy neignorují neznamená, že tomu tak musí být i ve starších či novějších verzích. A pro začátečníka je prostě jednoduší o tom vědět a raději se tomu vyhnout, než se spokojit s tím, že to teď nějak funguje a potom řešit, proč to Frantovi od vedle zobrazuje špatně.
no já vesměs „čistič“ nepoužívám vůbec, protože lze jako čistič většinou použít následující blok. Když už je to nutné, tak to bylo většinou třeba oddělení hlavičky či patičky, za kterou nebylo nutné dávat nějaký konkrétní (pojmenovaný) blok a tak jsem to řešil nastylovanou horizontální čárou – má význam i v dokumentu bez CSS, je kratší než prázdný div, je selfclosing atd.
Osobne jsem puvodne cekal, ze kniha bude podobne rigorozni jako Stanickuv prvni dil, ktery zrovna moc ctivy pro cloveka z ulice neni. Kniha je naopak pomerne lidova, nezachazi moc do detailu, a prijde mi, ze je na ni dost videt, ze vznikala postupnym vrstvenim… Je tam rada formalnich problemu s vnitrni konzistenci (v krizovych odkazech na jine casti knihy, ne v CSS), ale zaplatpanbu za ni – nic lepsiho neexistuje, a treba prvni kniha od Meyera, z tech, co vydal Zoner, je prakticky k nicemu – priznejme se, ze kdyby to nebyla celebrita, tak ji kritici rozcupuji a zahodi :-) Takze suma sumarum diky panove, treba najdu cas a prectu ji celou :-) Leo
Co se tyce prazneho divu tak opravdu jej mozilla ignorovala. Myslim ze od verze 1.5 (firefox) ji neignoruje. Knihu jeste nemam ale koupim. Dalsi do sbirky :)
Lukáš Havrlant: Díky za odkaz, teprve teď mě došlo, že u sebe mám blbě odkaz sem (starý), opraveno.
Leo: nemám dojem, že knížka(y) Erica Meyera jsou na nic , podle mě poskytují pouze jiný pohled na problematicu CSS, než „CSS – hotová řešení“, nebo jiné knihy o CSS (CSS od Pyxiho). Nejsou v rozporu, vzájemně se doplňují.
Jinými slovy CSS od Pyxiho, jsem pozorně četl v době, kdy jsem se CSS začal učit. Od Meyra jsem se naučil pár fíglů jak CSS elegatně použít při stylování stránek a taky inspiraci, jak to také může vypadat (taky od Plaváčka). A „CSS – hotová řešení“ odceňuji především to, že, všechny postupy roztroušené všude možně po internetu českém i cizím jsou pod jednou „střechou“.
Kohout: Rozhodnutí koupit úplně schvaluji.
Tak jsem si ji taky objednal, a abych neplatil poštu, tak jsem přibral ještě : Flexibilní webdesign – Vytváříme přizpůsobitelné a přizpůsobivé stránky pomocí XHTML a CSS. Je to taky novinka u cpress, máte ji někdo?
Již to zde několikrát bylo zmíněno, ale článek upraven nebyl. Jsem zásadně proti komolení jmen (a ještě více toho svého), takže, prosím, nejedná se o Erica Mayera, nýbrž o Erica Meyera…
Díky :).
Jinak kniha mě osobně poměrně zklamala (asi se v dané problematice už moc orientuji, škoda).
neo: ač ke komolení jmen nepříjemné (viz. mayer, pyxi), všichni víme o kom je řeč a dotyčný se doufejme neurazí, schválně to snad nikdo nedělá
jinak dnes jsem v jednom brněnském knihkupectví zkoušel tuto knížečku najít, nápis CCS mě v první chvíli docela zmátl, ale díky Derovi jsem na to byl docela dobře připraven, po rychlém prolistování soudím, že by v mé knihovničce rozhodně chybět neměla, navíc za tu cenu…
Měl jsem možnost tu knihu přečíst a je skvěle napsané a hodně to člověku pomůže.
Doporučuji
David
Komentáře jsou uzavřeny