Ma

27

Kes

2011

20:18

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

Attribuutti	Muutettavissa oleva arvo
background-color	väri
background-image	liukuväri
background-position	prosentti, sijainti
border-bottom-color	väri
border-bottom-width	paksuus
border-color	väri
border-left-color	väri
border-left-width	paksuus
border-right-color	väri
border-right-width	paksuus
border-spacing	koko
border-top-color	väri
border-top-width	paksuus
border-width	paksuus
bottom	prosentti, sijainti
color	väri
crop	suorakulmio
font-size	koko, prosentti
font-weight	numero
grid-*	eri mittoja
height	koko, prosentti
left	prosentti, sijainti
letter-spacing	koko
line-height	numero, korkeus, prosentti
margin-bottom	koko
margin-left	koko
margin-right	koko
margin-top	koko
max-height	koko, prosentti
max-width	koko, prosentti
min-height	koko, prosentti
min-width	koko, prosentti
opacity	numero
outline-color	väri
outline-offset	kokonaisluku
outline-width	paksuus
padding-bottom	koko
padding-left	koko
padding-right	koko
padding-top	koko
right	prosentti, sijainti
text-indent	koko, prosentti
text-shadow	varjo
top	prosentti, sijainti
vertical-align	avainsanat, koko, prosentti
visibility	näkyvyys
width	koko, prosentti
word-spacing	koko, prosentti
z-index	kokonaisluku
zoom	numero

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.

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

Muunnoksen ajoitusfunktiot

Ajoitus	Toiminta
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.
linear	vakionopeus
ease	asteittain hidastuva
ease-in	nopeutuva
ease-out	hidastuva
ease-in-out	nopeutuva 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

Pseudoluokka	Elementti	Kuvaus
:link	vain linkit	vierailemattomat linkit
:visited	vain linkit	vieraillut linkit
:hover	kaikki elementit	hiiri elementin päällä
:active	kaikki elementit	hiiren napsautus elementillä
:focus	kaikki valittavissa olevat elementit	elementti 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

Linkki

CSS transition

Edellinen

Kampuskirjasto

Seuraava

Presidenttiehdokas Sauli Niinistö

Avainsanat

• Internet
• ohjelmointi