CSS

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2025!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! Koulutuksen järjestää asiantuntijasi Koulutus- ja konsultointipalvelu KK Mediat.

Kuinka kohdistaa CSS-tyylit eri ympäristöihin HTML:n media-attribuutilla

Yksi CSS:n keskeisistä vahvuuksista on sen tarjoama mahdollisuus mukauttaa verkkosivuston ulkoasu ympäristökohtaisesti. Tällöin sama dokumentti voidaan esittää eri tavoilla esimerkiksi näytöllä, tulosteena, mobiililaitteessa, televisiossa tai puhesyntetisaattorin kautta.

CSS-tyylejä voidaan kohdistaa eri mediatyypeille kahdella tavalla:

Tässä artikkelissa keskitymme ensimmäiseen käyttötapaukseen. Mediaqueryjen ja @media-sääntöjen tarkempi käyttö on käsitelty erillisessä artikkelissa.

Mediatyypin määrittäminen media-attribuutin avulla

Kun CSS-tyylit liitetään ulkoisista CSS-tiedostoista, voidaan ne kohdistaa eri medioille määrittämällä link-tagille media-attribuutti. Esimerkiksi: 



<link rel="stylesheet" href="styles.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />

Media-attribuuttia voidaan käyttää myös style-elementissä. Esimerkiksi: 



<style media="screen">
/* tyylit näytölle...*/
</style>

<style media="print">
/*tyylit tulostukseen ...*/
</style>

Koska mediaqueryt tarjoavat joustavammat tavat tyylien kohdistamiseen, HTML:n media-attribuutin käyttö on nykyään harvinaisempaa. Silti se voi edelleen olla hyödyllinen, esimerkiksi kun haluat ladata erillisen tyylitiedoston tietylle mediatyypille kuten tulostuksen hallintaan.

Media-attribuuttia käyttämällä voi myös nopeuttaa sivun latausta, koska selain jättää parsimatta ne tyylitiedostot jotka eivät vastaa aktiivista mediaa.

Yleisimmin käytetyt mediatyypit CSS:ssä

W3C:n CSS-standardissa on määritelty seuraavat mediatyypit, joita voi käyttää sekä media-attribuutissa että @media-säännöissä:

CSS:n määrittelemät mediatyypit
Mediatyyppi Kuvaus
all Kaikki mediat (oletusarvo, sama kuin @media attribuuttia ei määritellä)
screen Näyttölaitteet (esim. tietokoneet, mobiililaitteet)
print Paperitulosteet
speech Puhesyntetisaattorit ja muut äänipohjaiset käyttöliittymät.
embossed Tulostus Braille-kirjoittimelle (pistekirjoituksena)
projection Esityslaitteet, kuten projektorit

Osa vanhemmista mediatyypeistä, kuten aural (nykyinen speech) on deprekoitu. Myös braille, tty, television ja handheld ovat poistumassa vähäisen käytön takia.

Artikkelin tiedot

Otsikko: Kuinka kohdistaa CSS-tyylit eri ympäristöihin HTML:n media-attribuutilla

Kuvaus: Opi, kuinka HTML:n media-attribuutti mahdollistaa CSS:llä toteutun ulkoasun kohdentamisen eri laitteille ja ympäristöihin.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: