Skutečné výhody CSS layoutu
Rychlost zobrazování je to podstatné, kvůli čemu se stále více prosazují beztabulkové stránky i ve velkých projektech. Všechny ostatní výhody CSS layoutů jsou pro velké firmy pouze druhotné.
Pixy na blogu rozpoutal další zajímavé kolo nekonečné disputace o tabulkách jako o základním nástroji pro rozložení prvků stránky. Kritizovány jsou konkrétně stránky idos.cz. Pixy napadá zejména fakt, že nejsou strukturovány logicky a na základě toho kodéry stránek šmahem haní. V komentářích už zaznívají praktičtější stanoviska. Stránky idosu jsou totiž i navzdory svému prasáckému tabulkovému kódu docela funkční. Existuje stále velmi výrazná vrstva webdesignérů, kteří na tabulky nedají dopustit a řeší jimi všechno (k Pixymu takoví moc nechodí). Jsou ochotni ve prospěch tabulek i argumentovat.
Chvíli jsem nad tím přemýšlel a sestavil jsem si seznam argumentů, které jsou obecně uváděné jako výhody beztabulkového css layoutu (jak pozicovaného, tak obtékaného):
- stránky se rychleji zobrazují
- menší kód
- strukturovanější kód
- změna na jednom místě
- není třeba zasahovat do html
- rozdílné pořadí textu v kódu a na stránce, logický vzhled v lineárních prohlížečích
- dá se tím udělat totéž, co tabulkami
- validita
- je to módní
Tak a teď je pořádně proberu z hlediska velkého projektu. Malé osobní stránky nyní prosím nechme stranou.
Stránky se rychleji zobrazují
Hlavní a podstatný argument. Pokud zabalíte celou stránku do tabulky, prohlížeč čeká, než k němu dorazí celá. Občas se chybně uvádí, že pokud se tabulce zadají rozměry, zobrazuje se postupně, není to pravda.
Data stránky v tabulce sice k uživateli už dorazila (pozná se to tak, že v titulkovém proužku už je titulek stránky), ale uživatel nic nevidí. Obzvlášť podstatné je to vidět u pomalého připojení. Ale i v práci, kde mohu využívat sakra rychlé linky, si toho všimnu -- leckterý server totiž data odesílá pomalu (zejména pokud si stránky nepředgenerovává). Kdyby byla stejná stránka udělána bez použití tabulky, už si můžu číst začátek stránky; u tabulky koukám na prázdnou stránku. Tento fakt byl hlavním argumentem, proč jsem na svých stránkách nikdy nepoužil tabulkový layout a proč design bez tabulek doporučuji i velkým serverům.
Zajímavé je, že stejnou chybu může vykazovat i beztabulkový CSS layout. Je to vidět při pomalém připojení třeba na serverech novinky.cz, centrum.cz aj. (stav v lednu 2004). Stránka se nevykresluje, ačkoli nějaká data už dorazila (to je vidět v titulkovém proužku). Nevím přesně, čím to je, ale obecně se dá říct, že to je dáno příliš komplikovaným zanořováním a stylováním divů. Ještě to musím pořádně prozkoumat. Prohlížeče asi bývají zmateny zejména z obtékaných divů. Při pozicovaném layoutu se ta chyba pomalého vykreslování projevuje zřídka.
Velmi sympatickým způsobem se chybu rychlosti tabulek pokusili vyřešit kdysi na www.lupa.cz (kód Lupy je už docela starý). Místo aby kodéři dali na stránku jednu velkou tabulku, jak bylo tehdy zvykem (a bývá dodnes), rozdělili stránku na více tabulek, které se vykreslují postupně. Na svou dobu to bylo revoluční a výborné řešení. Jakmile dorazí tabulka s prvním článkem, čtenář může číst.
Ale pokud se css zápis nezkazí, dá se stránka přepsáním z tabulek do CSS extrémně zrychlit. Jde přitom sice o zrychlení subjektivní, ale čtenář to vnímá přibližně jako desetinásobné zrychlení.
Kód beztabulkových stránek je menší
Oproti hnusnému tabulkovému kódu se při zapojení CSS dá ušetřit opravdu hodně. Část dat se přenese do css souboru stahovaného pouze jednou, to je fajn. Ovšem pokud tabulkový kodér není zrovna prase na entou (nepoužívá <font> a podobné zvrhlosti), dá se přepisem do beztabulkové verze ušetřit slabých deset procent. Takové zmenšení je sice hezké, ale není zas tak podstatné (v porovnání s rychlostí vykreslování).
Je beztabulkový kód strukturovanější?
Tabulkový kód se dá také udělat strukturovaně, do jisté míry. Sémantiku do tabulek nedostanete, jenomže beztabulkové layouty jsou také většinou samý <div> a <span>, takže zas tak velký rozdíl to není. Podstatné je, že u velkých komerčních projektů (a o těch nyní píšu) zas tolik struktury a logiky stánky nepoberou. Jinak řečeno zadání je zpravidla tak zmatené a proměnlivé, že se o struktuře stránky nedá moc mluvit. To není jen zkušenost z mé práce, to vidím všude, kde jsou prachy nebo kde se maká rychle.
Změna designu na jednom místě
Na osobních webech patlaných ve statickém HTML autoři ocení, že mohou vzhled všech stránek změnit v jednom css souboru. Ale velké projekty jsou vždy dělané nějakým redakčním systémem se šablonami. Tyhle šablonovací systémy vznikaly ještě před nástupem CSS, a tak také umožňují změnu všech stránek na jednom místě. CSS to umí, ale kdyby neumělo, nic strašného se z pohledu velkých šablonovaných projektů neděje.
Není třeba měnit html kód
Tento často uváděný argument ve prospěch CSS je na velkých projektech naprosto nevyužitelný. Jednak všichni, kdo se s CSS zabýváme, víme, že bez změny html kódu spousta věcí udělat nejde. Ale i kdyby šlo, jde o cacheování:
Aby byly stránky pro uživatele rychlejší, css soubor se nechává cacheovat. Pokud si ale časem vzpomenu, že chci na stránkách udělat designovou změnu a chci ji hned, mám problém, protože css soubor visí v tisících kopií po všech světových proxynách a v prohlížečových cacheích. Takže buďto musím od začátku projektu vypnout cacheování css souborů (což je pitomost), nebo musím přesvědčit obchodníky, aby změnu nechtěli hned (což je naprosto nemožné). Jediné, co zbývá, je udělat nový css soubor s novým názvem a do všech html stránek ho (přes šablonovací systém) přelinkovat. Vidíte, že elegance se naprosto vytratila.
Sakra, nějak jsem se rozepsal, zkusím to zkrátit.
Libovolné pořadí prvků v kódu
Jde o fajn vlastnost css layoutů. Moc se ale nevyužívá. Já jsem třeba vždycky ve svých kódech dával text nahoru a logo až někam dolů, ale na komerční projekty to není moc použitelné. Ačkoli načítání loga na závěr může být pro uživatele skvělé chování, zákazníci a šéfové si na to stěžují.
Začátek skutečného obsahu na začátku stránky býval skvělý trik v době, kdy na světové vyhledávací scéně panovala Altavista (ano, už tehdy se beztabulkové layouty daly používat). Altavista neuměla vypisovat úryvky z textu stránky, jako to dělá Google (neměla tolik disků), a tak vypisovala jenom začátek stránky. Kdo měl na začátku nepodstatné kecy, loga a navigaci, byl znevýhodněn proti stránkám, které začínaly skutečným obsahem. Ale to už je historie.
Ačkoli se dají v html kódu navzájem prohazovat celé bloky textu, což by mohlo být výhodné pro slepce a uživatele textových prohlížečů, každý odborník na přístupnost ty bloky seřadí jinak. Načež je ochoten se o tom hádat, a tak to ztrácí dost krásy. Řekněte -- co má být dříve, aby to pochopili slepci: logo, obsah, menu, sekundární menu? Nikdo přesně neví.
Pomocí CSS se dá udělat totéž, co tabulkami
Ale pouze v případě, že jsou kodéři ochotni se CSS layouty učit. Pokud mi někdo chce tvrdit, že postavení CSS layoutu je snadné, tak se mu vysměju. Co jenom existuje rozdílů v prohlížečích! Pravda, tabulkové layouty jsou také obtížné. Jenomže spousta lidí už je umí z předloňska. Chápu, že se jim nechce znovu podstupovat týdenní studium něčeho nového.
Navíc (co si budeme povídat) naprosto přesného designu v různých prohlížečích lze snáze dosáhnout tabulkami než pomocí stylů. A všichni známe zákazníky, kteří dupou na pixelech. Tumáš blbečku tabulku! Máš, cos chtěl.
CSS layout je módní a validní
Tyhle dvě věci spolu souvisejí. Velké projekty se ale o validitu nestarají, protože jim nic podstatného nepřináší. Takže zůstává pouze ta móda. Je to příjemná móda, protože vede k rychlejšímu webu. Náhodou.
Zapomněl jsem na něco?
Takže abyste mě nepochopili špatně: nemám rád tabulkové rozvržení stránky. Sláva CSS! Ale když útočíme na Saddáma, řekněme si proč a nemaskujme to nějakými zbraněmi hromadného ničení.
Sešlo se mi hodně ohlasů mailem, možná to zpracuju.
Pixy se rozepsal
na blogu:
CSS
versus tabulkový layout, sice se mnou místy nesouhlasí, ale je to dobré
čtení.
Další reakce:
Mýty a pověry CSS layoutů, Petr Weida, About weblog, odkaz zmizel
Pixy: CSS
Rulez, Petr Weida, About weblog, odkaz zmizel
Publikováno 20. ledna 2004
Tento článek je původně z weblogu
Reklama
