Vlákno názorů k článku
Budoucnost layoutů dle CSS3

Přijde mi, že když někteří lidé slyší slovo "tabulka", už jim vstávají vlasy na hlavě a říkají si že to bude hrůza.
Nechci chválit HTML tabulky pro layout ani zakrývat některé nevýhody jejich CSS příbuzných (, které jistě existují a proto to opravdu nemusí být vždy to nejlepší řešení), ale na druhou stranu, řešení pomocí css v každém případě odstraní zcela něco částečně (v závislosti na použité variantě) prezentační HTML, což je jedna z kritizovaných vlastností. U ostatních nevýhod se jednotlivá řešení tak různí, že nebudu generalizovat.

Je zajímavé, že na slovo "tabulka" jsou alergičtí především příznivci strojového zpracování a XML. Je zajímavé kolik z nich by odsoudilo zatímco při konstrukci by slintali blahem.

Vloudila se chybička, takže oprava:

Je zajímavé, že na slovo "tabulka" jsou alergičtí především příznivci strojového zpracování a XML.
Je zajímavé kolik z nich by odsoudilo <TABLE><TR><TD></TD><TD></TD></TR></TABLE> zatímco při konstrukci <DIV CLASS="table"><DIV CLASS="tr"><DIV CLASS="td"></DIV><DIV CLASS="td"></DIV></DIV></DIV> by slintali blahem.

Stale nechapem preco by mal niekto strojovo parsovat layout mojho webu.

Třeba vyhledávač, hlasová čtečka pro nevidomé, ...

A ako sematicky spracuju to ze aky ja mam layout? Ake stlpce a riadky? Vyhladavac hlada text, je mu jedno ci je v divoch alebo bunkach. Jedinym argumentom by mohlo byt ze v tabulkach nemozem dat obsah v HTML kode pred navigaciu, ale zda sa mi ze realny vyznam tohoto stoji na vode.
Co je skutocna prasaren, je to, ked niekto tabulkove data zalamuje do roznych CSS konstrukcii (neviem ci koli tomu lebo <table> je evil). Prave tabulkove data su vec ktoru ma naozaj zmysel parsovat, a skuste si spravit parser na <table> a na vseobecne CSS. Ani nezistite kde su riadky a stlpce.

Je vyhledávači jedno, zda je text v divu, p, h1 nebo title? Možná kdysi dávno. Stejně tak může akceptovat určitou vazbu mezi th a td nebo v rámci řádku/sloupce tabulky. A může toho být víc.
Navíc vyhledávači není jedno pořadí, což musíš skutečně v závislosti na layoutu měnit.
A co se týče hlasových čteček, tak sice nemám praktické zkušenosti, ale IMHO to tam bude ještě horší. Nevidomý pravděpodobně bude mít větší problém si představit layout jako řádky a sloupce. A i pokud to zvládne, bude to pro něj obtížnější.
Tabulková data skutečně nemá smysl cpát do CSS, pokud to je skutečná tabulka. Ale layout není skutečná tabulka. To je jen využití pro jeden způsob využití stránky - vizuální zobrazení. Nevidomí se v tom pravděpodobně orientovat nebudou.

Ale layout není skutečná tabulka. To je jen využití pro jeden způsob využití stránky - vizuální zobrazení. Nevidomí se v tom pravděpodobně orientovat nebudou.

Souhlasím. Dodám, že úplně stejně blbě je na tom člověk, kterému se takový layout nevejde na obrazovku. Taky ztrácí přehled, co je co, a nakonec vypíná CSS stránky.

Pořád čekám na jazyk, který dokáže popsat sémantické vztahy mezi jednotlivými prvky (např. tato nabídka se vztahuje k obsahu tohoto bloku), nabídne volitelnou nápovědu pro prezentace (nabídka bude standardně sbalená a bude vlevo) a prohlížeč si sám vybuduje takový layout, který bude na konkrétním zařízení použitelný (třebaže kvůli tomu bude některé bloky přesunovat, měnit jejich velikost, nebo je „minimalizovat“ do zástupných prvků).

Tak strojovým zpracováním se ohánějí převážně lidé, kteří si představují vyhledávací roboty schopné porozumnět obsahu dokumentu. Čehož se asi jenom tak nedočkáme.
Uznávám, že třeba XML umožňuje trochu líp zjistit strukturu dokumentu, ale na druhou stranu, tím, že není kompatibilní s HTML, si myslím, že právě XML udělalo víc škody, než užitku. Hlavně tím, že odmítá zpracovávat nesprávně sestavený dokument, což je úplně super výhodné, pro někoho, kdo se chce podívat na webovou stránku a zobrazí se mu jenom chybové hlášení.

Chápu vaši motivaci, ale přiznejme si, že tento přístup vede k tomu, že ten špatný je nakonec robot.

Není důležité 100% porozumět obsahu. Ale již dnes je možné jej nějak zpracovat, aby se využila sémantika. A čekám v budoucnu zlepšení.
Ohledně XML: to je IMHO mimo, kdo si dovolí dát na web non-well-formed XML?

Na toto jenom malé rýpnutí. Když je většina webu jako well-formed-XML, proč jsou tyto soubory ve většině případů stále posílány s hlavičkou text/html a nikoliv text/html+xml, application/xml, nebo text/xml. Navíc ani XHTML soubory nemají příponu .xhtml, ale klasické .html nebo .htm

Proč je to používáno tak nelogicky? Vyzkoušej si to v IE...
(Trošku univerzální odpověď...)

Tak pokud XML typ nefunguje pod IE, tak se IE nechá detekovat a posílat podvržená hlavička pouze jemu, zatímco ostatním lze posílat správnou.

Ano, někteří to tak dělají, většinou ti opravdoví nadšenci :) Dá se zjistit kvalita jednotlivých engines a podle toho posílat xhtml/html a dá se více méně spolehlivě detekovat IE a posílat mu třeba i nevalidní XML, aby ho dokázal použít. Ale věřím že většina lidí se na to "dolaďování" spíš vyflákne, než aby (především) kvůli IE vyladili způsob poskytování dat opravdu precizně.

Taky bych to tak viděl, ale k čemu to v praxi je? Stejně to IE bude interpretovat jako HTML, takže to musí být podle toho napsáno. Pak je posílání správné hlavičky jen komplikací.
A pokud mám XHTML, které musí být interpretovatelné jako HTML a taky tak bude interpretováno, pak v XHTML nevidím žádný smysl.

Nevím, jestli narážíš přesně. Je pravda, že u CSS tables někdy musí vzniknout navíc prezentační HTML, takže by vznikl takovýto prezentační hnus typu:
<DIV CLASS="page">
<DIV CLASS="head"></DIV>
<div class="after-head">
<DIV CLASS="menu"></DIV>
<DIV CLASS="content"></DIV>
</DIV>
<DIV CLASS="foot"></DIV>
</DIV>
// omlouvám se za tu různou velijkost písmen, je to napůl psané a napůl kopírované.
Což není o moc lepší než tabulky. U jednodušších layoutů by to však mohlo úplně stačit.
Jinak tabulkofobie byla reakce na to, jak autor se díval na tabulkovou koncepci jako na něco z principu špatného. Podle méno názoru, pokud by šlo něco jako:
body{
layout: [ < 2 1 #title > ] [ <#menu> <#content> ] [ < 2 1 #foot > ];
}
/* [] je obdoba td, 2 a jedna je rowspan a colspan, <> je obdoda td */
Tak by na tom nebylo nic špatného. HTML zůstane čisté.

U CSS tabulek je zajímavé i to, že žádné prezentační HTML vzniknout nemusí. Zabýval jsem se tím v předchozím článku.

Jinak něco podobného, jako navrhujete Vy, navrhuje také Jonathan Snook, říká tomu Matrix Layout a bohužel jeho návrh uveřejnil až po uzávěrce článku, jinak bych jej určitě zmínil. Jedná se o velmi zajímavé řešení, které je jednoduché na používání a přitom velice účinné. Jonathan ho chce nyní zkusit protlačit do prohlížečů, držím mu palce, protože jeho řešení se mi líbí více, než cokoli z CSS3. Pokud vládnete angličtinou a toto téma Vás zajímá, určitě obětujte pár minut a přečtěte si odkazovaný článek.

PS k tabulkofobii: nejsem si jist, kde jsem se v článku díval na tabulkovou koncepci, jako na něco z principu špatného. Pokud to tak ovšem někde vyznělo, tak je mi to líto. V již odkazovaném předchozím článku jsem naopak CSS tabulky poměrně obhajoval a velmi se těším na to, že s jejich pomocí brzy nakóduji novou verzi osobního blogu.

Matrix layout jsem neznal, dík za tip. Na první pohled to vypadá poměrně zajímavě a možná tahle myšlenka budoucnost má.

Nicméně, ale to je možná jenom můj zkostnatělý pohled na svět webdesignu, je tohle celé trošku mimo skutečnou realitu. Čistě proto, že z webdesignu se čím dál tím více stává umění a spousta webdesignerů už dávno rezignovala na fádní sloupcové zobrazení a rozevlála se do grafických výšin, kde je definování nějakých pitomých sloupců zbytečným omezováním svobody projevu.

Každopádně ze všech tří představených řešení bych z pozice kodéra asi preferoval ten čtvrtý, zmíněný jen tak mimochodem v tvém komentáři, zvaný Matrix layout.

Možná jenom ještě doplním postřeh mého kodéra, který mi dneska prostřednictvím instatní zprávy sdělil, že výrobci prohlížečů přeci nemůžou za to, že nezanedbatelná většina kodérů neumí pracovat s poměrně vyhovujícím plovoucími elementy a on sám nikdy nic jiného v podstatě potřebovat nebude. Možná i on má pravdu, protože existuje skutečně velmi málo věcí, které se s dostupnou CSS technologií dnes nedají udělat.

Čas ukáže.

Díky za "zkostnatělý pohled" na celou záležitost. Taky mě mrzí, že jsem Matrix Layout nemohl do článku zakomponovat, byl by to zajímavý pohled mimo W3C. Zkusím se domluvit s Martinem až se vrátí z Ameriky a udělat článku nějaký update, a Matrix Layout tam zmínit. Ať jsou v tom článku všechny teoretické možnosti do budoucna hezky pohromadě.

Co se týče svobody projevu a toho, že vymýšlet dnes vhodné řešení pro sloupce je už mimo realitu, tak doufám, že se tito web designeři zase ke sloupcům vrátí. Rozevláté stránky se mi osobně příliš nelíbí. Čímž ovšem nechci říct, že nemáte pravdu.

A co se týče postřehu vašeho kodéra, tak sice souhlasím s tím, že spousta lidí možná neumí pracovat s plovoucími elementy, ovšem osobně bych tvrdil, že float používám prostě proto, že nic lepšího není dostupné. Píšu (a doufám, že mi v tom Martin dovolí pokračovat) o nových technologiích a návrzích hlavně proto, že web design se hrozně rychle vyvíjí hlavně tím směrem, že některé věci v něm půjdou dělat stále rychleji a jednodušeji a pokud budeme stále používat staré technologie, tak sice dosáhneme stejného efektu, ale za delší dobu a s větším množstvím odvedené práce. A takové lidi trh, abych si vypůjčil slova Petra Staníčka, zašlápne.

Musím přiznat, že stejně jako Plaváčkův kodér, i já jsem zatím spokojený se současnými možnostmi layoutu v CSS.

Otázka totiž je, jak složité layouty skutečně web potřebuje. To, že spousta designérů i dnes jakýkoliv obsah zalomí do "portálového layoutu" (tzn. mraky sloupců, hlavička, patička, mraky boxíků ve sloupcích, roztahovací sloupec s textem atd.) je IMHO spíše nešvarem než něčím, pro co bychom měli hledat řešení v CSS.

Honzo, vyzýváš k tomu, aby kodéři popsali layout Zdrojáku. Osobně bych je nejdříve vyzval k tomu, aby se zamysleli, jeslti je řešení layoutu Zdrojáku správné.

No podival jsem se na titulni stranku zdrojaku a zjistil jsem, ze ten sloupec uplne vpravo vlastne nevnimam, box s odkazy na root.cz mne rusi a kdyby se zpravicky odsunuly na samostatnou stranku, vubec by mne to nerozhodilo. Cimz jsme se +- dostali k rozvrzeni nepsatelneho pomoci nejstarsiho HTML, ktere znam.

Martine, trošku mi to zní, jako když házíš všechny designy to jednoho pytle. Prostě složitý design s mnoha boxíky = špatný. Ale to přece není pravda. To, jak bude web vypadat je záležitostí grafika, expertů na použitelnost, informačních architektů a dalších lidí, kodér pak má za úkol jejich výplod zkrátka nalámat do kódu. A CSS by mu k tomu mělo dát nástroje.

A to, zda je řešení layoutu Zdrojáku špatné či dobré, bych rozebíral zcela jinde a jindy. ;)

Zamyšlení nad layoutem Zdrojáku je samozřejmě příklad a výzva k vyšší aktivitě kodérů v komunikace směrem k designérům.

To, jak bude web vypadat je záležitostí grafika, expertů na použitelnost, informačních architektů, <strong>kodéra a programátora</strong>. Všichni lidé na těch pozicích jsou v mém vnímání rovnocennou součástí jednoho týmu a měli by mít možnost se k řešením vyjadřovat.

Pokud jako kodér od designéra nebo informačního architekta či klienta dnes dostaneš layout, na který potřebuješ CSS3, je to špatně a měl bys zahájit diskuzi jak to změnit.

Kodér, programátor a další "překladatelé do řeči počítačů" by neměli být pasivními příjemci rozhodnutí někoho jiného.

i já jsem zatím spokojený se současnými možnostmi layoutu v CSS

Když sleduju názory, na CSS, mám pocit, že ona spokojenost ve tvaru "už to prosím neměňte, takhle to stačí" se rozkládá na tvářích těch webdesignerů, kteří mají pár let webdesignerování za sebou a často byli sami pamatují roky 2002-2006, kdy všechny tyhle techniky (téměř na koleně) vznikaly, zdokonalovaly se a šířily.

Naopak zcela nechápavě na ně hledí všichni ostatní 8-)

Já sebe neřadím ani do jedné skupiny, ale myslím, že při srovnání s jinými systémy pro tvorbu layoutu CSS na celé čáře prohrává (ale to by asi fakt bylo na pořádný rozbor, takhle je to moc zjednodušené), protože z historických důvodů obsahuje řadu zbytečných překážek a není důvod, proč by je mělo obsahovat na věky. Proto jsem moc rád, že se hledá lepší řešení (a pro konkurenceschopnost webu se bude možná jednou ono lepší řešení jedním z klíčových bodů přežití), i když ta snaha zatím vypadá ne příliš nadějně.

U CSS tabulek je zajímavé i to, že žádné prezentační HTML vzniknout nemusí. Zabýval jsem se tím v předchozím článku. Ale může. U složitějších layoutů se tomu asi nepůjde vyhnout. Hlavně jsem chtěl ukázat hranici, co už považuji za špatné, a to jsem myslel trošku obecněji. Jinak něco podobného, jako navrhujete Vy, navrhuje také Jonathan Snook, říká tomu Matrix Layout... Díky za link. Přiznám se, že moje narychlo načmárané řešení mi přijde přehlednější... nejsem si jist, kde jsem se v článku díval na tabulkovou koncepci, jako na něco z principu špatného. Trošku to tak vyznělo, tak mě napadlo toto napsat. I jako prevence proti diskutujícím...

Já si pořád myslím, že jediným důvodem odpůrců tabulek pro formátování, který existuje, jsou hlasové čtečky. Ale bylo by takovým problémem zajistit, aby čtečka prostě to, že se jedná o tabulku v některých případech ignorovala? Podle mě by stačilo přidat třeba atribut TYPE, třeba ve stylu <table type="data"> pro tabulku, která má být čtena jako tabulka, a <table type="design"> pro tabulku, která má být čtena jako lineární text.

Přece jenom, u jednoduchých webů je tabulkové řešení pořád to nejrychlejší možné řešení, které lze napsat.

Pro příznivce oddělení informací od vzhledu by v podstatě stačily v HTML asi 4 tagy
<html></html>,<head src="" title="">,<div></div>,<a href=""></a> a stránka by pak mohla vypadat:

<html>
<head src="external.head" title="název stránky">
<div></div>
<div><a href="link"></a></div>
<html>

Možná ještě doplnit od nějaké to <h1> až <h10>, aby se označilo, že jde o nadpisy.

Je zajímavé kolik z nich by odsoudilo... Je to otázka informovanosti. Ani vy patrně vůbec nechápete o co tady běží :( Ten první příklad (table) je vhodný tam, kde to má BÝT tabulka s obsahem tabulkových dat. Budou nad ním chrochtat obě skupiny. Druhý příklad (DIVy) lze použít tam, kde to má VYPADAT / MÍT LAYOUT jako-tabulky (tedy rozvržení do mřížky), ale obsahem nejsou tabulková data, ale třeba článek, reklamy, komentáře, obrázek v hlavičce atd. Chrochtat budou znalejší uživatelé, divit se budou ti méně znalí slovy "proč tam nedáš tagy table/tr/td dyk to je jednodušší" V dnešní době je CSS i tabulky dostatečně pokročilé na to, aby se nemusel zneužívat jeden sémantický prostředek místo druhého a obráceně. Jen je potřeba aby lidé jen slepě nepřejímali nějaký názor ve stylu "budu to dělat takhle div div div bo to je in" nebo "to je nesmysl tabulky jsou lepší", ale alespoň trochu věděli o co běží a použili správný nástroj na správném místě.