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.
| 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.
| 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.
| 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.