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

Michal Kováč

Autori - Rachel Andrew & Kevin Yank

• Rachel Andrew
  • edgeofmyseat.com
• Kevin Yank
  • technický vedúci SitePointu
  • yesimcanadian.com

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

CSS tabuľky?

• IE 8 podporuje hodnoty table, table-row, tablecell u vlasnosti display ako posledný z majoritných prehliadačov

• table    { display: table }
  tr       { display: table-row }
  thead    { display: table-header-group }
  tbody    { display: table-row-group }
  tfoot    { display: table-footer-group }
  col      { display: table-column }
  colgroup { display: table-column-group }
  td, th   { display: table-cell }
  caption  { display: table-caption }
  

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