CSS transition

Tyylisivujen ominaisuudet kehittyvät vauhdilla. Tuleva CSS3 tuo nettikehittäjille tukun pitkään kaivattuja ominaisuuksia, joita on tähän asti toteutettu monilla eri kikoilla ja tavoilla. Kikkailut eivät tietenkään kelpaa puristeille, jotka haluavat noudattaa sovittuja sääntöjä suurin piirtein pilkulleen. Yhteiset säännöt ovatkin hyvästä, sillä näin suunnitellut verkkosivut saadaan näyttämään jotakuinkin samanlaisilta selaimessa kuin selaimessa. Tyylisivumäärittelyjen kolmannessa tasossa tyyliattribuutit on jaettu moduuleihin. Määrittelyä on hiottu jo vuosia eivätkä ne vieläkään ole täysin valmiit. Selainvalmistajat sen sijaan ovat jo alkaneet tukea ehdotettuja ominaisuuksia, mikä lienee saanut määrittelytyötä tekevät tahot kiirehtimään julkaisujaan. Muutama viikko sitten maailmanlaajuinen nettiohjelmointia koordinoiva W3-konsortio vihdoin julkaisikin värimoduulia koskevan suosituksensa. Työ jatkuu, mutta jo nyt monia ehdotettuja ominaisuuksia voi kokeilla tuotoksissaan tietyin varauksin.

Transitiot eli muunnokset ovat eräs tyylisivujen mielenkiintoisimmista uusista ominaisuuksista. Muunnosmoduulin suositus on tosin vielä keskeneräinen, mutta se antaa jo viitteitä tulevista herkuista. Transitioilla voi terminsä mukaisesti tehdä erilaisia muunnoksia HTML-elementeille ja niiden attribuuteille. Aiemmin tällaiset temput on toteutettu tyypillisesti JavaScript-ohjelmointikielellä tai muilla tempuilla, kuten animoivilla kuvilla. Muunnokset ovat rajallisia, ja ne toimivat vain osaan tyyliattribuuteista. Olen luetellut alla olevassa listassa tyypillisimmät tyyliattribuutit, joita voi muunnella uudella transition-attribuutilla.

Muunettavissa olevat attribuutit
AttribuuttiMuutettavissa oleva arvo
background-colorväri
background-imageliukuväri
background-positionprosentti, sijainti
border-bottom-colorväri
border-bottom-widthpaksuus
border-colorväri
border-left-colorväri
border-left-widthpaksuus
border-right-colorväri
border-right-widthpaksuus
border-spacingkoko
border-top-colorväri
border-top-widthpaksuus
border-widthpaksuus
bottomprosentti, sijainti
colorväri
cropsuorakulmio
font-sizekoko, prosentti
font-weightnumero
grid-*eri mittoja
heightkoko, prosentti
leftprosentti, sijainti
letter-spacingkoko
line-heightnumero, korkeus, prosentti
margin-bottomkoko
margin-leftkoko
margin-rightkoko
margin-topkoko
max-heightkoko, prosentti
max-widthkoko, prosentti
min-heightkoko, prosentti
min-widthkoko, prosentti
opacitynumero
outline-colorväri
outline-offsetkokonaisluku
outline-widthpaksuus
padding-bottomkoko
padding-leftkoko
padding-rightkoko
padding-topkoko
rightprosentti, sijainti
text-indentkoko, prosentti
text-shadowvarjo
topprosentti, sijainti
vertical-alignavainsanat, koko, prosentti
visibilitynäkyvyys
widthkoko, prosentti
word-spacingkoko, prosentti
z-indexkokonaisluku
zoomnumero

Transitio tarvitsee toimiakseen kaksi arvoa. Ensimmäinen arvo kertoo, mistä tilanteesta muunnos alkaa ja toinen arvo ilmaisee, mihin tilanteeseen muunnos päättyy. Alla olevassa esimerkissä on kaksi valokuvaa, jotka olen sijoittanut päällekkäin. Päällimmäisenä on auringonlasku Mauritiuksella hetkeä ennen kuin aurinko katoaa horisontin alle. Kuvan alla on hieman myöhemmin otettu valokuva, jossa aurinko on jo kadonnut taivaalta ja pilvet ovat kerääntyneet horisonttiin. Liikuttamalla hiirtä kuvan päällä käynnistyy CSS-transitio, joka muuntaa ylinnä olevan kuvan läpinäkyvyyden sadasta prosentista nollaan eli täysin läpinäkyväksi paljastaen samalla alla olevan valokuvan.

auringonlasku Mauritiuksellaauringonlasku Mauritiuksella

Muunnoksen kesto määritellään joko sekunteina tai millisekunteina. Ajoituksenkin voi määritellä valmiilla avainsanalla eli funktiolla, jotka olen luetellut oheisessa taulukossa.

Muunnoksen ajoitusfunktiot
AjoitusToiminta
cubic-bezier(x1, y1, x2, y2)X- ja Y-arvot ovat väliltä 0 ja 1, ja ne määrittelevät bezier-käyrän muodon, jota käytetään ajoitusfunktiossa.
linearvakionopeus
easeasteittain hidastuva
ease-innopeutuva
ease-outhidastuva
ease-in-outnopeutuva ja sitten hidastuva

Transitio käynnistyy ennalta määrätyllä CSS-pseudoluokalla. Pseudoluokka on tuttu aiemmista CSS-määrittelyistä ja niitä voi käyttää monien HTML-elementtien yhteydessä. Oheisessa listassa on lueteltu käytettävissä olevat pseudoluokat ja niiden vaikutuspiiri.

Pseudoluokat
PseudoluokkaElementtiKuvaus
:linkvain linkitvierailemattomat linkit
:visitedvain linkitvieraillut linkit
:hoverkaikki elementithiiri elementin päällä
:activekaikki elementithiiren napsautus elementillä
:focuskaikki valittavissa olevat elementitelementti on valittuna

Esimerkiksi elementin taustaväri saadaan muuntumaan alkutilanteesta toiseen hiiren liikkuessa sen yli käyttämällä :hover-pseudoluokkaa ja määrittelemällä taustaväriin vaikuttava CSS-transitio. Oheinen esimerkki valaisee asiaa. Esimerkissä kappale-elementin p taustaväri vaihtuu valkoisesta keltaiseksi sekunnin kuluessa, kun hiiri kulkee kappaleen yli.

<p>Taustavärin vaihto</p>

Kaikki selaimet eivät tue tyylimäärittelyjä vielä sellaisinaan. Tämän vuoksi eri selainvalmistajien tuotteita varten pitää esitellä selainkohtaiset määrittelyt ainakin siirtymäajan. Alla olevassa esimerkissä on tulevan suosituksen mukainen transitio-määrittely sekä arvot yleisimpiä selaimia varten.

<style type="text/css"> p { background-color: #FFF; color: #000; /* Firefox */ -moz-transition: background-color 1s linear; /* Opera */ -o-transition: background-color 1s linear; /* WebKit */ -webkit-transition: background-color 1s linear; /* standardi */ transition: background-color 1s linear; } p:hover { background-color: #FF0; color: inherit; } </style>

CSS-transition syntaksi on yksinkertainen.

transition: attribuutti kesto ajoitusfunktio viive;

Muunnettavan attribuutin lisäksi voidaan siis määritellä muunnoksen kesto sekä valita ajoitusfunktio. Näiden lisäksi neljäntenä parametrina voidaan määritellä, milloin muunnosefekti käynnistyy. Sekä kesto että viive annetaan joko sekunteina tai millisekunteina, ja numeerisen arvon perään liitetään joko s- tai ms-lyhenne valitusta laadusta riippuen. Pilkulla voidaan erottaa useita eri muunnoksia, jotka halutaan suorittaa yhdellä kertaa. Samanaikaisesti voidaan muuntaa esimerkiksi sekä tekstin väri että kappaleen taustaväri. Oheinen esimerkkityyli vaihtaa mustan, valkotaustaisen tekstin mustaksi valkoisella taustalla.

<style type="text/css"> p { background-color: #FFF; color: #000; transition: color 1s linear, background-color 1s linear; } p:hover { background-color: #000; color: #FFF; } </style>

Verkkosivujen toteuttamisessa tärkeintä on pitää sisältö ja ulkoasuun vaikuttavat tekijät erossa toisistaan. Sisällössä ei saisi siis olla mitään ylimääräisiä, ulkoasua ohjaavia elementtejä ja kaikki esitystekniset määritteet tulisi esitellä tyylisivuilla. Nykyiset tyylisivumäärittelyjen voimassaolevat suositukset ovat toisaalta melko rajalliset eikä niillä kyetä näyttäviin uudenaikaisiin efekteihin, joilla moni sivusto pyrkii erottumaan edukseen netissä. CSS-transitiot ovat vain yksi esimerkki tulevista uusista tuulista. Netissä on puolestaan iso joukko testausvälineitä ja yhteensopivuuskarttoja, joilla voi selvittää selainten valmiudet uusille tyyliominaisuuksille.

Julkaistu maanantaina 27.6.2011 klo 20:18 avainsanoilla Internet ja ohjelmointi.

Edellinen
Kampuskirjasto
Seuraava
Presidenttiehdokas Sauli Niinistö
Evästeiden käyttö

Käytän sivustollani evästeitä tarjotakseni parhaimman mahdollisen lukukokemuksen blogini lukijoille. Jos jatkat sivustoni käyttöä, oletan, että hyväksyt evästeiden käytön sivustollani.

Lisätietoja evästeiden käytöstä