CSS3 tulee selaimiin kovalla vauhdilla. Koska vanhemmat selaimet ohittavat CSS:n mitä ne eivät ymmärrä, voidaan nämä uudet tekniikat valjastaa käyttöön jo tänä päivänä.

CSS3:sta puhutaan usein yhtenä standardina. Tämä on muutamallakin tavalla hieman harhaanjohtavaa, sillä W3C ei julkaise standardeja vaan suosituksia ja CSS3 koostuu erillisistä moduuleista, joita kehitetään omaan tahtiinsa ja joita selainvalmistajat voivat lisätä selaimiinsa sitä mukaa miten parhaaksi katsovat.

Selaintuki CSS3:n uusille ominaisuuksille vaihtelee jonkin verran eri selainten välillä, pois lukien Internet Explorer, joka tukee vain web-fontteja. Seuraavaksi esiteltävät ominaisuudet toimivat kaikissa muissa suosituimmissa selaimissa (Firefox, Chrome, Opera, Safari), ellei jutussa erikseen toisin ole mainittu.

Varo teräviä kulmia!

Useimmat meistä ovat varmasti jossain vaiheessa joutuneet kiroilemaan elementtien kulmien pyöristyksen kanssa. Monet ratkaisivat ongelman tekemällä pyöreät kulmat kuvankäsittelyohjelmassa ja lisäämällä ne sivuille käyttäen ylimääräisiä HTML-tageja. Jos pyöristettyjen elementtien täytyi vielä skaalautua sivusuunnassa, tarvittiin hirvittävää CSS-jonglöörausta ja jos sivun väreihin joutui myöhemmin tekemään korjauksia, tarkoitti tämä jälleen kuvankäsittelyohjelman avaamista ja kaikkien kuvien muokkaamista yksi kerrallaan.

CSS3 poistaa nämä ongelmat kertaheitolla. Pyöristetyt kulmat kaikille sivun diveille onnistuu seuraavasti:

  div {
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
  }

Firefox ja Safari/Chrome tarvitsevat pyöristysten kanssa vielä oman etuliitteensä määrityksen eteen. Opera tukee reunojen pyöristystä suoraan ilman etuliitettä versiosta 10.50 eteenpäin. Vanhemmat selaimet ja kaikki IE:t aina versioon 8 asti eivät ymmärrä reunanpyöristyksiä, joten ne näyttävät kulmat normaalisti neliskanttisina.

Microsoft on lupaillut tuoda ainakin reunojen pyöristykset seuraavaan selainversioonsa. Reunojen pyöristyksiin, kuten muihinkin CSS3-ominaisuuksiin voi halutessaan lisätä IE:tä varten määrityksen -ms-etuliitteellä.

Reunoja voidaan pyöristää myös yksi kerrallaan:

  div {
    -moz-border-radius-topleft: 15px;
    -webkit-border-top-left-radius: 15px;
    border-top-left-radius: 15px;
  }

Edellisessä esimerkissä kannattaa huomata Firefoxin hieman eroava syntaksi. CSS3:n Backgrounds and Borders -moduuli on jo Candidate Recommendation tilassa, joten luultavasti myös Firefox ja muut Gecko-moottoria käyttävät selaimet siirtyvät käyttämään samaa syntaksia muiden selainten kanssa.

Teksti- ja laatikkovarjot

Toinen ominaisuus, joka aiemmin on voitu toteuttaa vain kuvien avulla on varjon lisääminen tekstin tai muiden sivuelementtien taakse. Syntaksi on hyvin yksinkertainen:

  p {
    text-shadow: 1px 2px 3px #555;
  }

Edellinen lisää kappaleen taustalle harmaan teksivarjon joka on tekstistä yhden pikselin oikealla, kaksi alaspäin ja hajoaa kolmen pikselin alueelle. Text-shadow on laajasti tuettu ja se ei tarvitse erikseen selainkohtaisia etuliitteitä. Box-shadow toimii samalla periaatteella, mutta Gecko- ja Webkit-selaimet tarvitsevat vielä etuliitteet:

  div {
    -moz-box-shadow: 10px 10px 15px #555;
    -webkit-box-shadow: 10px 10px 15px #555;
    box-shadow: 10px 10px 15px #555;
  }

Läpinäkyvyys RGBA:n avulla

Lähes kaikki selaimet ovat tukeneet CSS:n osittaista läpinäkyvyyttä opacity-ominaisuuden kautta jo pitkään, mutta opacityn käytössä on yksi suuri ongelma: Läpinäkyvyys periytyy aina myös lapsielementeille.

RGBA-värit ratkaisevat tämän ongelman tuomalla väreihin mukaan alpha-kanavan. Alpha-kanavan avulla voidaan säätää elementtien läpinäkyvyyttä vaikuttamatta lapsielementtien näkyvyyteen:

  div {
    background: rgb( 0, 255, 0 );
    background: rgba( 0, 255, 0, .5 );
  }

Elementille voidaan määrittää läpinäkyvyys välillä 1-0, jolloin 1 tarkoitaa 100% väritäyttöä ja 0 Täydellistä läpinäkyvyyttä. RGBA:ta käyttäessä on aina muistettava määrittää perinteiset värit vanhemille selaimille niiden ymmärtämässä muodossa tai muuten elementit perivät värinsä isäntäelementiltänsä. Edellisen esimerkin ensimmäinen rivi voidaan korvata myös perinteisemmillä heksa-arvoilla: #0f0.

Gradientit ilman kuvia

Liukuvärit eli gradientit on suosittu ja nopea tapa kohentaa sivujen ulkoasua. Aiemmin ainoa vaihtoehto on ollut lisätä gradientit sivuille jpg:nä tai läpinäkyvällä png-kuvana. CSS3:lla on mahdollista nopeuttaa sivujen latautumista joskus jopa huomattavasti siirtämällä gradientit selaimen laskettavaksi.

Annetaan diveille pohjalta alkava musta gradientti, joka päättyy divin yläreunaan:

  div {
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
    background: -moz-linear-gradient(100% 100% 90deg, #000, transparent);
    background: -o-linear-gradient(100% 100% 90deg, #000, transparent);
    background: linear-gradient(100% 100% 90deg, #000, transparent);
  }

Gradientit toimivat tällä hetkellä vasta Webkit- ja Gecko-pohjaisissa selaimissa, mutta tuki on todennäköisesti tulossa pian myös Operaan, jota varten edelliseen on lisätty varmuuden vuoksi määritys -o-etuliitteellä. CSS-gradientit ovat osa Image Values -moduulia, joka on vasta Editor’s Draft -vaiheessa, joten muutokset lopulliseen syntaksiin ovat vielä erittäin mahdollisia.

CSS-gradientit taipuvat monenlaisiin hienouksiin perus väriliukujen lisäksi. Kannattaa katsastaa vaikka Chris Coyierin opas aiheesta CSS-tricksistä.

Animaatiota CSS:n avulla

Animaatio netissä on pitkään ollut pääosin vain Flashin ja JavaScriptin heiniä. Nyt pientä interaktiivisuutta on helppo lisätä sivuille myös ilman ohjelmointitaitoja. Lisätään kaikkiin sivun linkkeihin pieni animoitu siirtymä eri tilojen välille:

  *:link,
  *:visited,
  *:hover,
  *:active,
  *:focus {
    -webkit-transition:
      color .25s linear,
      background-color .25s linear,
      border-color .25s linear;
    -moz-transition:
      color .25s linear,
      background-color .25s linear,
      border-color .25s linear;
    transition:
      color .25s linear,
      background-color .25s linear,
      border-color .25s linear;
  }

CSS-animatioita tukee tällä hetkellä vain Opera ja Safari/Chrome. Myöskin tuleva Firefox 3.7 -versio mitä todennäköisimmin tukee tätä ominaisuutta.

Fontit

CSS3:n avulla on mahdollista ladata käyttäjän koneelle fontteja suoraan sivuilta. Enää siis sivujen typografian ei tarvitse rajoittua muutamaan web-turvalliseen fonttiin.

Ladattavan fontit eivät ole oikeastaan uusi juttu. Ne olivat osa jo vanhaa CSS 2 -suositusta, mutta ne pudotettiin pois versiosta 2.1. Erikoisesti tässä asiassa IE on ollut edelläkävijä, sillä se on tukenut @font-face -ominaisuutta jo 4.0-versiostaan asti. Tosin ainoastaan omassa eot-formaatissaan, valitettavasti.

Fontteja sivuille lisätessä kannattaa olla tarkkana, sillä usein jopa ostettujen fonttien käyttöä saatetaan rajoittaa webissä. Lisenssiehdot kannattaa aina lukea huolella. Ilmaisia fontteja voi metsästää vaikka Webfonts.info:sta.

Ladattavien fonttien lisääminen on helppoa. Halutut fontit ladataan CSS:n alussa:

    /* Fonts by Jos Buivenga (exljbris) -> www.exljbris.com */
    @font-face {
      font-family: CallunaRegular;
      src: url("Calluna-Regular.otf") format("opentype");
    }

Hra. Buivenga antaa ilmaiset fonttinsa muuten vapaaseen käyttöön, mutta pyytää, että vähintään CSS-tiedostossa mainitaan yhteystiedot hänen sivuilleen.

Kun fontti on ladattu, voidaan sitä kutsua myöhemmin CSS:ssä kuten tavallisiakin fontteja:

  body {
    font-family: CallunaRegular, 'Palatino Linotype', Palatino, serif;
  }

Jos käyttäjän selain ei tue @font-face -määritystä, käytetään sen sijasta seuraavaksi listassa tulevaa tuettua fonttia.

Tulevaisuus

Tällä hetkellä CSS3:n käyttö on vielä hiukan työlästä monien selainkohtaisten etuliitteiden johdosta, mutta tilanne tulee vielä helpottumaan, kunhan moduulit kehittyvät ja W3C niitä yksi kerrallaan nostaa suosituksen asemaan.

Tässäkin muodossa CSS3 nopeuttaa sivujen kehitystä huomattavasti, sillä vaikka lopullisilla sivuilla ei käyttäisikään CSS:ää esimerkiksi reunojen pyöristyksessä, on niillä erilaisten ulkoasuvaihtoehtojen prototyyppaaminen huomattavasti nopeampaa suoraan selaimessa ilman tarvetta avata kuvankäsittelyohjelmaa ennen kuin miellyttävä lopputulos on löytynyt.