CSS

Cascading Style Sheets
Tiedostopääte	.css
Mediatyyppi	text/css
Kehittäjä	World Wide Web Consortium (W3C)
Lyhenne	CSS
Avoimuus	Kyllä
Verkkosivusto	www.w3.org/TR/CSS/#css
Infobox OK

Cascading Style Sheets (lyh. CSS, kirjaimellisesti ”porrastetut tyyliarkit”) on erityisesti verkkosivuille kehitetty tyylisivu. CSS:ssä dokumentille voi määritellä useita tyyliohjeita, jotka yhdistetään tietyllä tavalla yhdeksi säännöstöksi. CSS-tiedostojen pääte on yleensä .css

Perustiedot

CSS:llä annetut säännöt ehdottavat, kuinka dokumentti voidaan esittää. Säännöt eivät siis ole ehdottomia, vaan ne voi halutessaan kiertää. Jotkin säännöt saattavat korvautua toisten tyyliohjeiden vastaavilla säännöillä. Esimerkiksi dokumentissa annetut ohjeet ovat yleensä toissijaisia dokumentin vastaanottajan ohjeisiin verrattuna.

CSS:llä voidaan kuvata monipuolisesti näkyvää esitysmuotoa, ja periaatteessa myös äänen esitystapaa. Äänisyntetisaattoreita varten on määritelty muun muassa äänen korkeutta, painotusta ja äänenväriä sääteleviä ominaisuuksia, joskin ne on toteutettu varsin suppeasti. Visuaalisen esitystavan perusta on niin sanottu laatikkomalli (box-model). Jokainen dokumentin elementti käsitetään mallissa laatikoksi, joka sijoitetaan ympäröivän elementin laatikon sisään muiden saman tason elementtien vierelle. Elementti voi kuitenkin tuottaa myös useita laatikoita. Kullakin elementillä on neljä sisäkkäistä laatikkoa, joista uloin on marginaali eli reunus; sen sisällä on reunaviiva tai -kuvio, joka rajoittuu sisäpuolelta sisältöä ympäröivään täytteeseen. Sisältölaatikossa on kuvattavan elementin sisältö.

CSS:ää käytetään luonnollisesti HTML:n ja XHTML:n kanssa, mutta se sopii yhtä lailla muidenkin rakenteisten dokumenttien (esimerkiksi XML ja MathML) tyyliohjeeksi.

Historia

Norjalainen Håkon Wium Lie ehdotti CSS:sää ensimmäistä kertaa vuonna 10 lokakuuta 1994. Tähän aikaan Lie työskenteli CERN:lle.  Useita muita tyyli kieliä nettisivuille suositeltiin lähes samoihin aikoihin ja keskustelu julkisilla sähköpostilistoilla World Wide Web Consortium:in sisällä johti ensimmäiseen W3C CSS suositukseen (CSS1), joka julkaistiin 1996. Bert Bos teki erityisen merkittäviä ehdotuksia, minkä seurauksena hänestä tuli CSS1:sen toinen kirjoittaja ja häntä pidetään toisena CSS:n luojana.

Tyylisivut ovat olleet olemassa tavalla tai toisella jo standardoitu yleinen merkintäkieli (Standard Generalized Markup Language) (SGML) alkuajoilta noin 1980 luvulla ja CSS oli luotu tarjoamaan tyylisivuja koko netille. Yhtenä nettisivujen tyylisivukielen vaatimuksena oli että sen voi saada useasta eri lähteestä internetissä. Sen takia jo olemassa olevat tyylisivukielet, kuten DSSSL ja FOSI, eivät olleet käyttökelpoisia. CSS puolestaan antoi dokumentti tyylin vaikuttaa useisiin tyylisivuihin ajamalla ohjeet peräkkäin.

HTML kasvaessa, sen tuli täyttää laajemman valikoiman erilaisia tyyliominaisuuksia, jotta eri netti kehittäjät halusivat. Tämä evoluutio antoi suunnittelijoille enemmän hallintaa sivun näyttävyydestä monimutkaisemman HTML hinnalla. Nettiselaimien implementoimisen variaatot, kuten ViolaWWW ja WorldWideWeb,, tekivät yhtenäisen sivun ulkonäön vaikeaksi ja käyttäjillä oli vähemmän hallintaa, kuinka nettisivun sisältö näytetään. Tim Berners-Lee kehitti nettisivun editointityökalun jossa oli kova koodatut tyylisivut. Tyylisivuja ei täten pystynyt linkittämään dokumentteihin netissä. Robert Cailliau,halusi erotella rakenteen niin että eri tyylisivut voisivat vaikuttaa eri tulosteisiin, ruudulla näkyviin esityksiin ja editoreihin.

Ensimmäinen versio, CSS 1, julkaistiin vuonna 1996. CSS 2 julkaistiin vuonna 1998 ja se sisälsi paljon virheitä, jotka lopulta korjattiin vuonna 2011, kun CSS 2.1 julkaistiin World Wide Web Consortium:in virallisena suosituksena.

CSS 3:a alettiin kehittää vuonna 1998. Se erosi edeltäjistään siten, että se julkaistiin yhden määritelmän sijaan erillisinä moduuleina. Jokainen moduuli käsitteli suhteellisen pientä osaa määritelmästä, ja moduulit joko lisäsivät uusia ominaisuuksia tai kehittivät ja laajensivat vanhoja ominaisuuksia. Kehityksessä pyrittiin taaksepäin suuntautuvaan yhteensopivuuteen edellisten versioiden kanssa.

CSS 3:a kehitetään edelleen. Moduulit kuitenkin mahdollistavat sen, että riittävän vakaille moduuleille voi antaa Candidate Recommendation (CR) statuksen. CSS 3 ei ole tuettu kaikissa selaimissa, mutta useimmat selaimet tukevat CR-statuksen saaneita moduuleja. Moduulit luokitellaan CSS-tason perusteella. Suurin osa kehitteillä sekä ylläpidossa olevista moduuleista on tason 3 moduuleja, sillä ne rakennetaan tason 2 eli CSS 2.1:n ominaisuuksien päälle. Kokonaan uusia toiminnallisuuksia lisäävät moduulit kuitenkin luokitellaan tason 1 moduuleiksi.

Myös CSS 4:n kehitys on alkanut ja se käyttää samaa moduuli-määritelmää. Tason 4 moduulit kehittävät ja laajentavat tason 3 moduuleja.

CSS-versiot

World Wide Web Consortium (W3C) ylläpitää CSS-kielien määritelmiä. Alkuperäinen määrittely oli CSS 1, jolla on vain historiallinen merkitys. Nykyisin vakiintuneet ja lähes kaikissa selaimissa toteutetut ominaisuudet on kuvattu määrittelyssä CSS 2.1. ”CSS 3” on yleisnimitys valmiusasteeltaan ja luonteeltaan hyvin erilaisille määrittelyille.

CSS1:n ominaisuudet

• yleinen muotoilu
• leveyden ja korkeuden asettaminen
• reunaviivat ja täytteet
• listojen muotoilu
• fontit ja niiden ominaisuudet jota ovat
  • värit
  • alleviivaus
  • koko
  • tausta
  • rivivälit
• asemointi
  • vasemmalle
  • keskelle
  • oikealle

CSS2:n uudet ominaisuudet

• asemoinnin uudistuminen, niin että kuvat ja teksti voidaan asemoida minne vain
• elementtejä voi asettaa päällekkäin, niin että toinen tulee päälle (Z-index)
• ylivuodon käsittely (mitä tehdään sisällölle, joka ei mahdu käytettävissä olevaan tilaan)
• taulukoiden ulkoasun parempi muokkaaminen

CSS3:n uudet ominaisuudet

• animointi
• elementin kääntäminen
• laatikoiden muuntaminen
• fontin venytys
• tekstin kelaaminen (marquee)
• rivien ominaisuudet
  • rivien määrä
  • rivien tausta
• puheominaisuudet (puheselaimille)
• X-, Y- ja Z-akseleiden suuntainen käänteleminen

Osa ominaisuuksista on suunniteltu osittain korvaamaan Java-sovelmat ja Flash.

CSS4

CSS4:lle ei ole vielä yhtä tiettyä versiota, sillä se on jaettu useisiin osiin, joita päivitetään erillään.

Osa osista, joita alettiin kehittää CSS2 pohjalta aloittivat tasolta 3, osa niistä on jo saavuttanut tason 4 ja lähestyy tasoa 5. Muut osat, jotka hyödyntävät täysin uutta Flexbox toiminnallisuutta ovat alkaneet tasolta 1 ja lähestyvät tasoa 2.

CSS työryhmä julkaisee ajoittain kokoelmia CSS4:n valmiista osista, jotka koetaan käyttövalmiiksi. Tällaisia kokoelmia on tähän mennessä julkaistu 5 kappaletta; vuosina 2007, 2010, 2015, 2017 ja 2018. CSS4 on edelleen kehityksessä. Siitä ja sen uusista ominaisuuksista on käyty paljon keskustelua sekä siihen on esitetty erilaisia ominaisuuksia koskevia ehdotuksia. CSS4 ei siis ole vielä virallinen CSS:n versio. Sinällään CSS4edustaa yleisnimitystä joukolle uusia ominaisuuksia ja moduuleja, jotka on ehdotettu sisällytettäviksi tuleviin CSS-määrittelyihin. On huomioitava, että CSS-ominaisuuksien kehitys ja käyttö voivat muuttua ajan myötä.

CSS4 on edelleen kehityksessä. Siitä ja sen uusista ominaisuuksista on käyty paljon keskustelua sekä siihen on esitetty erilaisia ominaisuuksia koskevia ehdotuksia. CSS4 ei siis ole vielä virallinen CSS:n versio. Sinällään CSS4edustaa yleisnimitystä joukolle uusia ominaisuuksia ja moduuleja, jotka on ehdotettu sisällytettäviksi tuleviin CSS-määrittelyihin. On huomioitava, että CSS-ominaisuuksien kehitys ja käyttö voivat muuttua ajan myötä.

Tällä hetkellä uusista ominaisuuksista ja käsitteistä, joista on käyty keskusteluja ja ollaan sisöllyttämässä CSS4:n

Säiliökyselyt: Yksi odotetuimmista ominaisuuksista ovat säiliökyselyt. Tämä ominaisuus mahdollistaa elementtien reagoinnin muutoksiin niitä sisältävien elementtien koossa, ei pelkästään näkymässä. Tämä on erittäin hyödyllistä responsiivisten sisällön luomiseksi eri säiliöiden sisällä.

Väriasteikko taso 4: CSS:n Väriasteikko taso 4 -moduuli esitti uusia värioperaatioita ja syntaksia, mukaan lukien color-mod(), joka mahdollistaa värien manipuloinnin, sekä järjestelmän värit, jotka mahdollistavat sopeutuksenjärjestelmän teemoihin.

Valitsimet taso 4: Valitsimet taso 4 esitteli uusia valitsimia, kuten :has() ja :focus-within, jotka mahdollistavat monimutkaisemmat ja tarkemmat valinnat.

Selainliuku: Selainliukujen ominaisuudet, kuten scroll-snap-type ja scroll-snap-align, esiteltiin tarjoamaan enemmän hallintaa siitä, miten sisältö asettuu paikoilleen vierityksen aikana, luoden sulavamman vierityskokemuksen.

Joustava laatikon asettelu taso 2 (Flexbox): Joustava laatikon asettelu taso 2 esitteli uusia ominaisuuksia ja parannuksia, mukaan lukien kyky luoda joustavia asetteluja vähemmällä koodilla.

Ruudukon asettelu taso 2: Ruudukon asettelu taso 2 toi mukanaan alaruudukot, jotka mahdollistavat sisäkkäisten ruudukoiden kohdistamisen pääruudukkoon, mikä helpottaa monimutkaisten asettelujen luomista.

Kuvasuhdeominaisuus: Suhdeominaisuus mahdollistaa elementin kuvasuhteen asettamisen. Tämä on erityisen hyödyllistä responsiivisten säiliöiden luomisessa esimerkiksi kuvien ja videoiden osalta.

Loogiset ominaisuudet: CSS4 jatkoi loogisten ominaisuuksien (esim. margin-inline-start margin-left sijasta) käyttöä, jotta asettelut olisivat joustavampia erilaisille kirjoitusmuodoille, kuten oikealta vasemmalle kirjoitetuille kielille.

Mukautettu korostus: CSS4 esitteli ::marker-pseudo-elementin ja siihen liittyvät ominaisuudet, jotta listamerkkien tyyliä voitaisiin mukauttaa enemmän.

Fonttimittarit: CSS4 ehdotti fonttimittariominaisuutta fonttimittareiden tietojen käyttämiseksi, mikä voi olla hyödyllistä typografian hienosäätöön.

Kaskadikerrokset: Kaskadikerrokset otettiin käyttöön tarjoamaan enemmän hallintaa CSS-sääntöjen pinoutumiselle ja järjestykselle, mikä helpottaa monimutkaisten tyylitiedostojen hallintaa.

Muuttujat mediatiedusteluissa: CSS4 mahdollistaa muuttujien käytön mediatiedusteluissa, mikä helpottaa responsiivisten suunnitelmien luomista muuttujien muutosten mukaan.

Yhteensopivuus eri selaimilla

Verkkoselaimet käyttävät eri selainmoottoreita verkkosivujen esittämiseen, josta johtuen eri selaimet voivat käsitellä CSS:n eri tavoin. Tiettyjä selaimia varten on kehitetty väliaikaisia korjauksia (CSS hack tai CSS-filtteri), joilla saavutetaan nettisivujen yhtenäinen ulkonäkö selaimissa, joissa ei ole yhdensopivaa renderöintiä.

Mikäli ei halua tyytyä vain väliaikaisiin korjauksiin, voi olla kannattavaa pyrkiä käyttämään vain niitä ominaisuuksia, jotka ovat yhteensopivia mahdollisimman monen nykyään yleisen verkkoselaimen, kuten Google Chrome, FireFox, Safari (selain) ja Microsoft Edge kanssa. Web-kehittäjien avuksi on tähän tarkoitukseen kehitetty ilmaisia verkkosivuja, joilla voi helposti tarkistaa tietyn ominaisuuden yhteensopivuuden käytetyn selaimen kanssa ennen käyttöä.

Yksi esimerkki tällaisesta sivustosta Alexis Deverian rakentama ja ylläpitämä verkkosivusto Can I use, jota nykyisin voivat päivittää myös muut verkkokehitysyhteisöön kuuluvat kehittäjät GitHub-palvelun kautta tai äänestämällä puuttuvaa ominaisuutta verkkosivulla . Sivustolla on CSS:n lisäksi mahdollista tarkistaa web-kehityksen kannalta olennaisten HTML5:n ja JavaScript:n ominaisuuksien yhteensopivuutta. Can I use-verkkosivu tekee myös yhteistyötä BrowserStackin kanssa, jolloin ominaisuuksien testaaminen ei rajoitu vain yleisimpiin selaimiin.

Myös w3schools.com sivusto tarjoaa aakkosittaisen listauksen CSS:n kolmannen version ominaisuuksista ja selainversioista, joilla ne ovat ensimmäisen kerran tuettu. CSS:n toiminnallisuuksien selain yhteensopivuuden tarkistaminen tällaisten sivustojen avulla voi siis auttaa määrittelemään minimivaatimukset käytettäville selainversiolle ja helpottaa verkkosivujen testaamista kehitysvaiheessa.

Merkittävien selainten tuen puute voi olla este uusien CSS:n toiminnallisuuksien omaksumiselle. Esimerkiksi Internet Explorer ei tukenut CSS 3 ominaisuuksia, mikä hidasti näiden ominaisuuksien omaksumista ja samalla vahingoitti selaimen mainetta kehittäjien keskuudessa. Yhtenäisen käyttäjäkokemuksen varmistamiseksi verkkokehittäjät yleensä testaavat sivustojaan useilla käyttöjärjestelmillä, selaimilla ja selainversioilla. Tämä puolestaan nostaa sivustojen kehitysaikaa ja monimutkaisuutta. Ohjelmistotyökaluja, kuten BrowserStack voidaan käyttää tällaisten kehitysympäristöjen ylläpitoon. Tilapäiset korjaukset ja usean vanhemman selainversion tuen ylläpito voivat nostaa ohjelmistokehitysprojektien monimutkaisuutta ja tästä syystä useat ohjelmistoyritykset määrittelevät listan selainversioista joita heidän ohjelmistonsa tukee.

Kun nettisivut ottavat käyttöön uudempaa koodia joka ei ole yhteensopiva vanhempien selainten kanssa, nämä selaimet eivät pääse enää käsiksi moniin verkon resursseihin. Monet modernit sivustot näyttävät erilaisilta vanhoilla selaimilla ja tämän lisäksi eivät välttämättä toimi ollenkaan, johtuen JavaSriptin ja muun verkkoteknologian kehityksestä.

Hyvät puolet

Sisällön erottaminen esitysmuodosta

CSS mahdollistaa sisällön julkaisemisen useissa muodoissa nimellisparametreihin perustuen. Nimellisparametrit ovat selkeitä käyttäjään ja käyttöympäristöön sidottuja muuttujia kuten käyttäjäkohtaiset mieltymykset, eri selainten tiedot, katselulaitteen tyyppi (pöytätietokone vai mobiililaite) ja käyttäjän maantieteellinen sijainti.

Sivuston yhdenmukaisuus

CSS:n käyttö on tehokkainta periytymisen ja peräkkäisyyden (cascading) ollessa kunnossa, jolloin voidaan koko sivuston ulkoasuun vaikuttaa yhdellä globaalilla tyylisivulla. Tämä mahdollistaa siis yksittäisten elementtien säätämisen tai muuttamisen muokkaamalla tyylisivulla olevia sääntöjä. Ennen CSS:n kehitystä, tällainen ylläpito oli haastavaa ja aikaa vievää.

Kaistanleveys

Tyylisivu, olipa se sisäinen tai ulkoinen, määrittää elementin tyylin kerran HTML:n määrittämälle alueelle luokan, tyypin tai suhteen mukaan. Tällä saavutetaan suurempi tehokkuus, sillä tyylitietoa ei tarvitse määrittää jokaiselle elementin instanssille. Yleensä ulkoinen tyylisivu tallennetaan selaimen välimuistiin, jolloin samaa tyylisivua voidaan hyödyntää useilla sivuilla ilman uudelleen latausta. Tämä menettelytapa vähentää verkkoyhteydelle aiheutuvaa kuormaa.

Sivuston ulkoasun uusinta

Vaihtamalla yksi rivi, voidaan koko sivuston ulkoasu muuttaa kerralla aivan toisenlaiseksi, pitäen sisällön samana. Tämä parantaa sivuston saavutettavuutta sekä pystytään sovittamaan sivuston ulkoasua eri kokoisille ja tyyppisille laitteille. Mikäli laite ei kykene tunnistamaan elementtien tyylejä niin sisältö silti näytetään käyttäjälle.

Saavutettavuus

Ilman CSS:ää, kehittäjät joutuvat yleensä rakentamaan sivuston erilaisten tekniikoiden avulla, jotka hankaloittavat sivuston käyttöä näkövammaisille. Esimerkki tällaisesta tekniikasta on HTML-taulukko.

Tehokas ja kompakti koodi

CSS mahdollistaa ulkoasun tyylien määrittämisen lyhyellä ja tiiviillä koodilla. Sen avulla on mahdollista hyödyntää valmiita tyyliluokkia ja id-attribuutteja, mikä vähentää tarvetta toistaa samaa koodia useaan otteeseen. CSS:llä pystyy myös käyttämään lyhyitä syntaksimuotoja, kuten värejä tai yksiköitä, mikä pienentää tiedostokokoa ja parantaa sivuston latausnopeutta ja toimivuutta.

Animointi ja interaktiivisuus

CSS tarjoaa monia ominaisuuksia, jotka mahdollistavat animaatioiden ja interaktiivisten elementtien luomisen ilman JavaScriptin käyttöä. Voit luoda siirtymiä, muodonmuutoksia, animoituja liikkeitä ja hover-efektejä ja transformaatioita jotka parantavat käyttäjäkokemusta ja tekevät sivustosta elävämmän ja dynaamisemman. CSS-transformaatiot esimerkiksi antavat sinulle mahdollisuuden muuttaa elementtien kokoa, sijaintia, kiertämistä ja vääristymiä. Voit skaalata, kääntää, kallistaa tai vääristää elementtejä, mikä avaa monia luovia mahdollisuuksia animaatioihin. Transformaatiot voidaan yhdistää siirtymiin ja avainkehyksiin luodaksesi monimutkaisempia ja dynaamisempia animaatioita.

Helppo päivitettävyys

CSS:n erillisenä tiedostona pitäminen mahdollistaa sen helpon päivittämisen. Voit muuttaa tyylisivua tarpeen mukaan ilman, että sinun tarvitsee muokata itse sivuston sisältöä. Tämä säästää aikaa ja vaivaa päivitysten tekemisessä ja mahdollistaa nopean ulkoasun muokkaamisen esimerkiksi uuden designin suunnittelun tai brändin mukaisesti.

Laajennettavuus

CSS tarjoaa mahdollisuuden luoda omia tyylisääntöjä ja laajentaa tyylien toiminnallisuutta. Voit hyödyntää CSS:n jatkeita, kuten Sassia tai Lessiä, jotka tuovat mukanaan muuttujia, funktioita ja sisäkkäisyyksiä. Tämä helpottaa tyylien hallintaa ja kehitystyötä, sillä voit käyttää uudelleen käyttökelpoisia tyylisääntöjä ja tehdä tyylistäsi modulaarisempaa.

Lokalisaatio

CSS mahdollistaa sivustojen mukauttamisen eri kulttuurien ja kielten tarpeisiin. Sillä pystyy hallitsemaan tekstisuuntaa, asettelua ja ulkoasua eri kielten ja kirjoitusjärjestelmien vaatimusten mukaan. Tämä parantaa käyttäjäkokemusta ja laajentaa sivustojen käyttäjäkuntaa maailmanlaajuisesti.

Laaja yhteisö

CSS:ää käytetään lähes jokaisessa nettisivussa, jonka takia sillä on laaja ja aktiivinen yhteisö. Tämän ansiosta CSS:stä löytyy valtavasti tietoja ja resursseja, joita kehittäjät pystyvät hyödyntämään.

Huonot puolet

Selainyhteensopivuus

CSS voi toimia eri tavoin eri selaimissa, mikä voi aiheuttaa sekaannusta. Esimerkiksi tiettyjä tyylitiedostoja ei välttämättä tueta tietyillä selaimilla. Tämän takia verkkokehittäjien on testattava nettisivujen yhteensopivuutta useilla selaimilla, joka lisää työn määrää.

Monta CSS-versiota

Aloitteleville kehittäjille eri CSS:n tasot voivat aiheuttaa sekaannusta, jonka takia CSS:n oppiminen voi olla vaikeaa.

Turvallisuus

CSS:ää ei pidetä täysin turvallisena. XSS-hyökkäyksellä on esimerkiksi mahdollista tunkeutua CSS-pohjaiselle verkkosivulle ja muuttaa sen haitalliseksi.

Hankaluudet ylläpitämisessä

Verkkosivun laajentuessa CSS-tiedostot voivat nopeasti kasvaa liiankin suuriksi. Tämä vaikeuttaa tiedoston muokkaamista sekä ymmärrettävyyttä, joka voi puolestaan aiheuttaa hankaluuksia mahdollisten bugien löytämisessä ja korjaamisessa. Tiedoston monimutkaisuus ja ongelmat ymmärrettävyydessä voivat myös aiheuttaa odottamatonta käytöstä sivuston ulkoasussa. Esimerkiksi suurella selainsivustolla on useimmiten useita eri CSS-tiedostoja, joista moni voikin olla pitkä ja monimutkaisen oloinen. Usein kun kehittäjä muokkaa sivustoa, hän joutuu myös muokkaamaan sen tyylielementtejä CSS-tiedostossa. Tiettyjä kehittäjän etsimiä tyylielementtejä voi olla vaikea löytää suuresta tiedostosta, jolloin saatetaan päätyä vahingossa muokkaamaan väärää elementtiä tai luomaan täysin uutta samanlaista, vaikka sellainen jo löytyisikin. Tällöin sivuston ulkoasun rikkoutumisen riski kasvaa, ja tulevaisuudessa epäkohtien löytäminen ja ratkaiseminen voi sekä hidastua että hankaloitua.

Yhteensopivuus erikokoisten laitteiden kanssa

Reaktiivisen selainsivuston luominen CSS:n avulla voi olla haasteellista. Usein selainsivustojen kehittäminen tapahtuu tietokoneella. Tällöin sivuston ulkoasu usein sopii hyvin käytettäväksi keskikokoisella tietokoneen näytöllä, mutta mobiililaitteilla tai tabletilla sivustoa selatessa voikin ilmetä ongelmia käytettävyyden näkökulmasta. Vaikka CSS:llä onkin eri tapoja ottaa eri näyttökoot huomioon sivustoa kehittäessä, kuten mediakyselyjen avulla, nämä asiat täytyy kuitenkin sovelluskehittäjänä itse muistaa huomioida erikseen. Eri näyttökokojen unohtaminen kehittämisessä voi helposti johtaa käytännöllisiin ongelmiin, kuten hankaluuksiin selainsivuston navigoinnissa tai käyttäjän turhautumiseen epämiellyttävän käyttöliittymän takia.

Haasteet sivuston suorituskyvyssä / tehokkuudessa

Ylläpitovaikeuksien tavoin pitkä ja monimutkainen CSS-tiedosto voi aiheuttaa ongelmia selainsivuston suoriutumisessa. Koska selain joutuu tulkkaamaan CSS-tiedoston sisällön aina sivun ladattaessa uudelleen, riippuen tiedoston koosta tämä voi saada selaimen hidastumaan huomattavasti. Odottelu ja selaimen hitaus voi taas johtaa huonoon käyttökokemukseen. Etenkin mobiililaitetta käytettäessä CSS -tiedostojen uudelleen lataaminen voi olla osallinen laitteen ylikuormituksessa ja siten myös johtaa hidastumiseen sekä liialliseen akun kulumiseen.

CSS:n perussyntaksi

CSS:n perussyntaksi muodostuu selektorista eli valitsimesta, ominaisuudesta ja arvosta.

selektori {
  ominaisuus: arvo;
}

Kaikki ominaisuudet ja arvot tulevat aaltosulkeiden {} sisään. Useita ominaisuuksia ja arvoja voi laittaa valitsimeen peräkkäin erottelemalla ne puolipisteellä ;.

Valitsin

Valitsin määrittää mihin osiin HTML-dokumenttia aaltosulkeiden sisällä olevat ominaisuudet vaikuttavat. Valitsimella voidaan valita:

• kaikki tiettyä tyyppiä olevat elementit, kuten kappale-elementit p (esimerkki alla)
• elementit, joille on dokumentissa määritetty tietty attribuutti:
  • id: tunniste, joka on uniikki dokumentissa. Merkitään valitsimessa lisäämällä etuliitteeksi ristikkomerkki, esim. #id
  • luokka: tunniste, joka voi viitata dokumentissa useisiin eri elementteihin. Merkitään valitsimessa lisäämällä etuliitteksi piste, esim. .classname
• elementit riippuen siitä minkälaisessa suhteessa ne ovat muihin elementteihin dokumenttipuussa.

Tunnisteiden kirjainkoko on merkitsevä ja niiden täytyy alkaa kirjaimella, ne voivat sisältää kirjaimia, numeroita sekä tavu- ja alaviivamerkkejä. ID voi viitata vain yhteen elementtiin, kun luokka voi viitata useampaan.

Valitsimeen voidaan lisäksi liittää pseudoluokkia, joilla voidaan muokata dokumentin tyyliä sellaisen tiedon pohjalta, mitä ei dokumenttipuusta löydy. Eräs esimerkki pseudoluokasta on :hover, joka tunnistaa sisällön vain kun käyttäjä osoittaa elementtiin esimerkiksi pitämällä hiiren kursoria elementin päällä. Pseudoluokka lisätään valitsimen perään, esim. .classname:hover. Pseudoluokka valitsee dokumentista kokonaisia elementtejä, kuten :link tai :visited, kun pseudoelementti taas tekee valinnan, joka voi koostua osittaisista elementeistä, esim. :first-line tai ::first-letter. Pseudoluokkaa siis merkitään yhdellä kaksoispisteellä ja pseudoelementtiä vastaavasti kahdella peräkkäisellä kaksoispisteellä.

Esimerkki CSS-määrittelystä

/* Leipätekstin fontin määritys ja tasaus */

p {
 font: 11px 'Trebuchet MS', Verdana, Arial, sans-serif;
 color: #9e9e9e;
 text-align: justify;
}

/* Linkit lihavoidaan, mutta ei alleviivata */

a {
 text-decoration: none;
 font-weight: bold;
}

/* Kursorin alla olevan linkin tausta mustaksi ja teksti valkoiseksi
 24-bittisellä heksakoodilla määritettyinä */

a:hover {
 color: #ffffff;
 background-color: #000000;
}

Periytyminen

Periytyminen on CSS:n keskeisiä toiminnallisuuksia. Sen toiminta perustuu esivanhempi-jälkeläinen suhteeseen, jossa periytymisen kautta saatuja ominaisuuksia käytetään esivanhemman lisäksi myös tämän jälkeläisiin. Peritty ominaisuus on esivanhemmalta saatu laskettu arvo, joka löytyy ominaisuuksienmäärittelytaulukosta. Juurielementillä ja jälkeläisillä, jotka eivät peri ominaisuutta esivanhemmalta, peritty ominaisuus on alkuperäinen määritelty arvo. Periytymisen toiminnallisuus nojautuu dokumenttipuuhun, jossa XHTML-elementtien hierarkia perustuu sisäkkäisyyteen. Sisäkkäisyyksien mukaan jälkeläinen perii voimaan jäävät arvonsa aina järjestyksessä lähimmältä esivanhemmalta. Periyttämällä ominaisuuksia voidaan välttyä määrittelemästä samoja ominaisuuksia jatkuvasti uudelleen, joka johtaa lyhyempää ja helpommin muokattavaan CSS-tiedostoon.

Esimerkki

CSS koodipätkä:

p {
   color: green;
}

Elementti p, jonka sisällä on korostava elementti (<em>):

<p>
   Tämä esimerkki <em>havainnollistaa</em> periytymistä
</p>

Jos em-elementille ei ole määritelty väriä, niin sana “havainnollistaa” perii värin esivanhemmaltaan p. Elementille p on määritetty väri vihreä, jolloin elementti em on myös vihreä:

Tämä esimerkki havainnollistaa periytymistä

Yhteenveto valitsimen syntaksista

Seuraavassa taulukossa on yhteenveto valitsimen syntaksista ja missä CSS-versiossa se on otettu käyttöön.

Valitsin	Määrittely	Ensimmäinen CSS-versio, jossa otettu käyttöön
E	E tyypin elementtin (kuten yläpuolella oleva p)	1
E:link	E elementti, joka on hyperlinkin ankkuri, jossa on käyty (:link) tai ei vielä ole käyty (:visited)	1
E:active	E elementti, joka on aktiivinen	1
E::first-line	E elementin ensimmäinen rivi	1
E::first-letter	E elementin ensimmäinen kirjain	1
.c	kaikki elementit joissa luokaksi on määritetty "c" (class="c")	1
#myid	Elementti, jonka id on "myid" (id="myid")	1
E.warning	E elementti, minkä luokka on "warning"	1
E#myid	E elementti, minkä id on "myid" (id="myid")	1
.c#myid	elementti, jonka luokka on "c" (class="c") ja id on "myid" (id="myid")	1
E F	F elementti, joka on E elementin sisällä	1
*	kaikki elementit	2
E[foo]	E elementti, jolla on "foo" attribuutti	2
E[foo="bar"]	E elementti, jonka "foo" attribuutin arvo on "bar"	2
E[foo~="bar"]	E elementti, jonka "foo" attribuutin jokin arvo on "bar" välilyönnillä erotettujen arvojen listasta	2
E[foo|="en"]	E elementti, jonka "foo" attribute jokin arvo alkaa (vasemmalta) "en" väliviivoilla erotettujen arvojen listasta	2
E:first-child	E elementin vanhemman ensimmäinen lapsi	2
E:lang(fr)	E elementti kielellä "fr"	2
E::before	sisältö ennen E elementin sisältöä	2
E::after	sisältö E elementin sisällön jälkeen	2
E > F	E elementin lapsena oleva F elementii	2
E + F	F elementti, jonka edellä on E elementti	2
E[foo^="bar"]	E-elementti, jonka "foo"-attribuutin arvo alkaa täsmälleen merkkijonolla "bar"	3
E[foo$="bar"]	E-elementti, jonka "foo"-attribuutin arvo päättyy täsmälleen merkkijonoon "bar"	3
E[foo*="bar"]	E-elementti, jonka "foo"-attribuutti sisältää merkkijonon "bar"	3
E:root	E elementti juuri-tasolla	3
E:nth-child(n)	E elementti, joka on n:s lapsi	3
E:nth-last-child(n)	E elementti, joka on n:s lapsi, laskien viimeisestä	3
E:nth-of-type(n)	E elementti, joka on n:s saman tyyppinen lapsi	3
E:nth-last-of-type(n)	E elementti, joka on n:s saman tyyppinen lapsi, laskien viimeisestä	3
E:last-child	viimeinen E elementin lapsi	3
E:first-of-type	E elementin saman tyyppinen lapsi	3
E:last-of-type	E elementin saman tyyppinen lapsi, laskien viimeisestä	3
E:only-child	E elementti, joka on vanhempien ainoa lapsi	3
E:only-of-type	E elementti, joka on vanhempien ainoa saman tyyppinen lapsi	3
E:empty	E elementti, jolla ei ole lapsielementtejä	3
E:target	E elementti, joka on viittaavan URl:n kohde	3
E:enabled	E elementti, joka on käytössä	3
E:disabled	E elementti, joka ei ole käytössä	3
E:checked	E elementti, joka on valittu (esimerkiksi radio button tai checkbox)	3
E:not(s)	E elementti, joka ei vastaa s-valitsinta	3
E ~ F	F elementti, jota edeltää E elementti	3

Responsiivinen web-suunnittelu

CSS:n avulla pystymme suunnittelemaan responsiivisia verkkosivuja. Responsiivisuudella tarkoitetaan verkkosivun mukautuvuutta käyttäjän näytön kokoon halutulla tavalla niin, että se on käyttäjälle paremmin suunniteltu. Tämä voidaan toteuttaa CSS-tiedostossa mediakyselyiden (CSS Media Queries) avulla niin, että luodaan rajaehdot näytön koolle. Näin verkkosivu muuttaa asetteluaan tunnistaessaan minkä kokoisella näytöllä sivu avataan. @media-kyselyt lisättiin CSS2:een. CSS2 tunsi ainoastaan jaon tiettyihin laitteisiin, kuten tietokoneen näyttö, tulostin tai mobiililaite. CSS3 laajensi toiminnallisuutta siten että sillä voi kysellä laitteen ominaisuuksia, kuten näytön kokoa tai resoluutiota pikseleinä tai laitteen kääntämistä vaaka/pystysuuntaan. Kysely palauttaa totuusarvon, ja jos kaikki ehdot täyttyvät kyseinen CSS-sääntö otetaan käyttöön.

Esimerkkejä mediakyselyiden käytöstä:

/* Todella pienet laitteet (puhelimet, 480px ja pienemmät) */
@media screen and (max-width: 480px) {/* css koodi */}

/* Pienet laitteet (tabletit ja suuret puhelimet, 481px suuremmat) */
@media screen and (min-width: 481px) {/* css koodi */}

/* Keskikokoiset laitteet (pienet näytöt ja kannettavat tietokoneet, 769px suuremmat) */
@media screen and (min-width: 769px) {/* css koodi */}

/* Suuret laitteet (pöytätietokoneet ja suuret näytöt, 1025px suuremmat) */
@media screen and (min-width: 1025px) {/* css koodi */}

/* Todella suuret laitteet (todella suuret näytöt ja TV, 1200px suuremmat) */
@media screen and (min-width: 1201px) {/* css koodi */}

Suunnittelu kannattaa aloittaa mobiililaitteista ja edetä niistä suurempia laitteita kohti. Esimerkkikoodissa suuruusluokka on ensin asetettu kuuttasataa pikseliä pienemmiksi ja seuraavat sitä suuremmiksi. CSS pystyy havaitsemaan, mihin suuruusluokkaan näytön koko sopii ja toteuttaa verkkosivun asettelun siihen muokatun asettelun mukaan. Esimerkiksi jos näyttö on suurempi kuin 768px mutta pienempi kuin 992px, sen asettelu on keskikokoisten laitteiden mukainen. CSS ei anna suuruusluokkia automaattisesti vaan ne täytyy määritellä itse.

Mediakyselyitä voidaan määritellä enemmänkin esimerkiksi tulostamiseen tai näytönlukemiseen käyttämällä screen tilalla print tai speech.

CSS-animaatiot

CSS-animaatiot on julkaisu ensimmäisen kerran vuonna 2009. CSS-animaatiot ovat keino lisätä WWW-sivuille animaatioita helposti JavaScriptiä. CSS-animaatio muokkaa elementin tyyliä toiseen tyyliin. Animaatioilla voidaan animoida CSS:n ominaisuuksia, kuten värejä, leveyksiä, korkeuksia ja tekstin kokoa. Animaatioissa selain toteuttaa animaation määriteltyjen muutoksien mukaan. Animaatioita voi tehdä elementeille kuinka paljon tahansa ja kuinka monta kertaa tahansa.

CSS-animaation rakenne koostuu kahdesta osasta:

• Animaation tyylin kuvaus
• Näppäinkehys, joka määrittää animaation alun ja lopun, sekä mahdolliset muut muutokset niiden välillä

@keyframes

CSS-animaation pitää olla sidottuna johonkin elementtiin. Animaatio määritetään @keyframes:in (avainruudut) avulla. Animaatio muuttuu määrätystä lähtötilanteesta määrättyyn lopputilanteeseen määrätyssä ajassa ja mahdollisilla määritetyillä välimuutoksilla. Esimerkiksi animation-duration ominaisuus kertoo missä ajassa animaatio tapahtuu. Muutoksen voi kuvata prosentuaalisesti. Puolessa välissä animaatio voi muuttua, minkä jälkeen se taas jatkuu loppuun.

Esimerkkejä-CSS animaatioiden ominaisuuksista, joita voidaan toteuttaa:

• Animaation viivästyminen
• Animaation kesto
• Animaation toistaminen
• Animaation suunnan muuttaminen

Historia

CSS laajentaminen animaatioiden alueelle oli minimaalista aina 2000-luvun ensimmäisen vuosikymmenen loppuun saakka. Vuonna 2007 WebKit oli julkaissut aikeensa sisällyttää CSS animaation, siirtymät, ja muutokset WebKitin ominaisuuksiin. Vuonna 2009 WebKit ilmoitti toteuttavansa sekä implisiittisen että eksplisiittisen animaation CSS käyttäen. CSS-animaatio on myös esitetty osana CSS3:a.

Nykyhetki

CSS-animaatiot on osa Cascading Style Sheets -moduulia. Se mahdollistaa käyttäjien siirtää kursorin kohteiden päälle ja animaation toistuvan. Tällä hetkellä se on otettu käyttöön kaikissa suurissa hakukoneissa. Huolimatta kritiikistä niiden taholta, jotka suosivat animaatiota Javascriptin kautta, hover-tagia käytetään nyt laajalti Cascading Style Sheets -yhteisössä.

Kiista

CSS-animaation kehityksen alkuvaiheissa se herätti huolta niissä, jotka suosivat JavaScript animaatiota tai vähemmän käytettyä Synchronized Multimedia Integration Language (SMIL) -kieltä; toiset ovat väittäneet, että se on Apple Inc., WebKit-projektin pääsponsorin, yritys kiertää Adobe Flash (ja sen tuottamien Flash-animaatioiden) sisällyttäminen yhtiön iOS-laitteisiin, jotka käyttävät Safari.-selainta. Lisäksi, vaikka Cascading Style Sheets on suhteellisen helppokäyttöinen ohjelmointikieli, monet ohjelmoijat kamppailevat silti animaatioiden luomisessa. Tämän ongelman vuoksi useat yksilöt ja verkkosivustot ovat kehittäneet ja luoneet avoimen lähdekoodin CSS-nappianimaatioita koodilla, jonka käyttäjät voivat kopioida. Kuitenkin, huolimatta näistä aikaisemmista kiistoista, CSS-animaatioita voidaan pääosin löytää ja ne ovat laajalti käytössä internetissä.

Selaintuki

Kesäkuussa 2011 Firefox 5 sisällytti CSS-animaatio tuen. CSS-animaatio on myös saatavilla moduulina WebKitin nightly build-versioissa sekä Google Chrome, Safari 4 ja 5, Safarille iOS (iPhone, iPod Touch, iPad), Android versioille 2.x ja 3.x, Internet Explorer 10+ ja Microsoft Edge -selaimessa, BlackBerry OS 6 -verkkoselaimessa, käyttämällä -webkit- etuliitettä. Sitä käytetään myös iTunes 9:ssä tukemaan iTunes LP tiedostoja.

Taitto

HTML sisältää useita mahdollisuuksia elementin asetteluun ja sommitteluun sivulle. Näitä ovat esim. BLOCK, INLINE, taulukot (TABLE) ja Positioning absoluuttiseen sijoitteluun.

Taitto on sittemmin lisätty osaksi CSS:ää, jolla voi jakaa sisällön palstoihin tai riveille. CSS:n mahdollisuudet tähän ovat CSS Flexbox (CSS Flexible Box Layout) ja CSS Grid Layout. Ennen CSS:n ominaisuuksia ainoat luotettavat tekniikat, jotka toimivat useimmissa selaimissa olivat Positioning ja Floats.

Tärkein ero on, että CSS Grid on kaksiulotteinen, mikä tarkoittaa, että se voi sijoittaa elementtejä samanaikaisesti riveihin ja sarakkeisiin. Flexbox on yksiulotteinen, mikä tarkoittaa, että se voi asetella elementtejä vain vaaka- tai pystysuunnassa, mutta ei molemmissa samanaikaisesti. Grid sopii paremmin monimutkaisiin ja tarkkoihin asetteluihin, kun taas Flexbox on joustavampi ja mukautuu sisällön kokoon.

CSS Grid kehitettiin Microsoftilla ja julkaistiin epävirallisena laajennoksena Internet Explorer 10:ssa. Ominaisuus speksattiin ja luovutettiin W3C:lle 2012. Toteutus ei ollut ensimmäinen, ja sen kilpailijana oli myös Adoben kehittämä CSS Regions. Lopulta mediayhtiö Bloomberg palkkasi avoimen lähdekoodin kehittäjän toteuttamaan ominaisuuden ja se julkaistiin osana Google Chromea ja Firefox tammikuussa 2017. Kun Microsoft Edge viimein toteutti laajennuksen syksyllä 2017, jokainen merkittävä selain tuki Gridiä.

Flex layoutia ehdotti jo CSS Working Group vuonna 2008 ja ensimmäinen speksin luonnos julkistettiin 2009. Speksi jouduttiin kuitenkin kirjoittamaan uudelleen 2011 sen epämääräisyyden ja toteutuksien heikkouden vuoksi. Vuoden 2012 luonnoksesta tuli W3C:n standardiehdotus, jota vielä uudistettiin 2013. Lopullinen versio hyväksyttiin vasta marraskuussa 2018.

Katso myös

• WWW-sisällönhallinta
• Informaatioarkkitehtuuri

Lähteet

• Web standards software and learning - browser support (englanniksi)
• Jukka K. Korpela: CSS3 – uudet mahdollisuudet. Docendo, 2013.  ISBN 978-952-5912-79-1
• https://www.geeksforgeeks.org/advantages-and-disadvantages-of-css/
• https://unstop.com/blog/advantages-and-disadvantages-of-css

Aiheesta muualla

• W3C:n CSS-sivusto
• W3C:n CSS-validaattori
• Johdanto CSS-tyyliehdotuksien käyttöön Web-sivuilla
• Suomenkielinen CSS 2.1 -ominaisuusreferenssi visuaaliselle medialle
• Suomenkielinen yhteenveto CSS3-valitsimista esimerkki-/testisivuineen