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 1994. Lie työskenteli tuolloin CERNissä ja totesi tarpeen tyyliohjeille. Ajatus ei ollut täysin uusi, vaan myös Tim Berners-Lee oli työskennellyt vastaavan asian parissa HTML-merkintäkielen alkuaikoina. Vuonna 1992 Pei Wei kehitti ViolaWWW-selaimen, jossa oli oma kieli tyyliohjeille. Vuonna 1993 julkaistu NCSA Mosaic oli suosittu, mutta tarjosi vain vähän ominaisuuksia ulkoasun muokkaamiseen. Hieman ennen Netscapen selaimen julkaisua Lie julkaisi ehdotuksensa nimellä Cascading HTML Style Sheets. Lien ehdotukseen vastasi Bert Bos, joka oli kehittämässä omaa selainta Argo-tyyliohjeilla ja päätti yhdistää voimansa Lien kanssa.
Netscape lisäsi selaimeensa font-tagin tuen vuonna 1995 ja se otettiin mukaan HTML 3.2 -versiossa. Samaan aikaan kehitettiin tyylisivuja. Ensimmäinen versio CSS-määrittelystä julkaistiin vuonna 1996, mutta kesti aikansa ennen kuin verkkoselaimet lisäsivät sille tuen. Laajennettu CSS 2 julkaistiin vuonna 1998, jolle julkaistiin nopeasti korjausversio 2.1. CSS 3 ei ole yksittäinen "monoliittinen" määrittely, vaan se on julkaistu moduuleiksi kutsuttuina erillisinä dokumentteina.
Kehityksen nopeuttamista varten on kehitetty CSS-esikääntäjiä kuten Sass, jotka tuottavat CSS-määrittelyjä.
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.
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 vaikeaa 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 yli 90 prosentissa verkkosivuista, 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.