CSS hotová řešení

2006-07-04 13: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í:

Linkuj.cz!

Komentáře

4. July 2006, 13:52

Modul atributu style – http://www.fi­.muni.cz/…doc­type.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.

4. July 2006, 14:06

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á :-).

4. July 2006, 14:16

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í :)

4. July 2006, 14:29

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.

4. July 2006, 14:59

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ě.

4. July 2006, 17:22

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.

# Enti
4. July 2006, 17:57

Diky za recenzi, knihu si take objednam. Spravne se pise Eric MEyer.

4. July 2006, 18:33

Kniha je super až na ten detail na přebalu…konečně se snad naučím CSS

# habendorf
4. July 2006, 18:54

Prázdný div umí pozlobit i v IE.

4. July 2006, 18:58

Prátný div zlobí ve starších verzích IE a osobně i ve firefoxu jsem se s ni setkal asi před rokem.

4. July 2006, 21:06

Dobrá, ukecali jste mě :-). Článek upraven.

# Leo
4. July 2006, 21:19

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

# Zerog
4. July 2006, 23:04

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 :)

5. July 2006, 16:22

Knihu jsem si objednal v sobotu, už by mohla taky někdy přijít. Díky že si mi přiblížil co mě čeká, teď se těším ještě víc :-)

Jinak knihu od Erica Meyera mám, a myslím že je celkem dobrá.

# Aleš Dobrovolný
7. July 2006, 16:15

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.

10. July 2006, 16:25

Už jí mam, je super :-)

# Jasper
10. July 2006, 19:07

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?

# ne0
10. July 2006, 22:43

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).

# Zdeněk Košťál
20. July 2006, 21:41

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…

3. June 2007, 16:42

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