„Everything You Know About CSS Is Wrong“ alebo CSS tabuľky pod lupou

Michal Kováč

Autori - Rachel Andrew & Kevin Yank

Problémy CSS

CSS a prehliadače

CSS tabuľky?

Viacstĺpcový layout

Viacstĺpcový layout - CSS tabuľky 1

.t { display: table }
.r { display: table-row }
.c { display: table-cell }

Viacstĺpcový layout - CSS tabuľky 2

Anonýmne tabuľkové prvky

  • nieje potrebné obaľovať všetky bunky riadkami a tabuľkami
  • ak je bunka bez rodiča zobrazovaného ako riadok, obalí sa táto bunka aj so súrodencami do anonýmneho riadku (podobne je to so stĺpcami)
  • v predchádzajúcom príklade teda možno vynechať .t a .r
  • dlhodobý bug vo Firefoxe - na anonýmne prvky sa neradno spoliehať za každých okolností

Použitie CSS tabuliek 1

  • flexibilný layout - stačí zadať rozmery v percentách (hlavný obalový prvok 100%)
  • vnorené tabuľky - bez floatu a faux stĺpcov
  • absolútne pozíciovanie vnútri CSS tabuliek
    • problémové, nešpecifikované u tabuľkových prvkov
    • je možné obíjsť pomocou obalenia/vloženia blokového elementu s relatívnym pozíciovaním

Použitie CSS tabuliek 2

  • colspan, rowspan
    • bez priamej podpory v CSS tabuľkách
    • absolútne pozíciovanie, vnorené tabuľky
  • absolútne pozíciovanie vnútri CSS tabuliek
    • problémové, nešpecifikované u tabuľkových prvkov
    • je možné obíjsť pomocou obalenia/vloženia blokového elementu s relatívnym pozíciovaním
  • zdrojový kód stránky - vo veľka prípadoch by vyžadoval úpravy, je však možné využiť table-header-group, table-footer-group

Prístupy k starším prehliadačom

  • podpora: FF2, FF3, IE8, Opera 9.5, Safari 3
  • a čo IE6 a IE7? (<!--[if lt IE 8]>)
    • ignorovať
    • vytvoriť zjednodušený layout
    • vytvoriť presnú kópiu pomocou bežných praktík

Budúcnosť?

  • Viacstĺpcový layout [ukážka]- column-count, column-gap, column-width
  • Grid - grid-columns(10em,1em)[7], #stvorcek {position: absolute; left: 1gr; width: 4gr;}