CSS-leiskan taittotapoja vuonna 2013

Olen pitänyt jonkin tason vapaata HTML:n ja CSS:n maailmasta pari viime vuotta. En ole kauheasti käyttänyt aikaani uusien asioiden opetteluun ja kaiken maailman kokeiluihin. Maailma on kuitenkin edennyt eteenpäin tässä vuosien kuluessa ja tilanne on muuttunut varsin ratkaisevasti kun hyvin vanhat Internet Explorerit ovat päivä päivältä pienempi riesa mielen perukoilla. Tämä on osaltaan saanut innostettua minut päivittämään tietoihini nykyisiä mahdollisuuksia.

CSS-taittotavat

Karkeasti ottaen selaintilanne on tämä:

  • Internet Explorer 6: tukemisen tarve on ratkaisevasti vähentynyt noin vuodesta 2010 lähtien.
  • Internet Explorer 7: poistoleikkurissa tällä hetkellä.
  • Internet Explorer 8: useimmilla harrastesivuilla voi harkita tuen pudottamista 2014 alkaen Windows XP:n tuen päättyessä, yrityspuolella tukemisen tarve alkanee harventua 2015 lähtien. Useimmilla sivuilla IE8:n puutteita voi paikata JavaScriptillä (erityisesti HTML5-elementit).

Tämä tarkoittaa pitkälle sitä, että HTML5 on nykyisin hyvin varteenotettava vaihtoehto. Tämän lisäksi monet aiemmin heikon tuen takia leikkuriin jääneet taittotavat ovat tulleet varteenotettaviksi. Tosin näistä täytyy muistaa se fakta, että nykyiset CSS-taiton ratkaisut ovat edelleen hakkerointia. Tämä tarkoittaa sitä, että CSS:ssä ei ole kunnollista taittoon tarkoitettua keinoa, vaan oikeastaan kaikki elementtien järjestely vaatii aina jossain määrin ylimääräistä säätämistä ja kikkailua. Tilanteeseen on tulossa kaksi ratkaisua: flexbox ja gridbox. Näitä ei kuitenkaan voi vielä nykyisellään käyttää, koska suurin osa selaimista ei vielä hallitse niitä. Kirjoitushetkellä vain Chrome ja Opera tarjoavat täyttä tai lähes täyttä tukea flexboxille, ja näistä Chromessa tarvitsee käyttää -webkit-etuliitettä. Muiden selaimien tuki on vajavainen tai perustuu vanhempaan ehdotukseen standardista. Tilannetta voi tarkastella Can I use… -sivustolla.

Kellutettu taitto: float

Kellutusten käyttö taitossa perustuu siihen, että ne saa rivittymään vierekkäin. Kellutus poistaa elementin sivun normaalista virtauksesta (flow), jolloin seuraavan elementin pystysuuntainen sijoitus ei huomioi kellutettua elementtiä. Kellutettu elementti vaikuttaa kuitenkin rivielementteihin (inline) sillä tavalla, että ne kiertävät kellutetun elementin.

Tärkein kellutukset käyttökelpoiseksi tekevä seikka on kuitenkin se, että kumoamalla (clear) voi siirtää virtauksen kellutettujen elementtien alle. Tällä tavoin seuraavat elementit voi sijoittaa alkamaan vasta kaikkien kellutettujen elementtien jälkeen, tai vastaavasti isäntäelementin saa kasvamaan korkeimman kellutetun elementin mittaiseksi.

Esimerkki

<div class="sisältö">
  <div class="palsta">
    <p>Palsta 1</p>
  </div>
  <div class="palsta">
    <p>Palsta 2</p>
  </div>
</div>
div.sisältö {
  /* clearfix IE7 ja vanhemmat, hasLayout menee päälle kun leveyden määrittää */
  width: 100%;
}
/* clearfix uudemmille selaimille */
div.sisältö:after {
  clear: both;
  content: '';
  display: block;
}
/* kaksi tasalevyistä palstaa */
div.palsta {
  float: left;
  width: 50%;
}

Hyvät puolet

  1. Pitkään käytetty, joten selainten ongelmat tiedetään ja taittamiseen saa helposti apua.
  2. Uusimmissa selainversioissa kellutusten kanssa on enää harvoin ongelmia.

Huonot puolet

  1. Elementtien järjestystä HTML:ssä ei voi valita kovinkaan vapaasti.
  2. Tasakorkuisten palstojen teko on vaikeaa. Korkeutta ei voi määritellä joustavasti (jos isäntäelementillä ei ole erikseen korkeutta asetettu, ei height: 100%; vaikuta).
  3. Keskitetyt ulkoasut ovat haastavia, koska kellutukset saa vain suoraan vasempaan tai oikeaan laitaan.
  4. Erityisesti vanhemmissa Internet Explorer -selaimen versioissa on runsaasti bugeja ja ristiriitoja standardin kanssa (IE7 ja vanhemmat).
  5. Clearfix-riippuvaisuus ja sen ongelmat.
  6. Oikealle tasatut elementit tarvitsee kirjoittaa käänteisessä järjestyksessä HTML:ään (tai sitten tarvitsee käyttää ylimääräistä välielementtiä).

Taulukkotaitto: table

Tässä tarkoitetaan siis display: table; -taittoa, ei HTML:n taulukkoelementin käyttöä, joka tuli CSS-pohjaisen taiton syrjäyttämäksi edellisen vuosikymmenen aikana.

Esimerkki

<div class="sisältö">
  <div class="palsta">
    <p>Vierekkäiset palstat eivät vaadi väliin ylimääräistä tagia.</p>
  </div>
  <div class="palsta">
    <p>Se on jonkunnäköinen helpotus.</p>
  </div>
</div>
div.sisältö {
  display: table;
  /* leveys on lähes pakko määrittää */
  width: 100%;
}
/* huom: näkymätön table-row -elementti luodaan tarvittaessa */
div.palsta {
  display: table-cell;
  vertical-align: top;
  width: 50%;
}

Hyvät puolet

  1. Helppo luoda tasakorkuisia palstoja.
  2. Selaintuki IE8+ eli käytännössä kaikki uudemmat selaimet tukevat.
  3. Elementit voivat tarvittaessa joustaa sisällön koon mukaisesti.
  4. Kikkahakkerointia ei ole, joten siinä mielessä syntaksi on selkeää.

Huonot puolet

  1. Tagisoppa: esimerkkiä monimutkaisemmissa yhdistelmissä ylimääräisiä elementtejä tarvitsee määritellä hyvin paljon ja niille on vaikea antaa semanttista merkitystä.
  2. Todella rajallinen järjestys HTML:n elementeille, niiden täytyy esiintyä taittojärjestyksessä.
  3. Soluille ei voi määrittää position: relative; ja tämän vuoksi tarvitsee taas ylimääräisen elementin, mikäli solun/palstan sisältöä tarvitsee sijoitella esimerkiksi absoluuttisesti suhteessa palstan mittoihin.

Rivitaitto: inline-block

Tämä on uusista mahdollisuuksista veikein tapaus ja tavan käyttö on yleistynyt merkittävästi viime vuosien aikana. Display: inline-block; määrittää elementin toimimaan kuin se olisi yksi sana tai merkki tekstissä, mutta se silti käyttäytyy muutoin kuin olisi lohkoelementti. Rivien hallintaan löytyy paljon erilaisia keinoja, ainakin vertical-align, line-height, text-align, word-spacing ja letter-spacing voivat olla hyödyllisiä.

Esimerkki

<div class="sisältö">
  <div class="palsta">
    <p>Palsta 1</p>
  </div>
  <div class="palsta">
    <p>Palsta 2</p>
  </div>
</div>
/* tämä on täyskattava versio: Suomessa riittää pelkkä font-size -kikka! */
div.sisältö {
  /* hakkerointi: poista välilyönnit */
  font-size: 0;
  /* pakota myös Kauko-Idän Chromet noudattamaan alle 12px fonttikokoa */
  -webkit-font-size-adjust: none;
  /* muille selaimille, joille on asetettu fontin minimikoko: hyvin harvinaista, mutta mahdollista */
  word-spacing: -.25em;
  letter-spacing: -.25em;

  /* tässä esimerkissä tämä ei ole pakollinen */
  width: 100%;
}

div.palsta {
  /* kumotaan hakkeroinnit */
  font-size: medium;
  -webkit-font-size-adjust: auto;
  word-spacing: 0;
  letter-spacing: 0;

  display: inline-block;
  vertical-align: top;
  width: 50%;
}

Hyvät puolet

  • Laajempi valikoima taittovaihtoehtoja kuin kellutusten tai taulukoiden kanssa.
  • Keskittäminen on helppoa, vaikka elementtien leveydet olisivat joustavia.
  • Oikealle tasaaminen ei vaadi elementtien HTML-järjestyksen kääntämistä.
  • Helppo yhdistää harkittuihin kellutuksiin.
  • Selaintuki on laaja, IE8+ ei useinkaan tuota ongelmia. IE7 ja IE6 on mahdollista saada toimimaan.

Huonot puolet

  • Elementit huomioivat välissään olevat rivinvaihdot ja välilyönnit, joten useimmiten elementtien väliin ilmestyy yksi tyhjä välilyönti. Tämän huomiointi vaatii kikkailua, mikäli halutaan erityisen tarkkaa sijoittelua, kuten vaikka elementit nätisti vierivierekkäin ilman välejä.
  • Täyteen korkeuteen venyttäminen ei ole yhtään sen helpompaa kuin kellutusten kohdalla.
  • Elementtien sijoittelu ei ole edelleenkään täysin vapaata.
  • Monimutkaiset yhdistelmät voivat aiheuttaa ongelmia sivun renderöinnissä (= Opera bugittaa).

Esimerkit käytännössä

Vieraile CodePenin esimerkkisivulla.