Alt du veit om CSS er feil!

 

Alt du veit om CSS er feil!, slik lyder tittelen på ei ny bok frå Sitepoint: «Everything You Know About CSS Is Wrong!«. Boka viser deg nye teknikkar i CSS som gjer at du slepp avanserte flyte-layoutar og «hacks» for å få webdesignet på stell med CSS-basert layout. Dei påstår at det skal bli lettare å bruke CSS, noko som høyres ut som ein kjedeleg kvardag tykkjer eg.

Dei viser teknikkar som ikkje er 100% støtta i dagens nettlesarmarknad, men så snart IE 8 er nummer 1 blant windowsbrukarane vil teknikkane dei viser ha full støtte. Alle dei andre støttar det allerde: Firefox, Safari, Opera osv..

Dei går spesielt inn på den nye støtten for display:table; display:table-cell; og display:table-row; disse nye display-mulighetane gjer at du kan få alt frå DIVar til H2ar til å oppføre seg som tabellceller – altså CSS-tabellar. Dette gjer at me kan la semantisk-html-kode presentere layouten som ein tabell utan at det er ein tabell. Eh, det høyres jo litt tåpeleg ut, kvifor ikkje berre bruke ein tabell til? Jo, du får ryddigare, lettare og rettare kode i motsetnad til å lage ein tabell-tabell som er tyngre.

Digital Web Magazine viser eit eksempel frå boka:

HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
⋮ HTML head content…
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="nav">
⋮ navigation column content…
</div>
<div id="extras">
⋮ news headlines column content…
</div>
<div id="content">
⋮ main article content…
</div>
</div>
</div>
</body>
</html>

CSS:

#main {
  display: table;
  border-collapse: collapse;
}

#nav {
  display: table-cell;
  width: 180px;
  background-color: #e7dbcd;
}

#extras {
  display: table-cell;
  width: 180px;
  padding-left: 10px;
  border-right: 1px dotted #d7ad7b;
}

#content {
  display: table-cell;
  width: 380px;
  padding-left: 10px;
} 

Ferdig webdesign:

Dette virka svært lovande tykkjer eg, spesielt med tanke på vertikalfordeling, der har alltid tabellar hatt overtaket på CSS. Det var på tide at det kom ei ordning på det. Men det er nokre år til me kan bruke det aktivt då, diverre.. framleis mange som brukar både internet explorer 7 og 6! Kanskje i 2010?

4 comments

  1. Display:table har vært ute lenge da men 😮 det er også støttet i mange forskjellige browsere.

  2. Jeg har lekt meg endel med denne teknikken, og den gjør det blant annet lettere å lage pene tre-kolonne design. – Men så var det denne IE-greia da 🙁

  3. Det har vore støtte for dette ei go tid i mozilla og webkit nettleserar, men at IE skal støtte det i versjon 8 gjer at me endeleg kan ta det i bruk. 😀

  4. Jeg har jo alltid fått høre at det er fy-fy å bruke tabeller til sideoppsett, men denne boka så jeg mon i. 🙂 Gleder meg til den kommer ut – så takk for tips!

Comments are closed.