Názory k článku
Budoucnost layoutů dle CSS3

... to ze nekdo nema dost obrazotvornosti aby si predstavil jak lze pomoci znaku definovat vzhled neznamena ze to nejde.

A B C
D E F
G H I
K L M
Z

a je to.

To ze znaky dosadim obsah prakticky nasobne zjednodusi to co dneska clovek tezce vymysli a navrhuje.
Misto aby se nejprve kreslil obrazek a z nej se delal design (a tedy nutilo to clovek optimalizovat). V teto variante muze bunky postupne plnit obsahem a mit jistotu ze vse je OK. Kdyz bude chtit udelat zmenu proste jen prohazi znaky.
Podle me je to jednoduche prehledne a hlavne misto abych tri hodiny kreslil navrh pak ho prepisoval dalsi hodinu do CSS tak ho za hodinu natukam takhle a jsem vysmaty.

Otazkou je, jestli by fungovalo toto:

A B C
D B E
F B E

nebo jestli by to bylo takto

A B C
D E
F

Jenom mi to připadá, že dneska je to především o vzhledu stránek. Nebylo by lepší radši se zabývat něčím, co by poslalo Flash, silverlight a další tam, kam patří - do kytiček?

Plna podrpora HTML5 tagu <canvas> a <video> by mohla velkou cast Flashu a spol. potlacit. Jenze je tu IE a navic kreativci a jini frikulini z reklamnich oddeleni maji v hlave zadratovano "reklama=Flash".

No nevím jestli by nejdříve nechtělo dostat do finální podoby specifikaci HTML 5 a pak teprve chtít implementaci nových prvků. Osobně pokládám VML za daleko lepší věc než je canvas. Zkušenosti mám takové, že při troše snahy z VML dostanu větší výkon než z canvasu. Není to dáno rychlostí implementace, ale tím, že na canvasu nelze aktualizovat jednotlivé kresby, zatímco ve VML to jde. Rychlost implementace canvasu je např. u Opery naprosto tragická, FF docela jde, ale při několika málo desítkách kresbách se utaví. Jediné, kde to chodí opravdu rychle je Chrome, ale ten je rychlý obecně.

Oni musia byt na strasnych veciach... Preco jednoducho nezobrat nieco co sa uz pouziva a trochu to prispobit? Uplne by som bol pokojny ak by CSS layout bol prevzaty z GTK/JSF/...

Takže tabulkový layout, ale bez tabulek?

...a přitom by snažilo jen obšlehnout MigLayout z Javy i s debug módem a svět by byl zase o trochu hezčí.

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.

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.

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.

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

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

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

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

Díky za článek, zajímavé čtení.

Co mi uniká, je sdělení těchto dvou pasáží, cituji:

> Dovedete si představit, že právě takto budeme v budoucnu tvořit layout? Hodně to připomíná tabulky (autoři specifikace přiznávají, že z nich spoustu věcí převzali), trochu v tom cítím i koncept rámců (hlavně kvůli pojmenovávání jednotlivých buněk).

Může to někomu připomínat tabulky (bodejď by ne), někomu třeba i rámce (co je koncept rámců?), ale co tím chcete říct? Kladete předtím otázku "Je to opravdu budoucnost?" a za ní by měl podle mě logicky následovat pokus o zodpovězení. Jestli to má být zodpovězení, význam oněch konstatování mi uniká.

> Nemůžeme zamlčet, že celý koncept budí na tvářích webdesignérů spíše úsměv a stejně tak i na tvářích tvůrců prohlížečů. Představte si totiž, že pomocí tohoto modulu chcete vytvořit opravdu velký web, a tak se hodinku bavíte kreslením jeho layoutu pomocí ASCII znaků. Trošku nezvyklé, že?

To mi přijde jako hloupá iracionální narážka, kdepak argument *proti*. Nemám problém představit si "tvorbu opravdu složitého webu". Samozřejmě jiná věc je návrh syntaktické stránky tohoto modulu (hodnota vlastnosti display), limit na jeden ASCII znak (jestli je to opravdu tak) je nesmysl radikálně ovlivňující srozumitelnost kódu.

Ale možná mi něco uniká ale taky možná něco uniká Vám (mluvím k autorovi článku). Snad si nepředstavujete kompletní layout se všemi podrobnostmi v jediné vlastnosti display...

>Kladete předtím otázku "Je to opravdu budoucnost?" a za ní by měl podle mě logicky následovat pokus o zodpovězení.

Ne, nesnažil jsem se na otázku odpovědět. Snažil jsem se navést čtenáře do správného stavu mysli, aby si na otázku našel svou vlastní odpověď. Nejsem tu od toho, abych odsoudil nějakou myšlenku, kterou jsem ani neměl možnost řádně otestovat.

>Snad si nepředstavujete kompletní layout se všemi podrobnostmi v jediné vlastnosti display...

To skutečně ne. Ale i v několika mi přijde takovéto kreslení zkrátka zvláštní. Ne špatné, nebo nesmyslné, jen zvláštní. A co se týče "iracionálního narážky", tak to neměl být argument proti, ale prosté konstatování stavu. Obdobně se o celém modulu vyjadřují web designeři na celém světě.

Děkuji za odpověď; vyjasnila :-).

Protože má nejblíže praktickému nasazení v prohlížečích a proto, že má nejblíže k řešení mých reálných kodérských potřeb, zaujal mě nejvíce CSS3 Multi-Column.

Nemá někdo z diskutujících zkušenosti s Javascriptovými "náhražkami" multi-column pro nepodporující prohlížeče? --> http://delicious.com/machal/multi-column

Jinak díky za článek :-)