Fytti rakkern så bra vi webdesignere har det i 2019.

Hvis noen hadde fortalt meg, da jeg bygde min første nettside i 1998, at jeg om 20 år kunne bruke CSS-variabler rett i nettleseren, bruke en egen CSS-property som heter grid, lage flytende design med flexbox og at layout skjer med <div>-taggen, ville jeg bare sett dumt på vedkommende.

Men kanskje ikke av den grunnen man skulle tro.

For hva skulle jeg med alt dette, når jeg hadde <table>-taggen?

Designkongen

I 1998 var det nemlig bare én tagg som gjaldt om du skulle lage et fint og fjongt webdesign, og det var <table>.

Det fungerte for eksempel sånn:

<table width="300">
 </tr>
     <td bgcolor="blue" color="white" colspan="3">Min header</td>
 </tr>
</tr>
    <td bgcolor="green">
        <p>Sidemeny</p>
        <a href="#">min lenke</a><br>
        <a href="#">min lenke 2</a><br>
    </td>
    <td width="70%">
        <p>tekst</p>
    </td>
    <td bgcolor="green">sidemeny2</td>
</tr>
<tr>
        <td bgcolor="red" color="white" colspan="3">Min footer</td>
</tr>
</table>

Table-taggen - som jo egentlig brukes til å vise data i tabeller som et Excel-regneark - var utrolig nok regnet som det ultimate grid-design-verktøyet i 90-tallets webdesign-belte.

Og tar man en titt på nettsider fra 97 og 98 er så og si alle pakket inn i én gigantisk tabell.

Se hvordan vi designa apper i 2012

fredag 11. januar 2019

En HTML-tabell i sin aller enkleste form består egentlig av tre tagger; <table> som omkranser tabellen, <tr> som definerer en horisontal rad, og <td> som definerer en vertikal kollonne i en rad, ofte kalt celle. En rad kan ha flere <td>-tagger i seg.

For 90-tallets webdesign vil det si at header, footer, sidemenyer og brødtekst bodde inne i samme tabell-tagg. Webutviklere skrev header inn i en fullbredde <td>-celle i øverste rad. Så kom sidemeny, brødtekst og eventuelt en ekstrameny på høyreside fordelt på tre celler i andre rad. På siste rad lå footeren som sin egen celle.

Og trengte man mer avansert grafikk inne i en av cellene, var det ikke unormalt å nøste enda en tabell inne i en celle.

kode24 har sjekka, og både VG, Dagbladet og til og med nettsiden til The Gathering 98 brukte denne teknikken for å lage layout på siden sin.

Men hvordan endte webdesignere på 90-tallet opp med å bruke en så fundamentalt semantisk uegnet tagg som <table> for å lage design?

Nettleserkrigen

Vi har snakket om den store nettleserkrigen på 90-tallet på kode24 før. Kort oppsummert var det to store nettlesere, nemlig Netscape og Microsofts Internet Explorer, som begge kjempet om å kapre markedet.

Og der nettlesere i dag innoverer ved å skape gode verktøy rundt nettleseropplevelsen - slik som Chromes evne til å dele informasjon på tvers av nettleserene på datamaskinen og telefonen din - innoverte nettlesere på 90-tallet ved å tilby de beste nettside-opplevelsene.

Og hva betød det? Jo, eksklusive HTML-egenskaper, selvsagt. Som gjorde det veldig vanskelig å designe en nettside som så lik ut for alle besøkende på tvers av nettlesere.

Netscape introduserte for eksempel egne tags for layout, som <layer> og <multicol> og ikke minst den grusomme <blink>-taggen som gjorde teksten din blinkende. Internet Explorer var på sin side en av de første nettleserne som introduserte støtte for CSS, men dessverre også en haug med ikke-standard CSS-attributter samtidig.

Webdesignere på 90-tallet forstod fort at CSS og semantiske HTML-standarder foreløpig ikke var noe man kunne stole på for layout. Forfatteren bak selve bibelen for 90-tallets webdesignere «Creating killer web sites», David Siegel, håpet selv på en fremtid hvor CSS skulle få en mer fremtredende rolle.

Slik beholder du CSS-endringene i Chrome

Slik bruker du den nye funksjonen i Chrome DevTools 65.

onsdag 13. februar 2019

«When Cascading Style Sheets (CSS) are consistently well implemented in browsers, I hope we can throw these hacks away and begin, finally, to do things right» skrev han på nettsiden sin i 1996.

Mellomroms-GIF

David Siegel regnes faktisk som selve opphavsmannen til trenden med tabellbruk i webdesign.

I «Creating killer web sites» argumenterer han, ironisk nok sett med dagens webdesign-øyne, for at brukervennlighet er viktigere enn god semantikk. Boka fortsetter med å legge ut om ymse hacks for å designe bedre nettsider for lesere, hvorav å bruke tabeller til å lage flerdimensjonale grids ble det mest kjente.

Et annet kjent hack som har opphav i Siegels bok er mellomroms-GIF-en. En transparent GIF på 1x1 piksler som, tro det eller ei, ble brukt flittig til design på 90-tallet.

For eksempel sånn her:

<table width="100%">
  <tr>
    <td bgcolor="red">
      Min meny
    </td>
    <!-- gutter 10px -->
    <td>
      <img
        src="http://www.dagbladet.no/files/2019/02/28/transparent.gif"
        width="10px"
      />
    </td>
    <!-- -->
    <td>
      <p>
        Is this my espresso machine? Wh-what is-h-how did you get my espresso
        machine? Hey, take a look at the earthlings. Goodbye! You're a very
        talented young man, with your own clever thoughts and ideas. Do you need
        a manager? Hey, you know how I'm, like, always trying to save the
        planet? Here's my chance.
      </p>
    </td>
    <!-- gutter 10px -->
    <td>
      <img
        src="http://www.dagbladet.no/files/2019/02/28/transparent.gif"
        width="10px"
      />
    </td>
    <!---->
    <td bgcolor="red">
      Sidemeny
    </td>
  </tr>
</table>

Min meny

Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? Hey, take a look at the earthlings. Goodbye! You're a very talented young man, with your own clever thoughts and ideas. Do you need a manager? Hey, you know how I'm, like, always trying to save the planet? Here's my chance.

Sidemeny

Det var nemlig ikke mulig å sette bredde på individuelle celler i en tabell før, så om du ønsket å sette en pikselbredde på meny-cellen din eller lage luft mellom meny-cellen og brødtekst-cellen, måtte du ty til hacket til Siegel:

Ved å plassere piksel-GIF-en til Siegel i toppen av en celle med <img>-taggen, og sette den til bredden du ønsket, kunne du narre cellen til å ha en gitt bredde.

Et vanvittig hack i dag, helt vanlig frem til 1997, hvor støtten for egen bredde på celler ble mer vanlig.

Fantes egentlig ikke

Hvorfor fulgte ikke bare disse nettleserne standardene fra W3C, i stedet for å finne på egne ting, spør du kanskje?

Vel, på denne tiden var man ikke langt unna skapelsen av HTML-standarden, og den var begrenset, for å si det mildt. Moderne layout-tagger og CSS kunne man se langt etter, ikke engang <table>-taggen var offisielt dokumentert i versjon 1.0 av HTML.

Den ble først definert som et vedlegg til HTML 2.0 i 1995, men ble ikke anerkjent før en uavhengig utvikler ved navn Dave Ragget skapte sin egen avart av HTML, kalt HTML+, som ble tatt opp i HTML-standarden som HTML 3.2 i 1997.

Implementasjonen av tabeller var det Netscape som stod for først, og uheldigvis for webben, kan man kanskje si, ble denne funksjonaliteten kopiert av konkurrentene slik at den ble trygg å bruke på tvers av nettlesere.

CSS-trikset som lar alle containere fylle skjermen

onsdag 27. februar 2019

Tabellens fall

Så hvorfor bruker vi ikke tabeller til design i 2019? Svaret er åpenbart at CSS har tatt over, men hvordan?

Eric Meyer, som vi tidligere har fortalt om i historien om fargen Rebecca Purple, var sentral i standardiseringen av CSS. Han startet arbeidet med å dokumenterte hvilke CSS-egenskaper som fungerte på tvers av nettlesere rundt 1998. Omtrent samtidig kom webstandard-prosjektet WaSP på banen, og begynte å jobbe for standarder på tvers av nettlesere. Det ble også startet en undergruppe av dette prosjektet spesifikt for CSS, kalt CSS Samurai.

En av medlemmene av CSS Samurai, Todd Fahrner, skapte den første ACID-testen, en side som kunne svare på om nettleseren din håndterte CSS riktig. Gruppen la frem rapporter fra bruk av ACID-testen som pressmiddel for nettleserprodusentene, men det var ikke før en nyvinning i 2003 fikk massiv oppmerksomhet at webdesign-bransjen snudde.

Da skapte nemlig webdesigner David Shea nettsiden CSS Zengarden, som umiddelbart ble definert som standarden for godt design på nett. Teknikker og triks fra siden ble kopiert til den store gullmedaljen og sakte, men sikkert, utviklet vi oss vekk fra tabeller.

David Siegel, skaperen av tabell-hacket angret faktisk allerede i 1997. Året etter han publisert boken som introduserte fenomenet, skrev han nemlig blogginnlegget: «Webben er ødelagt, og jeg ødela den».

Slik får du grell ordkunst med CSS

onsdag 6. februar 2019