Tech Life

Ilustrační obrázek

Tabulky pro layout

13. 04. 2010 16:00    kategorie: Tech Life    autor: JIz    komentářů: 0

V době, kdy se Internet Explorer 8 blížil k finální verzi a bylo jasné, že bude podporovat CSS vlastnosti pro tabulkové zobrazení libovolných elementů, zvedla se vlna diskusí, zda to skutečně bude ten pravý způsob, jak dělat layout stránky. Přes všechny (technické i ideologické) námitky jsme techniku vyzkoušeli v několika projektech a tady je pár střípků, které by se mohly hodit.
 

Místo úvodu několik odkazů:

Abych si dál ulehčil psaní příkladů, předpokládejme CSS definice:

Anonymní tabulkové objekty

Specifikace CSS předepisuje pro případy, kdy elementy v dokumentu nepředstavují úplnou reprezentaci tabulkového modelu, doplnění odpovídajících anonymních objektů. Srozumitelněji na příkladu:

Pro tento případ specifikace žádá, aby prohlížeč vykresloval element tak, jako by první i druhou buňku tabulky obaloval jeden společný element s hodnotou display: table-row, tzn. podobně jako:

Při testování layoutu lokálně se zdálo, že všechno funguje přesně podle specifikace. Po nasazení na serveru a vyzkoušení s ostrými daty se ukázalo, že Firefox se nechová úplně deterministicky: v některých případech vytvořil skutečně jednu řádku tabulky pro obě buňky, poměrně často ale při prvním vykreslení stránky vytvořil pro každou z buňek vlastní řádku (a tedy je zalomil pod sebe) a až po obnovení stránky je vykreslil vedle sebe.

Poučení: na doplnění anonymních objektů nespoléhat, všechny potřebné elementy je třeba mít explicitně uvedené ve stylovaném dokumentu. Bohužel to tomuto řešení podstatně ubírá na eleganci.

Pořadí elementů v dokumentu

Většina pojednání o použití této techniky zmiňuje následující problém: vracíme se do stavu, kdy není možné změnit vizuální uspořádání prvků ve stránce, aniž by se změnilo pořadí elementů ve stylovaném dokumentu.

Tento problém se dá obejít s použitím CSS vlastnosti direction. Tuto techniku se pokusím popsat trochu podrobněji.

Jazyk HTML má atribut dir, který říká, jaký je směr písma textu obsaženého v elementu. Tuto informaci ovšem prohlížeč typicky nepoužívá k řazení jednotlivých znaků za sebe: že se mají například znaky arabského písma řadit zprava doleva, je prostě vlastnost těchto znaků. Atribut dir rozhoduje o věcech na úrovni HTML elementů; důležité věci jsou:

  • Odrážky a číslování seznamů musí být na začátku první řádky položky seznamu. Pokud je text česky, měly by být vlevo, pokud arabsky, měly by být vpravo.
  • Buňky tabulky v řádce se mají řadit stejně jako například slova na řádce v textu. Pokud je text česky, zleva doprava, pokud arabsky, je to zprava doleva.

CSS má odpovídající vlastnost direction. Její hodnoty jsou ltr (default) a rtl. Za normálních okolností by měla hodnota této CSS vlastnosti být shodná s hodnotou atributu dir v HTML, a obě by měly odpovídat použitému písmu; případy, kdy je tomu jinak mohou vést k vážným problémům při nedostupném CSS apod.

Jak se ukazuje, prohlížeče, které podporují display:table-*, dovolují nastavit CSS hodnotu direction elementu s hodnotou display:table a zohlední ji při řazení elementů s hodnotou display:table-cell v něm obsažených. Příklad použití:

Všimněte si, že je třeba na každé buňce vrátit původní hodnotu direction.

Živá ukázka (nebude fungovat v IE 6 a 7):

Pravý sloupec
Levý sloupec

Tímto způsobem tedy můžeme dosáhnout požadovaného vzhledu i s variantním pořadím prvků ve stránce. Podobně jako při použití plovoucích objektů: je to hack, ale přesně podle specifikace.

Sdílet odkaz:
tisk

Diskuze k článku

K článku nebyl zatím přidán komentář.

Přidat příspěvek

 

Kontakt pro média


Máte zájem o další informace, odborný článek či přednášku na konferenci? Kontaktujte nás prosím na pr@etnetera.cz.

RSS - Tech life


RSS kanál Tech Life Blogu

Offlineblog

Offlineblog

Ljama


Komix z prostředí imaginární firmy.

ljama

Ještě jste ho nečetli? Tak tudy ...

 
Doporučujeme: Nabídka práce, volná pracovní místa - pracovní portál SPRÁVNÝKROK.CZ