Koodit: CSS, HTML: Kaksi vierekkäistä palstaa

Yllättävän moni kokee vielä taulukkoelementeillä taittamisen helpommaksi kuin CSS-taiton. Toisaalta usein käytetään myös termiä DIV-taitto, mikä sekään ei välttämättä ole paras mahdollinen ratkaisu. DIV-elementtien ylikäyttö tai jopa yksinomainen käyttö taas luo semanttisesti tyhjää rakennetta ja johtaa uudelleen samaan ongelmaan, joka on HTML-taulukoiden kanssa: sisällölle ei ole määritelty merkitystä.

Tämän koodivinkin tarkoituksena on valaista ajatusmaailman eroja, tuoda näkökulmaa CSS:n kautta toimimiseen sekä antaa yksinkertaistettuja peruslähtökohtia, joista on helppo lähteä suunnittelemaan ulkoasua.

CSS syntyi siitä ajatuksesta, että HTML olisi "puhdasta", vapaa ulkoasun kuormasta, keskittyen kuvaamaan sivun sisältöä ja sen rakennetta. Vuosien varrella CSS-tuki on kehittynyt merkittävästi, siinä määrin että eri selaimilla on tarjolla ominaisuuksia, joita toisista ei löydy. Tällaisia ominaisuuksia ovat mm. tekstin ja elementtien varjostukset sekä reunanpyöristys. Tämä ei kuitenkaan haittaa CSS-taitossa: tarkoitus ei olekaan saada täsmälleen samanlainen lopputulos eri selaimilla ja eri laitteiden välillä, vaan paras mahdollinen lopputulos. Lisäksi kova totuus on myös, että jos sivu ei näytä selvästi rikkonaiselta, ei käyttäjä usein huomaa mitään vikaa ulkoasussa, vaikka sinä huomaisitkin. Tärkeintä on että sivua voi lukea ja että sitä voi käyttää.

Taulukoista CSS-ajatteluun

Taulukkoajattelu perustuu pitkälle siihen, että vierekkäiset solut ovat aina samankorkuisia, ja että kukin solu itsessään sisältää siihen tarkoitetun tyylin ja taustakuvan. Solut vaikuttavat suoraan toisiinsa, joten yksinkertaisten ulkoasujen luominen niitä käyttäen on nopeaa.

CSS-ajattelu perustuu siihen, että HTML:lle on vain määritelty sisältöä kuvaava rakenne. Kaikki ulkoasuun vaikuttavat tekijät ovat CSS:n harteilla, joten teoriassa minkä tahansa HTML-elementin saa määriteltyä millaiseksi tahansa. Jotkin temput vaativat edelleen ylimääräisien elementtien lisäämistä HTML:ään, kaikelle CSS:lle ei ole tukea kaikilla selaimilla tai selaimessa voi olla bugista käyttäytymistä, eikä aivan kaikkia elementtejä pysty tyylittelemään miten lystää (tästä esimerkkinä erityisesti lomake-elementit). Näistä ongelmista huolimatta CSS:n pääviesti on selvä: teoriassa se tarjoaa mahdollisuuden muokata sivusta aivan millaisen haluaa, riippumatta siitä millainen HTML sille on määritelty, ja siten on mahdollista myös toteuttaa taulukkotaittoa CSS-taitolla!

Rajojen vastaantulo

Tällä hetkellä netin uudistumisen suurin ongelma on, että esimerkiksi monet yritykset edelleen pakottavat työntekijänsä käyttämään vuosituhannen alkupuolella julkaistua Internet Explorerin versiota 6. Vuoden 2010 tullessa IE6:n osuus on globaalisti edelleen varsin hulppea 20%, mikä on järkyttävän paljon selaimelle, joka on pian kymmenen vuotta vanha. IE6:n suosio on kuitenkin vihdoin taittumassa ja alkavan vuosikymmenen alussa siihen ei tarvitse kiinnittää niinkään paljoa huomiota, varsinkin jos on vasta aloittelemassa tutustumista sivuntekoon.

Isoin ongelma on kuitenkin suositut vanhat selaimet: nämä pakottavat edelleenkin käyttämään ratkaisuja, jotka on kehitetty kiertämään CSS-taiton ongelmia näissä vanhoissa selaimissa. Listauksessa 1 on malli-HTML ja listauksessa 2 on kolme erilaista CSS:ää, jotka tarjoavat kaksi perinteistä vanhat selaimet huomioivaa ratkaisua, ja yksi suorimman mahdollisen siirtymisen taulukkotaitosta. Näiden listausten tarjoamien vaihtoehtojen avulla on sekä helppo lähteä toteuttamaan omaa kaksipalstaista ulkosua kuin myös huomata, miten paljon enemmän vaihtoehtoja CSS tarjoaa yhden ja saman asian toteuttamiseen kuin perinteinen taulukkotaitto!

Kaksipalstaiset esimerkit

Ensimmäinen esimerkki näyttää suorimman siirtymän taulukkotaitosta. Sen ainut ongelma on selaintuki: merkittävässä asemassa olevat vanhat selaimet IE7 ja IE6 eivät tue display: table; -määrittelyä. Alkavalla vuosikymmenellä tämä kuitenkin noussee varsin suosituksi tavaksi toteuttaa palstoitettuja ulkoasuja sen tietynasteisen helppouden tähden.

Toinen esimerkki on yksi suosituimpia ja yhteensopivimpia tapoja toteuttaa kaksipalstaisuus CSS:n voimin: kellutus. Toinen elementeistä kellutetaan ja toista ei. Sen jälkeen käytetään :after-pseudoelementtiä ja luodaan lohkotason elementti #sivu-elementin loppuun, joka clear:n voimin kasvattaa #sivu-elementin vähintään sen sisään kellutetun elementin mittaiseksi. Internet Explorer 7 ja 6 eivät kuitenkaan tue :afteria, joten niiden osalta käytetään hyväksi selainbugia: kun leveys on määritelty elementtiin, se kytkee IE:n sisäisen hasLayout:n käyttöön kyseiseen elementtiin. Tämä saa virheellisesti #sivun venymään vähintään kellutetun elementin mittaiseksi.

Tässä toisessa esimerkissä #valikko ja #sisalto eivät ole samanmittaisia, vaan taitto perustuu taustakuvan varaan: määrittelemällä #sivulle taustakuvan se venyy koko alan mittaiseksi. Lopputulos on kuitenkin haluttu.

Kolmas esimerkki esittelee tavan, jossa luodaan #valikosta absoluuttinen elementti. #sivu on määritelty suhteelliseksi (relative), mikä saa #valikon venymään aina vähintään #sivun mittaiseksi. #sivun korkeus taas määräytyy #sisallon korkeuden mukaisesti. Tästä johtuen #valikon sisällön korkeus ei vaikuta millään tapaa #sivun korkeuteen, joten #sisallolle on määriteltävä minimikorkeus siltä varalta, ettei siinä ole tarpeeksi sisältöä kasvamaan #valikossa olevan sisällön mittaiseksi. #sisalto ja #valikko ovat kuitenkin aina saman mittaisia (olettaen, ettei #sisallolle itselleen määritellä pystysuuntaista sisennystä, jolloin se venyisi ylitse asetetun 100% raamin).

<div id="sivu">
    <ul id="valikko">
        <li><a href="">Etusivu</a></li>
        <li><a href="">Töitäni</a></li>
        <li><a href="">Minä muualla</a></li>
        <li><a href="">Kiinnostaa</a></li>
    </ul>
    <div id="sisalto">
        <h1>Tervetuloa!</h1>
        <p>Tämä on esimerkkisivu. Kokeile pidentää sisältöä.</p>
    </div>
</div>

/* Yhteiset tyylit: nämä pysyvät samoina esimerkistä toiseen
   ja ovat eriteltynä tässä, jotta erot esimerkkien välillä
   korostuvat paremmin. Olennaiset runkotyylit on kuitenkin
   jätetty esimerkkeihin niiden antaman vaikutuksen takia. */
#sivu {
    background: red;
}

#valikko {
    background: #DDD;
    list-style: none;
    margin: 0;
    padding: 0;
}

#valikko li {
    display: inline;
    margin: 0;
    padding: 0;
}

#valikko a {
    display: block;
    padding: 10px;
}

#sisalto {
    background: #EEE;
}

/* Esimerkki 1: suorin siirtymä taulukkotaitosta */
#sivu {
    display: table;
    width: 100%;
}

#valikko {
    display: table-cell;
    vertical-align: top;
    width: 250px;
}

#sisalto {
    display: table-cell;
    padding: 10px;
    vertical-align: top;
    width: 100%;
}

/* Esimerkki 2: kelluttaminen ja isäntäelementin
   venyttäminen pisimmän mukaan */
#sivu {
    width: 100%;
}

#sivu:after {
    clear: both;
    content: '';
    display: block;
}

#valikko {
    float: left;
    width: 250px;
}

#sisalto {
    margin: 0 0 0 250px;
    padding: 10px;
}

/* Esimerkki 3: täysvenytys absoluuttisella sijoittamisella,
   korkeus määräytyy sisällön mukaan. */
#sivu {
    position: relative;
    width: 100%;
}

#valikko {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 250px;
}

#sisalto {
    margin: 0 0 0 250px;
    min-height: 300px;
    padding: 10px;
}

Lopuksi

Tämä koodivinkki olettaa, että käytössä oleva DOCTYPE on joko HTML 4.01 Strict tai XHTML 1.0 Strict, ja että ne on määritelty (Internet Explorerin takia) tiedoston ensimmäiselle riville. Listaukset 3 ja 4 sisältävät pohjasivut, joiden avulla voi lähteä kokeilemaan.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fi">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>Pohjasivu HTML 4.01</title>
		<style type="text/css">

...

		</style>
	</head>
	<body>
		...
	</body>
</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" xml:lang="fi">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Pohjasivu XHTML 1.0</title>
		<style type="text/css">/*<[CDATA[*/

...

		/*]]>*/</style>
	</head>
	<body>
		...
	</body>
</html>