CSS-opas

Kuinka paljon olet kiinnittänyt huomiota siihen, miten teksti soljuu sivulla riviltä toiselle?

Tämä sivu on lähtölaukaus omalle syväluotaukselleni CSS:ään.

CSS-taiton historian pikakelaus

Aloittaessani ensimmäisten HTML-sivujen tekoa vuonna 1998 taulukot olivat ainoa tapa taittaa sivujen leiskaa. CSS oli tuolloin uusinta uutta. Vuoden 2000 lopussa aloin tehdä pitkäaikaista ja edelleen virkeää sivustoani Kontua, ja sen mukana olen pitänyt yllä taitojani. Tuon vuosituhannen vaihteen ajan mukaisesti tein sivut HTML-taulukkojen avulla ja CSS:n määrä oli varsin vähäistä, eikä sillä toisaalta vielä tuolloin olisi voinut tehdä paljoakaan taittoa heikon selaintuen vuoksi. Taulukoiden kanssa pystyi elämään, mutta kävin lävitse todella monta täyttä ulkoasun muutosta… ja joka kerta HTML piti järjestellä uusiksi, käydä kaikki sivut lävitse ja tehdä niille samat muutokset. Tuolloin useimpiin kotisivutiloihin sai lähinnä SHTML:n avuksi, joka vähensi edes hieman toiston tarvetta.

HTML-taulukkotaittoon ei ole paluuta. Siitä huolimatta niiden toiminnassa oli hyviä puolia. Merkittävin näistä on seikka, joka on uupunut kaikista muista tavoista tehdä leiskaa: vierekkäiset elementit ovat automaattisesti samankorkuisia. Vasta flexbox on korjannut tämän puutteen, muutoin on tarvinnut turvautua erinäisiin kikkoihin saman efektin toteuttamiseksi.

Vuoden 2004 paikkeilla aloin vihdoin opetella kellutusta (float). IE6 oli tuolloin selkeä ykkösselain, mutta tuolloin uusi tulokas Firefox mahdollisti CSS:n opiskelun käytännön tasolla aivan eri tavalla. Kelluttaminen on tekniikkana tarkoitettu kuvien tasaamiseen vasemmalle tai oikealle ja se saa tekstin väistämään kellutetun alueen. Kellutetun elementin isäntäelementti ei normaalisti huomioi kellutusta omassa korkeudessaan. Toisin sanoen kelluttamisen käyttö taittoon on aikamoista nysväämistä ja vaatii kikkailua. Sen kanssa on opittu elämään ja se on ollut suosituin tapa tehdä taittoa vajaan kymmenen vuoden ajan. Sille on kuitenkin tullut haastaja!

Inline-block (merkkilohko?) on tämä uusi tulokas, joka on tullut kuvioihin nyt kun Internet Explorer 6 ja 7 ovat vihdoin pudonneet kelkasta. Erityisen houkuttelevan inline-blockista on myös tehnyt Operan siirtyminen omasta Prestosta Chromen ja Safarin käyttämään WebKitiin. Prestolla kun on ilkeä tapa toimia väärin rivityksen laskennan kanssa silloin kun fontin koko on määritelty nollaksi ja se piti huomioida erikseen. Tämän ongelman voi nykyään sivuuttaa.

Inline-blockilla on paljon erilaisia taittomahdollisuuksia, mutta en käy niitä vielä tässä lävitse. Sen sijaan alla on kooste eri taittotavoista ja niiden yleistymisestä.

Taittotapa Vuosi Miksi käyttöön? Huonot puolet
HTML-taulukko ~1996 Ainut toimiva tapa monimutkaiseen taittoon.
  • Hankala ylläpidettävyys.
  • Runsas syntaksi, mm. sisäkkäiset taulukot.
  • Merkityksetön rakenne.
Kellutus
float: left|right;
~2002 Ainut toimiva tapa monimutkaiseen taittoon CSS:llä.
Firefoxin myötä ”hyvien tapojen” noudattaminen yleistyi 2004 alkaen.
  • Isäntäelementti ei huomioi kellutetun elementin olemassaoloa ilman kikkailua.
  • Elementtejä ei saa helposti samankorkuisiksi.
  • Keskittäminen vaaka- tai pystysuuntaan ei onnistu.
  • Elementtien uudelleenjärjestely rajallista.
CSS-taulukko
display: table|table-row|table-cell;
~2012 Internet Explorer 6 ja 7 käyttäjämäärät putosivat riittävän pieniksi.
  • Elementtien uudelleenjärjestely hyvin rajallista.
  • Ei tukea kaikille HTML-taulukoiden ominaisuuksille.
  • Monimutkaisemmat asettelut vaativat paljon syntaksia.
Inline-block (merkkilohko?)
display: inline-block;
sekä
font-size: 0;
~2013 IE6 ja 7 kuten yllä, Opera vaihtoi WebKitiin, sekä CSS:n esiprosessoinnin yleistyminen.
  • Elementtien välissä oleva tyhjä tila (white space) huomioidaan.
  • Elementtien uudelleenjärjestely rajallista.
  • Elementtejä ei saa helposti samankorkuisiksi.
  • Android-selaimet vaativat vielä erityishuomiota.
Flexible Box Layout
display: flex;
~2015? Kun IE8:n ja IE9:n käyttö putoaa riittävän alas.
  • Hyvin monimutkainen kehitysprosessi, monta poikkeavaa toteutusta standardista sen eri vaiheista.
  • Internet Explorer 10:ssä on omanlaisensa sekasyntaksi, jossa on sekä uutta että vanhaa standardia.
  • Firefox laahaa perässä ominaisuuksissa.
Grid Layout
display: grid;
Ehkä joskus Kun muutkin kuin Microsoft toteuttavat standardin.
  • Ainoastaan IE tukee. Hyvässä lykyssä täydellisesti standardin mukaan.
  • Ei vielä näköpiirissä muiden selainten toimesta.

Taittamisen tätä päivää

Laajamittaisesta käytöstä puhuttaessa täytyy huomioida suurien sivustojen kävijämäärät: ne joutuvat usein tukemaan — kaupallisista syistä johtuen — hyvinkin vanhoja selaimia. Tulevaisuus näyttää tältä osin paremmalta selainten päivitystahdin kiihdyttyä, mutta tätä kirjoittaessa vuosi 2014 on tuloillaan ja esimerkiksi Internet Explorer 8 on edelleen sen verran käytetty, ettei sitä voi täysin ohittaa ainakaan kaupallisia sivuja tehtäessä. Tämä on ensisijainen syy siihen, mikseivät display: table; ja display: inline-block; ole aiemmin olleet kovinkaan laajamittaisessa käytössä CSS-taitossa. Niitä ei ole voinut varauksetta suositella kaikille. Nyt voi.

Yksi merkittävä muutos on tapahtunut CSS:n käsittelyssä: nykyään on enenevissä määrin suosittua tehdä esiprosessoitua CSS:ää. Työkalut kuten Sass (SCSS), Less ja Stylus ovat tehneet mahdolliseksi kirjoittaa aiempaa rikkaampaa ja ylläpidettävämpää CSS:ää. Esimerkiksi muuttujien avulla on mahdollista määrittää yhteen paikkaan kaikkialla käytettävät värit, funktioiden avulla on mahdollista tuottaa visuaalisesti yhteneväistä pystysuuntaista rytmitystä ja silmukoilla saa poistettua tympeimmät määrät turhanpäiväistä toistoa. Näistä esiprosessoijista SCSS vaikuttaa olevan voittamassa suosiokilpailun, vaikka muillakin on meriittinsä.

HTML5:n myötä on mahdollista kirjoittaa semanttisesti rikasta HTML:ää. Uudet taittotavat ovat myös tehneet aiempaa helpommaksi järjestellä elementtejä uudelleen, jolloin rakenteeseen saa tolkkua, joskin ennen flexboxin läpilyöntiä pystysuuntainen uudelleenjärjestely on yhä hankalaa. Tärkeimpiä seikkoja HTML:n rakentamisessa on pyrkiä sijoittamaan sisältö mahdollisimman lähelle sivun alkua ja pyrkiä kaikin tavoin välttämään leiskan toimivuuden riippumista HTML:stä. Ihanteena kun on, että CSS hallitsee kaikkea ulkoasuun liittyvää. Ylläpidettävyys on helpompaa asioiden ollessa selkeästi erotettuja toisistaan.

Mukautuvan ulkoasun (responsive design) yleistyminen on myös tehnyt grid-järjestelmästä suosittua. Tämä ei ole sama asia kuin display: grid; vaan kyseessä on säännöllisiin pystyriveihin perustuva tapa jaotella käytettävissä oleva vaakasuuntainen tila. Jokainen pystyrivi on erotettu tasaisen leveällä tyhjällä tilalla (gutter) ja kaikki pystyrivit ovat nekin yhtä leveitä keskenään. Suosituinta on jakaa sivu 12 pystyriviin.

Mitä kannattaa osata tulevaisuudessa?

Kaikkiin CSS-pohjaisiin taittotapoihin kannattaa tutustua: float, table ja inline-block ovat nykyisellään tuotantokelpoista kamaa. Lisäksi flexbox on ihan kulman takana ja yritysmaailman ulkopuolella sitä voi käyttää lähes varauksetta. Aiemmin mainittu grid on myös hyvä tehdä itselle tutuksi: ja sen voi toteuttaa kaikilla mainituilla taittotavoilla.

Lisätietoa englanniksi

Näiden linkkien takana on asiaa liittyen joihinkin tekstissä esille nousseisiin asioihin.