Přejít k navigační liště

Zdroják » Webdesign » Současnost a budoucnost layoutů: CSS tabulky

Současnost a budoucnost layoutů: CSS tabulky

Články Webdesign

Jestli má CSS s něčím problém, pak je to layout. Již zhruba 10 let volají webdesigneři po spolehlivém způsobu, který by dovolil vytvořit jakýkoli layout během chvilky a bez zbytečné námahy. Dnes se podíváme, proč jsou současná řešeních problémová a povíme si, proč se v poslední době hodně mluví o CSS tabulkách a o co se jedná.

Nálepky:

Dnes používaná řešení

V dnešní době máme několik možností, jak řešit layout webových stránek. Každý má své problémy, a tak vznikají různé CSS frameworky, které se některé z nich snaží řešit. Nutno ovšem říci, že nepříliš úspěšně (neboť jim k tomu CSS nedává nástroje). Pojďme si napřed o základních metodách něco říci a shrnout jejich přednosti a problémy.

Tabulky aneb jak layout nedělat

Kdysi nám všem bylo vysvětleno, že layout pomocí <table> je špatný. Pokud jste po letech zapomněli proč, tak tady je drobné připomenutí:

  1. sémanticky layout webu rozhodně nepatří mezi tabulková data
  2. pro změnu v designu webu musím upravovat HTML
  3. ve většině případů vytváří mnoho zbytečného kódu
  4. daleko hůře se s ním pracuje při tisku nebo na mobilních zařízeních

Už jste si vzpomněli? Již v roce 2004 nám to přece shrnuli Dušan Janovský (skutečné výhody CSS layoutu) a Petr Staníček (CSS versus tabulkový layout).

Nutno ale poznamenat, že tabulkový layout nám dlouhou řadu let sloužil spolehlivě a některé věci řešil během vteřin, zatímco s CSS se s nimi lopotíme hodiny. Jeho nevýhody jej ale přesto nakonec poslaly na webdesignerský hřbitov.

Layout tedy dnes tvoříme pouze pomocí kaskádových stylů. Co se nám nabízí k použití?

Float neboli obtékání

Jako první přijde na řadu obtékání (float). Layout pomocí vlastností float je v zásadě příjemný způsob. Nastavíme prvkům šířku a obtékání (float) a ony se pěkně řadí vedle sebe. Pod nimi zavelíme clear a pokračujeme normálním tokem dokumentu. Hotovo. Tedy když si vzpomeneme, čemu se kvůli IE6 vyhnout.

Ale pokud náš design vyžaduje stejně vysoké sloupce, či jinou pozici obsahu na obrazovce než v kódu, nastává problém. Float si s troškou triků poradí s přehazováním pořadí sloupců, ale stejně vysoké sloupce zkrátka neumí, a tak si webdesigneři vypomáhají různými berličkami a vymýšlí triky, aby tuto jeho slabinu ukryli.

Absolutní pozicování

Position:absolute zvládá dokonale umisťovat obsah kamkoli na obrazovku. Nastavíme sekcím stránky přesnou pozici a je úplně jedno, kde se daná věc nachází v kódu, jestli už se tam před ní nachází něco jiného či jestli si uživatel změnil velikost písma (pochopitelně pokud používáme vhodné jednotky).

Jenže jakmile potřebujeme pod absolutně napozicovaný obsah umístit něco v normálním toku dokumentu, tak jsme skončili. Vlastnost position zkrátka nemá clear. Jak píše CSS guru Eric Meyer v článku Wanted Layout System: Kdyby existovalo position-clear, bylo by to naprosto úžasné. Jenže neexistuje (ale je možné tuto vlastnost vytvořit pomocí JavaScriptu), takže layout postavený na position:absolute nakonec vytváří více problémů, než řeší.

Faux absolute position

Přehazování pořadí sloupců kód/obrazovka lze ovšem udělat mnohem elegantněji a stabilněji. Řešení je poměrně triviální a říká se mu právě tím zvláštním souslovím faux absolute position (z francouzštiny faux = nepravý). Představil jej loni Eric Sol na A List Apart (pro další vysvětlení viz prezentace Riki Fridricha na WebExpo 2008). Funguje velmi jednoduše a je mimo jiné využíván v řadě dnešních CSS frameworků. Kombinuje sílu obtékání s pozicováním a je to dnes, dle mého názoru, asi to nejlepší, co můžete pro vícesloupcový layout použít.

Pojďme se na něj tedy v rychlosti podívat. V podstatě jde o to, že plovoucí prvky posuneme nejprve zcela mimo naši pracovní plochu a poté je za pomoci záporného marginu umístíme na místo, kam patří. Napsané to zní možná trochu nesrozumitelně, z ukázky to snad bude jasnější:

<style>
.obal {
    position: relative;
    width: 80%;
    margin: 0 auto;
    overflow: hidden
}
.sloupec1, .sloupec2, .sloupec3 {
    float: left;
    left: 100%;
    position: relative;
    height: 100px;
    overflow: hidden
}
.sloupec3 {
    width: 20%;
    margin-left: -20%;
    background: blue
}
.sloupec1 {
    width: 20%;
    margin-left: -100%;
    background: green
}
.sloupec2 {
    width: 60%;
    margin-left: -80%;
    background: yellow
}
</style> 

Na CSS jistě není nic nepochopitelného, stejně tak HTML je velmi jednoduché:

<div class="obal">
    <div class="sloupec3">
        Třetí sloupec na obrazovce, ale první v kódu
    </div>
    <div class="sloupec1">
        První sloupec na obrazovce, ale druhý v kódu
    </div>
    <div class="sloupec2">
        Druhý sloupec na obrazovce, ale třetí v kódu
    </div>
</div> 

Že to skutečně funguje, se můžete přesvědčit v online ukázce.

Faux absolute position nám tak dává přesnost absolutního pozicování s možností pokračovat po užití této techniky v normálním toku dokumentu. To z něj dělá velmi užitečný nástroj při kódování designu, který používá mřížku (grid).

I tento způsob si však s sebou nese dědictví problémů float a navíc zavádí jeden další. Nelze u sloupců kombinovat různé jednotky pro šířku, protože bychom pak nebyli schopni spočítat, kam máme daný sloupec přesně posunout (CSS2.1 nám k tomu nedává možnosti, s CSS3 se tato situace může změnit).

Současné problémy CSS layoutů

V ideálním světě bych nyní napsal zázračný návod, jak snadno vyřešit i onen první problém – stejně vysoké sloupce. V ideálním světě nežijeme, proto žádný takový návod nemám. Kaskádové si prozatím se stejnou výškou sloupců poradit příliš neumí (samozřejmě to není s pomocí různých triků zcela nemožné, jak se ostatně můžete na řadě webů denně přesvědčit).

Hlavní problém netkví v tom, že bychom nějaký layout dnes snad nemohli vytvořit. Problém tkví v tom, že to je příliš složité, neintuitivní a pro nováčky často naprosto nepochopitelné. Všechny způsoby vyžadují dobrou znalost CSS, problémů prohlížečů a vůbec přílišnou aktivitu šedé kůry mozkové. Proč na rozdíl od jiných oblastí vývoje nemůžeme mít na webu základní layout hotov za několik minut? Máme naději, že tomu tak někdy bude?

Tabulky vrací úder

V souvislosti s blížícím se vydáním Internet Exploreru 8 se začalo hovořit o řešení, které velmi připomíná tabulkový layout. Jen s tím rozdílem, že místo důvěrně známých značek <table>, <tr>, <td> apod. užívá v HTML jakékoliv značky (obvykle <div>, ale není to nutné) a pomocí kaskádových stylů těmto elementům nastavuje, aby se chovaly stejně jako tabulky.

Ve skutečnosti se jedná o simulaci tabulek pomocí kaskádových stylů. Při tom se využije všech výhod tabulek: bezproblémová tvorba stejně vysokých sloupců, buňky tabulky se automaticky řadí vedle sebe atd. Tedy vše, kvůli čemu si někteří vývojáři myslí, že používání tabulek pro layout ušetří spoustu práce.

Pojďme se na celé řešení podívat.

Princip CSS tabulek

Řešení je založeno na hodnotách vlastnosti display:

  • table
  • table-row
  • table-cell

Vlastností je o něco více, tyto jsou ale nejdůležitější. Pro plný přehled nahlédněte do specifikace CSS2.1.

Tyto hodnoty byly již součástí CSS2.0 a většina prohlížečů je podporuje. Výjimku tvoří Internet Explorer, který jejich podporu zařadil až do osmé verze. Což je také důvod, proč se o CSS tabulkách začíná hovořit až dnes.

Z názvů jednotlivých je poměrně zjevné, co vlastně dělají. Pokud bychom chtěli 4sloupcový layout, se stejně vysokými sloupci, pomocí HTML tabulek by kód vypadal zhruba takto:

<table>
    <tr>
        <td>první sloupec
        <td>druhý sloupec
        <td>třetí sloupec
        <td>čtvrtý sloupec
</table> 

A za použití CSS tabulek například takto (inline styly jsou zde jen pro větší názornost):

<div style="display:table">
    <div style="display:table-row">
        <div style="display:table-cell">
            první sloupec
        </div>
        <div style="display:table-cell">
            druhý sloupec
        </div>
        <div style="display:table-cell">
            třetí sloupec
        </div>
        <div style="display:table-cell">
            čtvrtý sloupec
        </div>
    </div>
</div> 

Připadá vám to stále příliš složité? Stačí mávnout kouzelnou hůlkou a dostaneme mnohem jednodušší kód (dle specifikace lze totiž značky s  display: table a display: table-row jednoduše vynechat, prohlížeč si je má domyslet):

<div style="display:table-cell">
    první sloupec
</div>
<div style="display:table-cell">
    druhý sloupec
</div>
<div style="display:table-cell">
    třetí sloupec
</div>
<div style="display:table-cell">
    čtvrtý sloupec
</div> 

Počítejte dobře: na 4 sloupce to máme pouhé 4 značky v kódu. Design lze změnit pouhou úpravou kaskádových stylů, i sémantika je v pořádku. Layout vytvořený tímto způsobem si můžete prohlédnout v online ukázce (pokud vám ve vašem prohlížeči nefunguje, čtěte dále).

Pokud by vás technika zaujala, doporučuji články na Digital-wew a na Thinkvitamin.

Problémy aneb nic není tak snadné

Zní to všechno poměrně dobře, takže je čas se podívat na zápory celé techniky.

Podpora prohlížečů

Firefox a Opera jsou bez problému. O tom, že na IE7 a nižší můžeme zapomenout a nezbývá než čekat na IE8, jsme se zmínili. Bohužel Safari a Chrome obsahují chybu a náš ořezaný příklad se nezobrazí správně (plný příklad s  display: table ovšem funguje). Chyba je v nočních verzích WebKitu odstraněna (ani Safari 4 beta chybu neobsahuje), takže je pravděpodobné, že brzo bude již vše dle specifikace.

Problém s pozicováním

Podpora prohlížečů však není jediným problémem této techniky. CSS tabulky mají problém s position:relative  a tudíž i s  position:ab­solute. Zkrátka zapomeňte na to, že byste divu s display: table-cell  nastavili position: relative a uvnitř napozicovali něco absolutně k rodičovskému prvku (třeba kulaté rohy). Osobně to považuji za jeden z hlavních problémů a prozatím jsem nenašel způsob, jak jej rozumně obejít.

Nesmíme zapomenout na fakt, že v tomto případě pomocí kaskádových stylů nelze nastavit, v jakém pořadí se obsah na obrazovce zobrazí. Zkrátka jak v kódu, tak na obrazovce – inu tabulky.

Klady CSS tabulek

Mohlo by se zdát, že toto řešení trpí samými problémy. Ale když se na CSS tabulky podíváme s nadhledem, tak zjistíme, že je neuvěřitelně snadné je používat. Nepotřebujeme žádné triky, počítat kam umístit box atd. Do HTML napíšeme 4 divy a nastavíme, aby se chovaly jako buňky tabulky. Hotovo! Máme 4 sloupcový layout.

Nerozpadá se, pro definici šířky jednotlivých sloupců můžeme kombinovat jednotky jaké chceme. Řešení je vhodné i pro ortodoxní server-side vývojáře, kteří se používání stávajících kaskádových stylů brání (a že takových jsou mraky). Desetiminutové školení CSS tabulek jim následně dovolí bez pomoci webdesignera vytvořit potřebný layout, který potřebují např. pro odladění své komponenty!

Jednoduchá řešení v evolučním souboji technologií často vyhrávají, a proto by CSS tabulky mohly být do budoucna nadějným kandidátem na vítěze.

Názory ze světa

O CSS tabulkách se poslední dobou v angličtině poměrně hojně debatuje (což se o češtině říct nedá). A je nutno říci, že některé kapacity v oboru proti nim mají námitky:

Eric Meyer poměrně tvrdě říká, že používat CSS tabulky je možná horší, než používat pro layout ty skutečné a proměna několika divů pomocí CSS na tabulky a následné tvrzení, že to tabulky nejsou, zavání sebeklamem (volná citace z meyerweb.com).

Chris Coyier s ním souhlasí slovy „ámen, bratře“ a říká, že celá ta myšlenka mu přijde šílená (volná citace z css-tricks.com).

Naopak lidé, kteří s celou myšlenkou přišli, tvrdí, že CSS tabulky jsou z 90 % řešením na naše problémy s layoutem (volná citace z thinkvitamin­.com). Kdo má pravdu, ukáže až čas (a toho máme dost, než podíl IE6 a IE7 poklesne).

Závěrem

Ukázali jsme, že současné nástroje pro tvorbu layoutů nejsou v žádném případě ideální. Prozatím se s tím ale musíme smířit. CSS tabulky jsou zdá se kontroverzní pokus o řešení problémů s layoutem. Někteří jsou z něj nadšeni, jiní jej nemohou vystát. Ale rozhodně se stále nejedná o vysněné webdesignerské řešení.

Na nástroj, který umožní tvořit layouty lehce a elegantně, stále čekáme.

Pokračování příště

Zachrání nás CSS3? Nabídne nám konečně ideální nástroj pro tvorbu layoutů? Povíme si příští týden.

Co si myslíte o CSS tabulkách?

Komentáře

Subscribe
Upozornit na
guest
129 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Vojtěch Vysloužil

Tohle je vážně úlet :-) Core kodéři nejprve zavrhnou tabulky pro tvorbu layoutu a nahradí je naprosto nepraktickým CSS layoutem, aby po čase vymysleli tabulky v CSS pro snadnou tvorbu layoutu. No mě trefí…

N/A

mate k dispozici technologii (html, css, client-side scripting), _muzete_ ji pouzit. nemusite.
nelibi se Vam css. nepouzivejte. vidite v html tables vyhody, pouzivejte.

pri zavrhovani css si vzpomente, jak byste pred vznikem <div> / <layer> / css "zaridil" drag-n-drop.

Radovan

Ani nie úlet. CSS tabulky, ak to tak mozeme nazvat. Radsej pre tych ortodoxnych to nazvime CSS layout s funkcionalitou tabuliek, aby nas neupalili :)
A teraz k tomu problemu. Na tychto moznostiach CSS sa netreba pozerat kriticky. Naozaj vo vela veciach usetria kopec prace a treba si uvedomit, ze naozaj kopec veci riesia. Neviem si predstavit inu situaciu, kde sa daju vyuzit. Zaroven nechapem tie vykriky zastancov "beztabulkoveho" layoutu. HTML tabulky a CSS tabulky su uplne odlisne veci aj ked riesia veci dost podobne. Zaroven ak si clovek uvedomi, ze struktura dokumentu sa nemeni (ci uz pouzije moznost obtekania alebo tabuliek), tak je tato technika naozaj najlepsim riesenim na terajsiu situaciu.

Podobny princip je vyuzitie display: inline-block vo vodorovnom navigacnom menu (ak chceme odkazy ako blokove tlacidla). Malo ludi ho vyuziva a pritom to je riesenie presne na to urcene.

Nemusi ta trafit :) Len sa na danu problematiku pozrel niekto, kto "neurcuje" vyvoj webu.

Ujo klobasa

+1

Anonymní

diplay: inline-block nefunkcne vo FF 2, preto asi nepouzivane, v sucasnosti (FF 2 ma uz minimalnu pouzivanost) ale celkom spravna volba.

Hoween

Mistra Záhoně rozhodně nepovažuji za nějakého core kodéra, ačkoli úlety tady předvádí s každým článkem.

"CSS tabulky" tady jsou v podstatě od nepaměti, protože vykreslovací jádro má na CSS vlastnosti namapované příslušné HTML tagy, samozřejmě s větším či menším úspěchem. I proto je CSS layout dělaný jednou z metod popsaných v článku spolehlivější.

Co se týká (ne)praktičnosti CSS layoutu, zase jen a pouze bullshit od líných a nezkušených kodérů. Na čistě CSS layout jsem přešel před cca 5-i lety a layoutů jsem udělal pár desítek. Až na pár špíčků jsem s tím nikdy neměl problém v žádném prohlížeči a jednou jsem si vypomohl JavaScriptem. Jinak mi CSS layout naprosto vyhovuje a nabízí mi možnosti, které tabulkový layout (ať už HTML, nebo CSS) prostě nenabízí (např. záporný margin).

Článek je hovadina, zaměřená na jeden konkrétní problém a vychvalující tabulkový layout právě kvůli řešení tohoto jednoho problému (stejně vysoké sloupce). Jinak "css tabulky" nemají výhodu žádnou a jako kodéra mě zbytečně svazují. Výhodám klasických CSS layoutů a možnostem "čistého css bez css tabulek" se článek vůbec nevěnuje.

McBig

S tabulkama se neshodnem, ale to řešit nechci, jen malou poznámku, ten záporný margin funguje u prvku uvnitř buňky (tedy ne přímo buňka, ale div v ní) a pohodlně vycestuje z tabulky (nevzpomenu si už jestli to jde přímo, nebo s trikem).

Hoween

Takže budeme obalovat, a obalovat a tím zrušíme další "výhodu" popsanou v článku – kód bez zbytečných značek.

Znovu se ptám, co skvělého a objevného mi přináší "css-table" layout?

Radovan

Budem tu reagovat aj na tvoj predchadzajuci prispevok. Ono to je pekne ze kodujes uz 5 rokov, ale pokial vyuzivas maximalne uroven prvej verzie CSS tak tie vyhody spoznat nedokazes. A to nie je utocna veta, len sa pokusam zhodnotit aktualny stav, ak to je inak tak ma oprav.

To obalovanie som v tomto pripade nejako nepochopil. Krizuju sa vam dva hlavne bloky cez seba ? Lebo strukturovo je pouzitie CSS tabuliek, alebo obtekanych blokov rovnaka. Ziadne nove vnorene znacky nie su treba ako by ste ich navrhli pre obtekany layout.

Hoween

Ehe? Co to mektáte? Aktuální stav čí? Můj? Vážně si myslíte, že bych si i v roce 2009 vystačil s CSS 1 a dál se mé znalosti nedostaly?

Co se týká obalování, viz Matrjoška, na té to snad pochopíte.

Radovan

Ja nic nemektam. Ano vas stav som mal na mysli.

Matrioska, co s nou ? Fajn hracka, pamatam si z detstva :) Ale o nabalovani v HTML teda nemam predstavu, ale to bude asi tym, ze sa tomu aktivne vyhybam ;)

Hoween

O možnostech CSS a mých znalostech mě tady poučuje člověk, co před pár minutami v jiném příspěvku přiznal, že jeho znalosti CSS jsou bídné. Nu vot.)

Obalování v HTML je proces, kdy objekt musím pro zajištění nějaké funkce obalit jiným, který by jinak nebyl potřeba.

Radovan

Prosim ukazte mi, kde som hovoril o tom, ze mam male znalosti CSS. Rad sa dozviem nieco nove :)

mello

LOL! V tomhle se musim zastat Howeena… Pokud si tedy chcete doplnit sve vyjimecne znalosti o CSS, tak si prosim otevrete strycka googla a vyhledejte si Matrjoska hack, mozna se dozvite i neco o obalovani :)

Radovan

Mozete mi vysvetlit v com je vas problem ? Mate snad problem s matematikou prveho stupna ked si musite vypomahat zbytocnymi vnorenymi znackami, aby ste dosiahli podobneho efektu, akym riesi IE svoj box model ?

Hoween

Pokud nechápete obalování, matrjoška vám to vysvětlí. Jinak tam žádný problém není.

Obalování je dále nutné u těchto skvělých "css-table" layoutů, protože jinak se na jednotlivých komponentách layoutu nedá použít např. záporný margin.

Radovan

Cakal som na vasu reakciu :)

Ja obalovanie chapem, velmi dobre, ale ked sa daju veci vyriesit cisto cez CSS, preco pridavat dalsie zbytocne prvky ? A ked uz ho je treba, tak sa tam da nejaka nevyznamova znacka a ide sa dalej. Len vy o tom hovorite ako o uplnom fakte, ze to je nutne vzdy. Co samozrejme nie je.

Hoween

Jistě. Řešíme to, že buď můžu layout udělat standardními postupy a pak si s ním můžu dělat co chci. Nebo chci být kchůl, použiju jinak nepoužitelný css-table layout a pak naprosto zbytečně musím obalovat.

To, na co narážím, je fakt, že css-table layout byl v článku prezentován jako super výhodný, mimo jiné i co do absence zbytečných značek. Což přestává být pravda ve chvíli, kdy v daném layoutu musím použít záporný margin, protože pak musím komponentu něčím obalit. Což bych u klasického layotu nemusel.

Martin Hassman

je fakt, že css-table layout byl v článku prezentován jako super výhodný

To je ovšem lživé tvrzení. Pokud by někdo o tom pochyboval, přečtěte si článek a posuďte sami. Když jsem s Honzou na přípravě článku podílel, chtěl jsem, aby z něj bylo jasné, že tento přístup má své problémy a v textu to jasně zaznělo, je to i v závěru jasně řečeno.

Hoween

Mete, dokážeš si připustit, že by "tví redaktoři" nebyli úplně dokonalí, geniální a se slovními obraty vysokoškolských profesorů?

Martin Hassman

Ano jistě, holt nemají genialitu Ensteina a výřečnost Karla Čapka. Ale pokud přesto umí napsat články, které jsou pro českou obec webdesignerů přínosem, jsem s nimi spokojen.

Děkuji, že jsi se nesnažil zbytečně oponovat mému tvrzení.

ma

Nedavno jsem delal nejaky jednoduchu web, nic sloziteho, par stranek, jedno menu a rekl jsem si ze pouziju CSS kdy se to teda tedka ma delat. Nastudoval jsem tedy prislousnou literaturu a nejak to udelal i kdyz to byl opravdu porod. Mozna ze CSS je elegantnejsi, cistci a ja nevim co jeste vsechno, jenze udelat klasicky tabulkovy layout je proste 100x jednodussi nez se placatit a ladit jednotlive ramy aby to do sebe zapadlo.

Verim tomu ze clovek ktery se webem zivi bude mit CSS v malicku, bude umet vsechny finty a podobne. Ale ja si chci proste udelat jednoduchy web pro sebe a k tomu mi ty tabulky proste perfektne vyhovuji. Bude to asi stejne jako kdyz programator zacatecnik pracuje v basicu a nejde psat rovnou v cecku…

Radovan

Presne ako si spomenul. Nezivis sa tym, a teda nie je nutnost a v tvojom pripade ani cas na to, aby si to riesil cez CSS ked vies dizajn natrepat do HTML. Popravde by som to po tebe nechcel upravovat :) ale pre tvoje ucely to staci. A o tom to je.

Hoween

Popravdě, jakýkoli design je podstatně jednoduší nařezat a nakódovat přes CSS, než staré známé prasení a rozřezávání do hromady zanořených tabulek. Flexibilita takového layoutu je naprosto neporovnatelná.

Radovan

No ale o tom probleme sme sa momentalne nebavili. Reagoval som na cloveka, ktory sa tymto nezivi a pre jednoduche zverejnenie niekolkych informacii je to naozaj postacujuce. To ako by ste dosli za domacim kutilom a zacali do neho nadavat, ze to co robi robi zle a vy by ste to spravil inak.

harvie

0. Tabulky vypadají dobře v textových prohlížečích jako links -g linuxáci spojte se!!! ;o)

Dále se dá argumentovat i proti nešvarům:
1. sémanticky layout webu rozhodně nepatří mezi tabulková data
— to je otázka zvyku
2. pro změnu v designu webu musím upravovat HTML
— to nemusí být pravda při použití templatování nebo XSLT (ale to druhé je asi trochu prasárna)
3. ve většině případů vytváří mnoho zbytečného kódu
— záleží na složitosti designu – opět bych odkazoval na templaty
4. daleko hůře se s ním pracuje při tisku nebo na mobilních zařízeních
— opět záleží na složitosti – dá se přidat css pro mobilní zařízení, které s tímto pomůže…

McBig

Sem rád, že nejsem jediný tohoto názoru :)

a jen dodám
1) ne jen zvyku ale i pohledu na tabulku obecně, ale to je opravdu o pohledu, který má (a já sem tomu moc rád) každý jiný ;)
4) s tabulkami sem u mobilních zařízení problém neměl (nenašel sem kde by problém byl)

Hoween

Já zase nemám problémy s beztabulkovým layoutem na mobilních prohlížečích – ať už built-in, nebo na Opeře Mini. Hergot co dělám špatně, že všem se jejich table-less layouty na mobilech rozsypávají, zatímco mně ne? Není to jen způsobené tím, že já svou práci umím?

McBig

Já nenapsal že to na mobilech nejde bez tabulek, ja napsal že to s nima jde :) (viz komentář na který sem reagoval)

Hoween

Aha, takže protože je kodér lempl, tak udělá tabulkový layout a bude se plácat po ramenou, jak mu to všude funguje? Nebo co jste vlastně chtěl říct?

smithers

Ty mast dost chlapce

Hoween

Vždy rád diskutuji s inteligentními lidmi, jejichž názor není jen tupé plácnutí do vody. Díky.

Jan Jelínek

Nemůžu si pomoct, ale je to strašně podobné definici tabulek v XAMLu o které jsem tady psal v jenom z minulých příspěvků.

Dík za článek

Anonymní

Uzivate CSS nekorektne, nepochopili jste technologii, tak si nestezujte vy magori.

Martin Hassman

Myslím, že ten prvotní návrh skutečně nebyl, ale již v počátcích k tomu CSS dokonvergovalo (nemám pořádně nastudováno kdy a jak to probíhalo), proto o nepochopení kaskádových stylů nemůže být ani řeč. Jsou skutečně určeny pro layout.

Anonymní

W3C preslo z tabulkoveho layoutu na CSS layout az v roce 2002, cimz prokazuje, ze CSS nejsou pro layout urceny a nikdy nebyly, nicmene diky jejich skalovatelnosti a bohatosti je mozne pres ne layout resit – http://www.w3.org/2002/11/homepage

Teprve CSS3 na tom neco meni.

Podivejte se, jak W3C resi 3column layout a porovnejte s libovolnym ceskym resenim, vcetne te prasarny v clanku – http://www.w3.org/2002/03/csslayout-howto – co se vam libi vice?

Hoween

Čímž prokazuje co? Ten beztabulkový layout už je tam nasazený déle, než jeho tabulkový předchůdce. Navíc na něj přešli v době, kdy vládl IE5.5 a IE6, tedy naprosté CSS bastly.

Kdyby to nebylo vhodné na layout, myslíte, že by na to přešli?

Martin Hassman

Diky moc za dobre odkazy! Presto jako dukazni material pro vase tvrzeni nepostacuji. Nepremyslel jste, ze W3C mohlo prechod na novy layout odkladat, protoze proste cekalo na lepsi podporu v prohlizecich?

Anonymní

Prechod na CSS layout se mohl odkladat z libovolneho duvodu, nicmene jelikoz vim, jak stranky vypadaly stranky pred takovymi 20-ti lety, kdy zadne vicesloupcove layouty nikdo nemel a vse bylo na jedne strance, kterou kazdy cetl cetl vzdy odzhora dolu, zleva doprava a klikal na textove hyperlinky, tak jsem si jist, ze CSS opravdu nejsou zamysleny pro layout, s vyjimkou verze 3 a vyssi, kde jiz jsou pripraveny atributy slouzici k onomu "sloupcovani" pripraveny. CSS puvodne slouzily pouze k nastaveni barev a atributu textu.

hotovson

to by mne zajimalo, kterou to stranku jste pred dvaceti lety videl? bylo to vubec HTML?

Anonymní

Nejsem si jisty, cca v roce 1990 na VAXu bylo mozne cist prostrednictvim stranek s hyperlinky ruzne novinky ze sveta. Nejspise to byl jen hypertext, ne konkretne HTML, protoze to se nejvice rozsirilo az s HTML+ (priblizne v roce 1995).

Honza_DVB

Že by starý dobrý Gopher?

Pedro

Ja suhlasim s nazorom Rona Garreta (http://www.flownet.com/ron/css-rant.html) Uz som musel 2x upravovat layout v CSS, a musim povedat, ze keby som to upravoval v HTML (tabulky) bol by som asi tak 5x rychlejsie hotovy. No ale zazil som modu FRAME (ked sa na kazdu sprostost vytvoril vlastny frame, cim viac frejmov, tym lepsie), potom modu TABLE (ked niekto, kto pouzival frejmy bol totalne out, neschopny, a neviem co este), teraz je moda CSS (alebo web2.0, ako vravi moj manager ;) ) …

Jirka Kosek

display: table je sice hezké, ale k nějaké eleganci to má pořád hodně daleka. Život bude snazší, až budou prohlížeče podporovat:

http://www.w3.org/TR/css3-layout/

http://www.w3.org/TR/css3-grid/

Martin Hassman

Jirko nenapovídej 8-) , tohle se bude řešit v dalším přislíbeném dílu.

Filosof

Hlavně to má daleko k praxi.. IE6 a IE7 tu ještě chvíli pobudou..

Hoween

Což si ale řada lidí bohužel neuvědomuje. Je krásné jak se tady na Zdrojáku filozofuje "až jednou bude X", "až jednou bude Y", bohužel, všichni tito technologičtí filozofové jsou jen filozofové – chybí kontakt s praxí.

Martin Hassman

Nepodceňoval bych inteligenci čtenářů, že by snad nevěděli, jaký je stav IE na trhu a co můžete použít dnes a co je jen pohled do budoucnosti. Je samozřejmě škoda, pokud si to někdo z nich neuvědomí. Snažíme se to zdůrazňovat. Ale možná bychom to mohli zkusit psát nějak výrazněji (třeba červeně).

Hoween

Když si vzpomenu na legendárního kompletního průvodce CSS od Staníčka, byla na začátku každé kapitoly jasná a přehledná tabulka, co je kde podporováno. Tento článek je pojatý tak, že s příchodem IE8 budeme moct začít používat css-table layouty. Což je samozřejmě úplná kravina ze dvou důvodů:
1) Tyto layouty můžeme používat už teď, ale v IE nebudou fungovat – takže v praxi nepoužitelné.
2) Příchod IE8 nevypne IE7 a IE6, tudíž layouty dělané pomocí css-table opět nebudou v praxi použitelné.

O inteligenci čtenářů bych si přehnané naděje nedělal. Když si čtu komentáře pod články, jak všichni "děkují" i za články obsahující zjevné nesmysly, tak je vidět, že nad nimi moc nepřemýšlí.

Martin Hassman

Tento článek je pojatý tak, že s příchodem IE8 budeme moct

Teď jsi mě opravdu zaskočil. Článek jsem procházel před několika dny, tak jsem si musel teď raději zkontrolovat, zda je vše v pořádku. A naštěstí je. V článku je to jasně řečeno.

Obávám se, že buďto tedy mluvíš o jiném textu, než který vyšel zde na Zdrojáku, nebo jsi článek pořádně nečetl. Když se pořádně dívám, tak naštěstí většina čtenářů článek pochopila dobře, proto nebudu provádět dodatečné úpravy články.

Každopádně, pokud by měl někdo další snad pocit, že se mýlím, tak mi to prosím napište sem nebo na můj redakční e-mail. Každá zpětná vazba je pro mě důležitá!

Hoween

V souvislosti s blížícím se vydáním Internet Exploreru 8 se začalo hovořit o řešení, které velmi připomíná tabulkový layout.
Tato věta má poměrně jasné vyznění – IE8 nám umožní toto řešení používat. Což je nesmysl z těch dvou důvodů, které už jsem popsal.

Martin Hassman

Zde se jedná o chybnou interpretaci, do které je zapojena jistá dávka fantazie. Ne, ten text je v pořádku a nebudu jej měnit.

Anonymní

"V souvislosti s blížícím se vydáním Internet Exploreru 8 se začalo hovořit o řešení, které velmi připomíná tabulkový layout."

nahradte vetou

"V souvislosti s blížícím se vydáním Firefox 3.5, Chrome 2, Safari 4, Opera 10 se začalo hovořit o řešení, které velmi připomíná tabulkový layout."

Teda: preco presne sa o rieseni, ktore velmi pripomina tabulkovy layout zacalo hovorit az s prichodom Internet Explorera 8? A nie s prichodom nejakej verzie ineho z menovanych prehliadacov? Pretoze prichod Internet Explorera 8 znamena PRE ODCHOD Internet Explorera 6 a 7 asi tolko ako prichod Firefoxu 3.5, Chrome 2, Safari 4 a Opery 10 – nic neznamena. Internet Explorer 6 a 7 tu budu este peknych par rokov, a teda tento tabulkovy CSS layout je pre prax nepouzitelny – to vidi kazdy kto sa pozrie na statistiku pouzivanosti prehliadacov a uvedomi si, ako dlho po zaruke je taky dedko ako IE6 este velmi pouzivany.

A tym padom je citovana veta uplne irelevantna.

onyx

Já osobně používám kombinaci CSS a tabulek, podle toho, co zrovna potřebuju. Nci proti zastáncům úplně beztabulkového rozložení, ale vhodné použití tabulky, která pak byla dále kaskádována pomocí CSS, mi pomohla s řešením, které má tu výhodu, že je snadno čitelné ostaním. Zatím jsem třeba nepřišel na to, jak v CSS kombinovat sloupce s pevnou a proměnnou šířkou, které by fungovalo spolehlivě.

Co se týká CSS tabulek, tak osobně nevidím moc rozdíl mezi <table> a <div style="display: table;">, <tr> a <div style="display: table-row">, <td> a <div style="display: table-cell">, kromě toho, že varianta s <div> je delší.

I vzhledem k tomu, že tabulky vznikly právě kvůli vícesloupcové sazbě, bych doporučoval kvůli hlasovým čtečkám rozšířit tag <table> o atribut TYPE, kdy by pak
<table type="style"> určovalo tabulku pro vzhled a čtečka by jí ignorovala a
<table type="data"> by určovalo datovou tabulku.

v6ak

Rozdíl je v tom, že:
1) stroje budou v <table…> atd. hledat neexistující sémantickou hodnotu
2) pokud nepoužiješ style, ale class, pak to můžeš extrahovat do externího CSS a:
* je možné mít tabulky např. jen pro screen, ale ne pro print
* kdykoli to můžeš úplně přestylovat bez zásahu do HTML

Samozřejmě, ani css tables nejsou ideální, ale o tom za chvíli, pokud tu to, co chci napsat, ještě nikdo nenapsal.

BoodOk

Ad 2) Ono je ale přece možné přestylovat i TD, TR, TABLE, nemusí to být DIV. Neboli, mezi CSS tabulkou a HTML tabulkou není z hlediska možnosti stylování rozdíl.

Rado2

1) Aky stroj by aku semantiku hladal v tabulkach v mojom HTML? Ved HTML je vseobecny znackovaci jazyk pre akekolvek informacie. Nepoznam stroj co zozerie vseobecne HTML a "pochopi ho", pokial ma layout robeny cez CSS.

Martin Michálek

Díky za prima článek, hlavně o faux absolute position myslím v češtině nicmoc zatím nevyšlo.

Mám takový obecnější postřeh. My CSS kodéři se často stresujeme tím, že "něco nejde" a rádi se díváme do křišťálové koule, jak "to krásně půjde". Třeba v IE 10. Za nějakých pět let. :)

Jenže on nás do vymýšlení šílených řešení a těšení se na budoucnost nikdo nenutí – nikdo nás nenutí používat PNG, abychom pak "museli" využívat nějaké hacky pro IE6.

Stejně tak nás nikdo nenutí kódovat layout, kde je nutné aby byly dva sloupce stejně vysoké. Osobně jsem takový problém řešil naposledy snad před 4 lety. Jako nepůjde hora k Mohamedovi, měl by kodér aktivně komunikovat s designérem, zda se takový layout nedá vyřešit jinak.

Martin Hassman

Já jsem schválně o faux absolute position něco hledal a řekl bych, že v češtině o něm nevyšlo dokonce vůbec nic a tady na Zdrojáku je to taková jeho česká premiéra (teď nepočítám skvělou přednášku Rikiho Fridricha loni na WebExpu ve slovenštině).

karf

Jo, tohle dobrá metoda. Od té doby, co to vyšlo na ALA jsem to začal používat pro layout téměř výhradně. Akorát se občas vyskytuje problém u IE6 při použití procentuálního margin-left.

karf

Ech, rozbité layouty si neschovávám, musel bych zalovit v svn starších projektů (u aktuálních bych zas nerad dával ven vývojové verze zatím nespuštěných klientských webů). Pokud o to hodně stojíte, zkusím to někde vyhrabat. Double margin bug to nebyl, zkoušel jsem na to obvyklé triky, ale zabralo mi vždycky jen nastavení pozice v px (tedy např. -960px namísto -100%). Děláme jen fixní layouty, takže tam je to jedno. Blíž jsem to nezkoumal, ale asi to bude nějakou konstelací různých CSS vlastností a zanoření, protože se mi to stalo jen párkrát, jindy to funguje. Taky mi to myslím pravidelně blblo v IE6, když jsem chtěl takto pozicovat formulářové prvky (inputy), musel jsem ho obalit divem.

Anonymní

O faux absolute position jsem neslyšel, ale už pár let používám např.

#main {
width: 590px;
float: left;
position: relative;
left:180px; top:0;
}

#side {
width: 180px;
float: left;
position: relative;
left: -630px; top:0;
}

#otherside {
width: 180px;
float: right;
position: relative;
right: 0; top:0;
}

což mi umožňuje zvolit si pořadí sloupců jak potřebuji a vím že nejsem sám kdo to takto používá. Nebo nevidím nějaký podstatný rozdíl?

Ivorius

Zapomněl jsem se podepsat, nechtěl jsem zůstat v anonymitě :D Ivo Toman

Ivorius

Pro pixel perfect návrhy bych řekl, že je snadnější to moje řešení, ale možná to je tím, že ho používám skoro denně a jsem proto na něj zvyklý.

Jinak podsunutí samozřejmě nehrozí, neboť je to na úplně identickém principu jako faux absolute position (prvky se můžou klidně překrývat – jak je libo:)). Jediný rozdíl vidím v tom, že v tom řešení se to nejprve zasune mimo a pak vrací namísto, kdežto já to rovnou pozicuji bez zasouvání a musím u jednoho prvku pak počítat s předešlým prvkem.

Jako určitě to má něco do sebe, jen mě překvapilo jakože co to za převratnou techniku ve světě objevili, když v ČR se se obdoba už pár let používá :)

Martin Hassman

Inu používá-nepoužívá, o faux absolute position bychom také nevěděli, pokud by jeden z jeho autorů nenapsal onen jeden zmiňovaný článek na A List Apart. Existuje spousta zajímavých myšlenek a nápadů (a možná bychom se divili, kolik jich je), o který se neví, a které budeme muset znovu objevit, protože nebyly zveřejněny.

Pokud kdokoliv má nápad, o kterém si myslí, že by stálo za to se o něj podělit s ostatními, nabízím mu na Zdrojáku prostor.

A pokud se ten nápad ujme, můžeme začít přemýšlet, jak jej zapropagovat dál do světa. Pokud si své nápady nechá někdo pro sebe, tak s ním možná jednou zemřou – a to by byla škoda.

karf

Aniž bych chtěl nějak shazovat nápad s "faux absolute position", který je fakt šikovný, jsem si jistý, že tu samou techniku jistě používali mnozí dávno před tím, než to někdo objevil a publikoval na ALA pod tímhle sexy názvem. Stovky lidí denně používají tisíce různých triků, které třeba druhý den zapomenou a vůbec jim nepřijde, že objevili něco nového. Ono to CSS zas taková věda není :)

Martin Hassman

Prilis nepochybuji, ze to nekteri lide drive pouzivali, at uz v blederuzove nebo v oranzovomodrevariante nebo nekdo treba i na puntik stejne. Ale zrejme jen jeden clovek dostal napad, ze je to univerzalni reseni, ktere by se to mohlo i ostatnim a podelil se o nej s nimi. A zatimco na tech pripadnych predchudcich (at uz jich byly desitky nebo stovky) vubec nesejde (a kdyby na to reseni neprisli, tak by se asi nic nezmenilo), tak na tomhle jedinem cloveku ano. Tak je to i s vynalezy a se vsim.

McBig

Zní to nejspíš logicky, ale používá někdo z Vás třeba toto? Napadlo mě to při světlé chvilce když člověk nad tím celým malinko uvažuje ;)

.row { clear:both; }
.cell { float: left;}

prostě tabulka akorát ve stylech (řádky obsahují buňky). V IE6 se to chová trochu zvláštně (někde mimo buňku se musí napsat nějakej znak :D jinak to dělá mezi řádky mezeru.

benzin

Doku do stranek nezacnete psat dynamicky data, tak je css uplne v klidu a dobre reseni. Horsi situace nastane, kdyz zacnete do stranek sypat data dinamicka a nevite predem, jak bude ten ktery sloupecek siroky a vysoky, ale pritom potrebujete aby se mu ostatni prizpusobily. Napr. ten design odkazovany jako ukazka (prohazovani sloupecku) je naprosto nepouzitelny, kdyz nevite kolik tech sloupcu bude a jakou budou mit sirku.

Tabulky v css, urcite je to krok kupredu, ale nemyslim ze az tak dlouhy. Jak to bude resit collspany? Navic porad budu nucen uzavirat bunky do radku. Sice to resi rozmisteni bunek v radku, ale naprosto to neresi rozmisteni bunek v cele strance. Zkuste udelat transpozici treba toho layautu co je na rootu, moc daleko nedojdete.

Skutecne kdyz budu chtit totalne prekopat layout, tak nejlepsi cesta XML -> XSLT (jiny transformator) -> HTML (XHTML). Dokonce uprava (resp. nove napsani) transformacni sablony bude vyrazne snazsi.

Rado2

Prave FX 3.0.7 mi tu ukazku zobrazil blbo, posledny stlpec bol zobrazeny maly a medzi patickou a prym stlpcom. V IE8 to bolo ok.
Skusil som to teraz znovu v novom okne a na druhy pokus to zvladol aj FX.
Takze tiez sa na to neda 100% spolahnut.

Martin Hassman

To je zajímavé, můžete poslat screenshot? Já to ve Firefoxu 3.0.7 vidím v pořádku.

Rado2

Takto vyzeralo len prve zobrazenie, mozno to bola nahoda a zle sa nacitalo html, alebo css. Ked som to otvoril v novom okne, uz to slo, a uz ked to teraz skusam otvarat, uz mi to stale zobrazuje spravne. Z prveho pokusu som SS nerobil a zavrel som to. Skoda.

Martin Hassman

Pokud se problem neopakuje, tak odhaduji, ze to mozna byl jen nejaky pozustatek reflow bugu Firefox, ktery se jen jednou za cas objevi.

Jan Vaněk jr.

Já mám ve FF2 problémy při vypnutých obrázcích; po reloadu se to zdá OK.

sid

Me se stalo neco podobneho. Ctvrty sloupec byl az uplne dole pod prvnim sloupcem. Reload to take vyresil.

Rado2

Niekolko rokov som web nerobil, takze era CSS layoutov ma obisla. Teraz to trochu skusam, ale neprisiel som na to , ak riesit napr. 2-stlpcovy layout (napr. formular), kde nechcem zadavat sirky stlpcov, aby som nemusel sledovat co je ako siroke pri akom fonte (popisy poloziek sa mozu vkladat z databazy podla vybraneho jazyka).
Nemam rad weby robene na pevnu sirku. Pri lepsom rozliseni su to potom zbytocne dlhe uzke klobasy, co nevyuziju plochu monitora. Da sa bez tabuliek spravit v CSS napr. 3 stlpcovy layout, kde stredny stlpec ma automaticku sirku na max. vyuzitie sirky okna?

Smasty

Da sa bez tabuliek spravit v CSS napr. 3 stlpcovy layout, kde stredny stlpec ma automaticku sirku na max. vyuzitie sirky okna?

Samozrejme, ze sa to da. A nie je to vobec zlozite. pouzijes absolutne pozicovanie. Asi to pojde aj s pouzitim float, ale to sm neskusal.
Tu si to mozes vyskusat.

Hoween

Samozřejmě že dá, i několika způsoby. Je vidět, že vaše znalosti CSS jsou velmi, velmi bídné.

http://jdem.cz/a3bw8

Rado2

To su, preto sa pytam :)

Ondřej Mirtes

To bys nebyl ty, kdybys nedodal tu druhou větu.

Hoween

Změnilo by se něco, kdybych jí nenapsal? Pouze jsem tou větou konstatoval stav, nic jiného. Kdybych ovšem ve druhé větě napsal "jste css guru", pak by vše bylo v pořádku, že?

Je vidět, že komentáře, ve kterých se nechválí a neleze do zadku, jsou na Zdrojáku "nevhodné" a řadě lidí dělá problém přijmout vlastní kritiku.

Logik

Ne, je vidět, že neumíš slušně odpovědět na slušně položenej dotaz.

PS: Neni problém v tom, že je to kritika, problém je v tom, že je to neoprávněná kritika. Když někdo napíše špatnej článek, tak je správný upozornit na chyby. Když se ale někdo ptá, tak očividně proto, že neví. Extra na to poukazovat je buranství. Navíc je to věc, která tady nikoho nezajímá….
PPS: Rozdíl mého a Tvého předchozího příspěvku je v tom, že autor dotazu si je svojí nevědomosti evidentně vědomej, zatímco Ty úrovně svého vystupování nikoli…

Karell

Konstatoval jste stav, ktery byl zjevny uz z puvodniho prispevku, sam autor to tam napsal. Nic mu to tedy nedalo, nebyla to konstruktivni kritika. Spis to vypada, ze jste si potreboval pohladit zakomplexovane ego (ostatne ne poprve). Ale kdyz se to schova za kritiku, tak to vypada lip, zejo. Jaky je to pocit takhle to zacatecnikovi nandat?

Mozna by se usetrilo hodne mista v diskuzich, kdyby kazdy napsal do profilu nebo ke svemu prispevku, jak hodne zvlada CSS a weby obecne. Pokud to neni schopen posoudit, tak si tam napsat co o nem prohlasil profik Hoween. Pak by to Hoween nemusel porad dokola opakovat (mozna).

abych to nezdrzoval, tak me znalosti CSS jsou take velmi velmi bidne

Ondřej Mirtes

Seš šťastný? Netrpíš komplexy?

Jaké typy článků by tě uspokojily? Proč sám nepublikuješ a umíš jen kritizovat?

Hoween

Grudl, Staníček, ano, i Met píšou vynikající články. Pejša, Sedlák, to je jeden velký nesmyslný brak.

Stačí to takhle?

Martin Soukup

Nechápu tyhle lidi odtržené od reality, kteří se stále neúspěšně snaží vymyslet dávno vymyšlené.

Každý GUI framework musí řešit pozicování prvků při změně velikosti okna. Zkusilo se toho hodně a fungující řešení v podstatě již dávno bylo nalezeno. Nějaký layout manager obsahuje dnes každý jazyk s frameworkem pro tvorbu GUI, ať je to Java, .NET, Flex, cokoliv…. O flexibilitě těchto layout managerů se HTML a CSS nikdy ani nesnilo.

Proč to nejde jednoduše převzít? Je to dávno vymyšlené a praxí vyzkoušené. Osvědčilo se to! Jdou tak udělat i ty nejsložitější designy! Někteří zoufalci dokonce layout manager implementovali i v javascriptu:

http://www.ruzee.com/files/lmex/test.html
http://blog.xilinus.com/layoutmanager/samples/embed.html

PROČ TO V CSS UŽ DÁVNO NENÍ NATIVNĚ?

Rado2

Zaujimave linky, ale neriesia male okno. Ked sa uz pri zmensovani zacnu bloky prekryvat, malo by sa zmensovanie zastavit a pouzivat scroll bary na cele okno

Martin Hassman

Proč to v CSS není? Na to není příliš složitá odpověď. Stávající CSS2 a nižší to neobsahuje v celku logicky, protože tehdy se představou CSS pro layout webových aplikací nikdo až tak moc nezabýval (je to konec devadesátých let). A pro layout dokumentů, se kterými se tehdy kalkulovalo, to prostě stačí. Později již jakési návrhy počítající i se flexibilitou vznikly a ukáže je příští pokračování tohoto článku.

Obecně se tu objevila propast webdesigneři vs. vývojáři – řada webdesignerů si na problémy zvykla, umí je "nějak" řešit, sžili se s tím a už si pořádně neuvědomují, v jakém blátě se to brodí – přestalo jim prostě smrdět. Naopak vývojáři, kteří právě pracují s tvorbou layoutu pro jiná prostředí, nechápou, jak mohou webdesigneři v něčem takovém vůbec pracovat. Nejlíp se to pozná, když posadíte tyhle dva lidi vedle sebe, jeden se pak nestačí divit. Někdy si myslím, jestli není škoda, že se do CSS WG nenahrnulo pár desktopových vývojářů, aby zkusili lepší řešení. Možná by s ním nepřišli, ale za pokus by to stálo.

Anonymní

"PROČ TO V CSS UŽ DÁVNO NENÍ NATIVNĚ?"
Asi preto ze webstranka az donedavna nebola GUI ale dokument? Mame v Microsoft Word nastroje na tvorbu GUI?

Martin Soukup

Jen jestli to spíš není tím, že webstránky jsou odjakživa gui, jen si to nikdo neuvědomil.

Má snad dopis babičce hlavní menu?

Martin Hassman

Jen jestli to spíš není tím, že webstránky jsou odjakživa gui, jen si to nikdo neuvědomil.

To je vtipný názor, ale nepravdivý. Podívejte se na začátky webu a poznáte sám. Skutečně se jednalo o dokumenty, žádné aplikace. Dokonce na začátku neexistoval žádný způsob jak definovat layout – mezi nejpokročilejší designové prvky patřilo oddělení odstavců nebo vytvoření seznamu.

protectorz

Design zajimavy az do doby nez zacnu hybat s velikosti okna prohlizece. Najednou se to chova jako kaca na spagate.

mofo

přijde HTML5 a veškeré toto plané teoretizování padne na hlavu.

Martin Hassman

HTML v mechanismu tvorby layoutu nic nezmění. Vůbec nic. Přinese řadu novinek (např. nové sémantické značky), ale mechanismu pro tvorby layoutu se to nedotkne.

mofo
Martin Hassman

Díky za odkaz. Tenhle článek od Lachyho popisuje ony nové sémantické značky, na které jsemu pozorňoval. Oproti stávajícím divům nesou navíc jen sémantickou hondotu. Na jejich stylování se nic nemění. V tomto ohledu zůstanou veškerá dnes platná tvrzení stále platná.

Radovan

A mozem sa spytat comu ste nerozumel na Martinovom komentari ? :)

mofo

problém CSS layoutu jsou lidi. jednak nedokáží rozlišit mezi layoutem a mezi zobrazením dat, stejně jako zde v mnoha příspěvcích, jednak se pořád někdo snaží dělat nová, neotřelá, originální a jánevím jaká ještě řešení, která ovšem nejsou obecně spolehlivě interpretovatelná a tudíž jsou nepoužitelná.

imho css tabulky nejsou žádnou vizí do budoucnam, jsou jednou z mnoha cest do pekel. šťastnou cestu.

Hoween

Amen. A teď to těm filozofům a autorům skvělých neotřelých řešení ještě vysvětlete :-)

mofo

komu? tady polovina lidí css minimálně docela dobře rozumí, ale druhá je totálně mimo. jedněm není proč a druhým nemá smysl cokoliv vysvětlovat.

v6ak

Asi tu nepadlo pár nevýhod, navíc bych měl pro některé řešení, ale asi ne pro IE8.
* Nenapadlo vás řešit position: relative pomocí vnořeného divu? Ano, nemůžu použít bottom. To by možná spravilo height: 100%, ale mám pocit, že to tak nejde. Jinak prezentační HTML by mohlo jít vyřešit pomocí XBL, což není jen současnost ve Firefoxu, ale snad i budoucnost od W3C. Stav neznám.
* Možná o tom někdo psal, ale je tu asi problém s poradím sloupců. Na to je taky nějaká -moz vlastnost a možná to bude později i podle W3C CSS. Takže to taky asi nebude problém.
* Horší to bude se složitějším rozložením, kde nás prezentačního html nezbaví asi ani XBL. Trošku asi pomůže :after, content:""; a display: block;.
V každém případě nás do většího či menšího nasazení čeká delší doba a dnes je odvážné odhadovat, jak to dopadne.

FuFo

Ve článku se mluvilo o tom že není možné přes CSS udělat layout se stejnou výškou sloupců. Není to jednoduché, ale jde to bez jakýchkoliv špinavých triků.
Podívejte se na: http://matthewjamestaylor.com/

Hoween

Ano, CSS 2.1 už v současné době není omezující v ničem a dá se v něm udělat opravdu jakýkoli layout. Záleží jen na tom, jestli si s tím chci dát tu práci, nebo začnu vymýšlet ptákoviny typu css-table a svádět vlastní neschopnost na CSS.

Rado2

Hm no ale pridavanie dalsich tagov je uz potom to iste ako tabulky, akurat sa mi to zda menej prehladne, s CSS hackmi. Tiez tam neni len "semantika" a treba menit HTML.
Nemal by "semanticky" CSS layout vyzerat takto?

<div class="text">text</div>
<div class="navigacia">menu…</div>
<div class="reklamy">img…</div>

a potom uz len zmenami v .css vytvorit *lubovolny* layout?
Mozno sa teraz pytam blbost, nechcem teraz zacinat flame tabulky vs CSS, este raz pripominam ze sa ciastocne vraciam k HTML po dost vela rokoch :)

Rado2

No este keby to tak neorezavalo vysvetlujuci obrazok pri zmensovani

TrSek

Nic v zlom ale nie je nacase trochu nad sebou porozmyslat?
1. To ze CSS nedokaze nahradit table layout len dokazuje ze CSS ma pred sebou este dlhu cestu.
2. Nezabudli ste nato ze webdesing ma len sprostretkovat data od zdroja k uzivatelovi?
3. Mne sa zda ze webd. precenuju svoju dolezitost. Hlavne poznamky o tom ze navrhari su prasata, koderi su prasata, amatersky tvorcovia stranok co robia v table su prasata.

PS: Ja cakam kedy konecne bude kucharka ktora povie ak chces table pouzij tento CSS bude fungovat uplne rovnako uplne vsade. Pokial toto nebude tak reci o prasatach co tvoria cez table si nechajte pre svoje deti na doma.

Tobiáš Potoček

nevím, co je na tomto řešení tak úžasného,
http://pastebin.com/f668e382b funguje v podstatě stejně,
pouze je kratší. (omlouvám se za pastebin, nepodařilo se mi
vložit zdroják do příspěvku, pořád to hlásilo spam).

Také s různou délkou sloupců jsem nikdy neměl výrazné
problémy. K čemu potřebujeme, aby byly sloupce stejně dlouhé?
Pokud je celý web jednolitou barvou, tak k ničemu. A když se
jedná o grafické rozlišení dvou sloupců, prostě stačí dát
nadřazenému divu na pozadí ten správný obrázek. To samozřejmě už
není jen čisté css, nicméně pokud je design webu tak jako tak grafický,
je to jedno. Samozřejmě, toto bude fungovat jen na fixní nebo
aspoň napůl fixní layout, tomu se holt musí stránka přizpůsobit.

CSS layouty jsou plně dostačující už teď, tak jak jsou. Fixní
nebo flexibilní layouty jsou úplně jednoduchoučké, pouze
jejich kombinace se řeší trochu kostrbatě.

CSS má mezery někde jinde (nebo je mám já ve vzdělání).
Netušíte někdo, jak vytvořit horizontální css menu tak, aby se
chovalo přesně jako v tabulce? Tzn. jednotlivé položky se
automaticky roztáhly na celou šířku menu a šířky jednotlivých
položek aby odpovídaly délce textu uvnitř.

Radovan

Uzasne je na tom to, ze to s HTML tabulkami ma len podobne chovanie :)

Layouty, ktore maju hodnotu obtekania maju taku vlasnost, ze obsah, ktory sa v nom nachadza a je vacsi ako samotny nadradeny element tak jednoducho pretecie prec.

A co sa tyka automatickeho roztiahnutia na celu dovolenu dlzku:

ul {
display: table;
width: 100%;
}
ul li {
display: table-cell;
}

Ze by to tie tabulky boli taka strasna sprostost ? Ts ts ts

Tobiáš Potoček

To řešení ohledně horizontálního menu jsem myslel funkční ve všech nejrozšířenějších prohlížečích, tzn. včetně IE6 a IE7, které tuto vlastnost bohužel nepodporují (viz článek) ;)

Samozřejmě že tabulky zas takové zlo nejsou, pokud jsou udělané dobře, nicméně pořád mám rád sémantický web a tabulky prostě na layout nejsou určeny. Kromě toho pokud chci mít hlavní obsah ve zdrojáku zcela nahoře, řešit se to musí také pomocí prapodivných hacků, takže žádná krása. Osobně jsem s možností tvorby layoutů v css poměrně spokojený.

Také si myslím, že pokud se v rámci sloupce objeví objekt širší, než samotný sloupec, je někde chyba ;) Dočasně se to dá ošetřit pomocí overflow.

Radovan

Ale ty si nepochopil princip CSS tabuliek. CSS sluzi na definovanie vizualnej casti webovej stranky, cize nie su to iste ako HTML tabulky, ktore definuju obsahovu a vyznamovu cast dokumentu. Inak nechapem ako ti moznost CSS tabulky narusa semantickost webu, vysvetlis mi prosim ? Uz vyssie som spominal, ze pre uzitie obtekaneho alebo tabulkoveho dizajnu sa v HTML nezmeni ani bodka.

Co sa tyka pretecenia vnoreneho objektu za objekt nadradeny tak je to uplne bezne. Velke tabulky, nezalomitelne slova (ktore by zalomenim stratili vyznam), komplikovanejsie grafy, atd… A je to uplne bezne pri CMS.

Co sa tyka riesenia problemu. Co ti brani nad tym porozmyslat ?

pre IE definujes toto

ul li {
display: inline-block;
}

$("ul li").width( ($("ul").width() / $("ul li").length )

A to som ti dal uplne riesenie. A ani nebolo treba o tom zbytocne rozpravat.

Tobiáš Potoček

Tady totiž došlo k drobnému nedorozumění z mé strany, za což se omlouvám :) V "Ze by to tie tabulky boli taka strasna sprostost ? Ts ts ts" jsem se mylně domníval, že mluvíš o HTML tabulkách a podle toho jsem reagoval. Samozřejmě proti CSS tabulkám nic nemám a těším se, až budou plně podporované.

K tomu přetečení: nevybavuji si, že by nějaké kvalitnější stránky měnily rozložení webové stránky kvůli širšímu obrázku v jednom ze sloupců. Na ošetření příliš velkých obrázků a grafů tady máme ten overflow a stejně si myslím, že administrátor webu či přímo CMS by si měl šířku těchto objektů ohlídat. A co se týče nezalomitelných slov, takových, co by se nevešly do průměrného postranního pruhu, je opravdu málo. A i tak se to dá ošetřit opět pomocí overflow.

O display:inline-block jsem dosud neslyšel, děkuji za tip:)

pepa

Sila FAP je v tom, ze poradi sloupcu na obrazovce muze byt uplne jine nez
poradi divu v html kodu. css napisete jednou, ale html kod muzete libovolne
preskladat.

cleb

Ve w3 se můžou třeba rozkrájet a vymyslet dokonalý způsob layoutu, ale nebude to nic platné. Dokud bude většina uživatelů používat dokonalý, nejlepší, a jediný správný operační systém windows xp, samozřejmě s IE6, tak je to úplně k ničemu.

Martin Hassman

Nezapomeňte, že nový systém se musí napřed vymyslet, aby mohl být implementován. Každý starší prohlížeče dříve či později vymizí. Ano, někdy to trvá neuvěřitelně dlouho, ale pochopitelně to není důvod k tomu, aby se nehledalo lepší řešení.

xurpha

Je to (podobně jako třeba javascript, DOM, atd., atd.) nedomyšlený podnik; to se nikdo nedokázal pořádně navrhnout a vymyslet systém, který by byl nějak kompletní? Vezměme třeba floaty. Proč např. není možné, pokud mám něco jako:

<div>
<div class="a">…</div>
<div class="b">…</div>
</div>

nastavit div s class="b", aby "floutoval" nad úroveň prvního divu?

A takových příkladů by bylo spousta, spousta…

Jirka Kosek

CSS není prasárna, ale jednoduchý stylový jazyk, který má pouze prezentační část, ale téměř postrádá možnosti transformace vstupního dokumentu před zobrazením. Pomocí transformace je možné dělat věci jako měnit pořadí zobrazených dat, dopočítávat dynamicky hodnoty apod.

Pokud potřebujete dělat takovéhle věci, musíte sáhnout po nějakém silnějším nástroji jako je XSL nebo DSSSL.

pepa

Co myslíte, půjde příklad tohoto layoutu vytisknout? Pokud bude jen na jedné papírové stránce ANO. Zkusil jsem zvětšit výšku stránky tak aby zasahovala na dvě tiskové strany, a pomocí náhledu tisku jsem to zkontroloval. Safari a Chrome jako jedinné browsery vytiskly obě strany bezchybně. FF3 i Opera renderuje jen první stranu, druhou stranu má prázdnou, IE8 "vysoký sloupec" vytiskl samostatně (tedy 4 strany).

Velké bloky formátované pomocí "float" dělají někdy potíže při tisku, proto bych byl opatrný zejména na stránkách, které mají hodnotu a je předpoklad, že je čtenář bude tisknout.

V HTML citelně chybí element (tag): layout, nebo grid. Náhradní řešení pak vyvolávají spoustu emocí.

Daniel Steigerwald

Poslední dobou jsem se musel CSS opět zabývat trochu více do hloubky a překvapilo mne co vše je možné:
– display: inline-block i pro IE6 a FF2 (layout a moz proprietary)
– png v IE6 bez javascriptu (via vml)
– libovolné pořadí sloupců (stačí float a margin)
– stejná výška sousedních bloků podle obsahu (wrapper s overflow hidden; blokům padding-bottom:10000px; margin-bottom:-10000px;)
A naopak co není možné :), není možné v IE6 i 7 používat UL LI. Při nestování se mohou objevit takové renderovací problémy, že ani zoom, ni position nepomůže. (pomůže pouze float a to už je moc)

A k článku samému, je imho krapet mimo, matoucí pro začátečníky a zbytečný pro odborníky. Doporučuji toto: http://www.positioniseverything.net/articles/onetruelayout/

Jakub Vrána

Za nejdůležitější nevýhodu tabulkového layoutu (tedy HTML tabulek) považuji pomalost zobrazení stránky. Vzhledem k tomu, že prohlížeče stránku zobrazí až po načtení celé tabulky (nebo přinejmenším jednoho jejího řádku), tak se stránka uzavřená do jedné velké tabulky zobrazí až po jejím celém načtení. Dojem uživatele je tak mnohem horší – má pocit, že se nic neděje, zkouší refresh, …

Bez tabulek se stránka zobrazuje průběžně.

pepa

ani zde uvedena ukazka nefunguje v IE6. Podarilo se mi sice rozfungovat
sloupce v IE6, ale nelze „vyclearovat“ dalsi tok dat a ta se pak ukazuji
zapadla pod sloupci (obal sloupcu ma chybne nulovou vysku) Nema nekdo reseni?
Clear pouzit nelze.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.