CSS-opas

CSS-TYYLEIHIN LIITTYVÄÄ KOULUTUSTA VUONNA 2008!

Kurssit saatavilla kautta Suomen. Tule ja varaa oma koulutustapahtumasi heti! IT-koulutuksen asiantuntijasi, Koulutus- ja konsultointipalvelu KK Mediat

CSS ja mediatyypit

Eräs CSS-tyylimäärittelyjen tärkeimmistä piirteistä on mahdollisuus rakentaa ulkoasu / asettelumalli mediakohtaisesti. Piirrettä hyödyntäen on mahdollista esittää sama dokumentti eri ulkoasulla esim. näytöllä, paperilla, PDA-laitteessa, TV:ssä tai vaikkapa puhesyntetisaattorin avulla.

Esimerkki. Näytöllä tapahtuvassa esityksessä taustaväri on musta, teksti valkoinen. Tulosteessa värit on käännetty eli teksti on musta, tausta valkoinen.

 @media screen {
   body {background:black; color: white; }
   p {font-family:verdana, sans-serif;}
 }
 @media print {
   body {background:white; color:black; }
   p {font-family:times, serif; }
 }

Eri mediatyypeille kohdennettaessa kehittäjällä on huomattava vastuu median ja päätelaitteen piirteiden ymmärtämisessä, ja sitä kautta myös CSS-tyylimäärittelyn suunnittelussa. Esim PDA-laitteissa näytön rajattu koko ja resoluutio asettavat huomattavia vaatimuksia sivun asettelulle. Päätelaitteen ja sen esitysmedian tunnistaminen tapahtuu automaattisesti UA-laitteen (web-selain tms) toimesta.

CSS 2 määrittelyn tunnistamat mediatyypit ovat:

CSS mediatyypit
Arvo	Esitysmedian kuvaus
All	Käytetään kaikkia esitysvälinemuotoja varten
Aural	Ääni (tulkitaan puhesyntetisaattorin avulla)
Braille	Braille-kuvaruutu (näkövammaiset)
Embossed	Tulostus Braille-kirjoittimelle (pistekirjoituksena)
Handheld	Käsimikrot / PDA-laitteet.
Print	Paperitulosteet
Projection	Datasiirtoheittimet ja vastaavat
Screen	Tietokoneen näyttö
Tty	Merkkipohjaiset kuvaruudut (ei tue grafiikkaa)
Tv	TV ja vastaavanlaiset näyttömediat (matala erottelukyky ja rajoitettu vieritysmahdollisuus)

CSS-tyylin kohdentaminen määrätylle medialle

On olemassa kaksi tapaa ilmaista mille medialle tietty tyylisääntö tulisi kohdentaa.

Jos käytetään ulkoisia CSS-tyylimäärittelyjä tai upotettuja CSS-tyylimäärittelyjä, mediatyypin määrittely tapahtuu lähdedokumentissa. HTML / XHTML-dokumentissa siis elementin link tai style attribuutin media-avulla.

Esimerkki. Ulkoisen tyylimäärittelyn liittäminen asiakirjaan:

...
<head>
<link href="/tyylit/artikkelit.css" rel="stylesheet" media="screen" type="text/css"/>
<link href="/tyylit/artikkelit-print.css" rel="stylesheet" media="print" type="text/css"/>
<title>CSS opas</title>
...

Esimerkki: Upotetun tyylimäärittelyyn liittäminen asiakirjaan:

...
<head>
 <style type="text/css"  media="screen">
   <!--
   h1 {color:#DD0022;}
   -->
  </style>
  <title>CSS esimerkki</title>
</head>
...

Toinen tapa hyödyntää CSS:n at-sääntöä @media. Tässä tapauksessa mediamäärittely sijoitetaan CSS-tyylimäärittelyn sisään. Esimerkki:

@media screen {
  body {
    font:Verdana, Arial,sans-serif x-large;
   }
}

@media print {
  body {
    font:Times, "Times New Roman", serif 12pt;
  }
}

Tutustu artikkelin muihin osiin:
»»» CSS »»»Mediatyypit
»»» CSS »»»Sivutettu media - tulosteen koon määrittäminen
»»» CSS »»»Sivutettu media - tulosteen tehokas hallinta
»»» CSS »»» CSS ja ääni (nk. aural-tyylit)

CSS-opas

CSS ja mediatyypit

CSS-tyylin kohdentaminen määrätylle medialle

Tallenna tämä sivu kirjanmerkkeihin!