Mediatyypit

CSS2 mahdollistaa tyylien määrittelyn käytettävästä mediasta riippuen. Omat asetukset voi määritellä tavalliselle näytölle, paperille, puhesyntetisaattorille jne. Joillekin medioille löytyy aivan omia ominaisuuksia, kun taas jotkin ominaisuudet voivat olla yhteisiä eri medioiden välillä. Jokainen media kuitenkin vaatii omat arvonsa kullekin ominaisuudelle. Esimerkiksi näytölle määritellään käytettäväksi erilaista kirjasintyyppiä kuin paperille.

Mediariippuvaisia tyylejä voidaan määritellä usealla eri tavalla. Mediatyyppi voidaan määrätä suoraan XHTML-dokumentissa link-elementin media-ominaisuudella. Voidaan käyttää @import-määrittelyä:

@import url("paperi.css") print;

@media-määrittelyllä voidaan suoraan rajata ominaisuusmäärittelyt koskemaan tiettyä mediaa:

@media aural {
  /* puheeseen liittyvät tyylimääritykset */
}

CSS2 tunnistaa seuraavat mediatyypit:

all

Sopii kaikille medioille.

aural

Tarkoitettu puhesyntetisaattoreille.

braille

Tarkoitettu braille-näytöille eli pistekirjoitusnäytöille.

embossed

Tarkoitettu sivuttaville braille-tulostimille.

handheld

Tarkoitettu pienille kädessäpidettäville laitteille (esim. mobiililaitteet), joissa on yleensä pieni mustavalkoinen näyttö ja pieni tiedonsiirtokapasiteetti.

print

Tarkoitettu paperitulosteisiin ja esitulostuskatseluun.

projection

Tarkoitettu videoprojektoreille ja kalvotulostuksiin.

screen

Tarkoitettu tavallisille tietokoneissa käytettäville värinäytöille.

tty

Tarkoitettu tasalevyistä kirjasinta käyttäville laitteille, pääteohjelmille tai kannettaville laitteille.

tv

Tarkoitettu televisioille ja vastaaville näyttölaitteille, joiden näyttötarkkuus on pieni, mutta pystyvät esittämään värejä ja ääntä.

Esimerkki puhesyntetisaattorille osoitetuista tyylimäärityksistä:

@media aural {
  h1, h2, h3, h4, h5, h6 {
    voice-family: paul, male;
    stress: 20; 
    richness: 90;
  }

  h1 {
    pitch: x-low;
    pitch-range: 95;
  }

  h2 {
    pitch: x-low;
    pitch-range: 85;
  }

  h3 {
    pitch: low;
    pitch-range: 75;
  }

  h4 {
    pitch: medium;
    pitch-range: 65;
  }

  li, dt, dd {
    pitch: medium;
    richness: 65;
  }

  pre, code {
    pitch: medium;
    pitch-range: 0;
    stress: 0;
    richness: 85;
  }

  em {
    pitch: medium;
    pitch-range: 65;
    stress: 65;
    richness: 55;
  }

  strong {
    pitch: medium;
    pitch-range: 65;
    stress: 95;
    richness: 95;
  }

  a:link {
     voice-family: harry, male;
  }

  a:visited {
    voice-family: betty, female;
  }

  a:active {
    voice-family: betty, female;
    pitch-range: 85;
    pitch: x-high;
  }
}