„Everything You Know About CSS Is Wrong“ alebo CSS tabuľky pod lupou
Michal Kováč
Autori - Rachel Andrew & Kevin Yank
Problémy CSS
- relatívna zložitosť
- pôvodná idea - vertikálne usporiadanie blokov (1D)
- prax - mriežka (2D)
CSS a prehliadače
- Bitka na Internetovom poli (1997[štvorky] - 2001[IE6]) - Netscape vs. IE
- Alternatívy k IE6
- IE8(19. marec 2009) - CSS 2, ACID 2 passed
„With the imminent release of IE8, Microsoft has fulfilled its part of the bargain; now
it’s time to fulfil ours.“
Viacstĺpcový layout
- absolútne pozíciovanie
- floating
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
- jednoduché
- sémanticky bezproblémove
- funkčné len na moderných prehliadačoch
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;}