Päivitetty: 10.03.2003.

CSS2 + (x)HTML

Seuravaksi tarkastellaan sitä, kuinka CSS2-säännöt kiinnitetään (x)HTML-dokumenttiin, sekä kuinka näihin sääntöihin voidaan luoda mediavastaavuus. Eli CSS2:n avulla on mahdollista luoda omat säännöt eri medioille, tärkeimmät näistä tällä hetkellä ovat näyttö ja tulostin. Esittelen tällä sivulla neljä eri tekniikkaa (jaottelu on hieman keinotekoinen mutta selventävä) yhdistää CSS-säännöt haluttuihin mediatyyppeihin, jotka ovat:


CSS2 + (x)HTML

<style> -elementti

CSS-säännöt voidaan kirjoittaa suoraan (x)HTML -dokumenttiin käyttäen <style>...</style> -elementtejä. Tällöin haluttu media ilmoitetaan media-attribuutilla seuraavasti:

<head>
  <style type="text/css" media="print">
  <!--
   h3 { font-color: black }
  -->
  </style>
</head>

Eli yllä oleva CSS-sääntö kertoo että tulostettaessa h3-elementin väri on musta. Kyseinen sääntö ei ota mitään kantaa siihen kuinka h3-elementti näkyy ruudulla. Jos haluamme määritellä eri säännöt monitorille, täytyy meidän luoda uusi sääntö ja käyttää toista <style> -paria. Eli kirjoitamme uuden säännön, joka on kokonaisuudessaan:

<head>
<style type="text/css" media="print">
  <!--
   h3 { font-color: black }
  -->
</style>

<style type="text/css" media="screen, tv">
  <!--
   h3 { font-color: red }
  -->
</style>
</head>

Nyt uusittu sääntömme kertoo, että h3-elementin väri on tietokoneen näytöllä ja TV:ssä punainen. Huomaa, että eri mediat tulee erottaa toisistaan pilkulla ( , ). Eli voit luoda useita eri CSS-sääntöjä <style> -elementtien avulla, joissa media-attribuutilla määritämme haluamamme median tai mediat.

Voit helposti luoda omat määritykset tulostimelle ja näytölle. Ongelma on vain, että tämä tapa on hieman työläs sekä tehoton. Tämä ongelma tulee vastaan varsinkin jos medioita on useita, jolloin säännöt kasvavat helposti pitkiksi, samoin kun itse (x)HTML-dokumentti. Isommissa projekteissa kannattaakin käyttää ehkä ulkoista CSS-sääntöä, johon tutustutaan seuraavaksi.

<< Alkuun


<link> -elementti

Toinen jo CSS1:stä tuttu mekanismi on <link> -elementti, joka linkittää ulkoisen CSS-tiedoston (x)HTML-dokumenttiin. Myös <link> -elementti käyttää media-attribuuttia, kuten voimme seuraavaksi havaita: (esimerkeissä '...' korvaa rel="stylesheet" type="text/css" -tekstin )

<head>
<link ... media="all" href="basic.css">
<link ... media="print" href="prn.css">
<link ... media="screen, tv" href="ruutu.css">
</head>

Yllä on kolme link -elementtiä, joista jokainen linkittää yhden tyylisivun dokumenttiin. Ensimmäinen sääntö kohdistuu kaikkiin medioihin (all). Huomaa, että sama tulos olisi saavutettu vaikka media-attribuutti olisi jätetty pois. Tähän (basic.css) tiedostoon kannattaa koota kaikki sellaiset säännöt, jotka ovat jokaisessa mediassa samat.

Seuraava <link> -elementti tuo dokumenttiin tulostus.css -tiedoston, jonka tarkoitus on muotoilla tulostettava versio. Tähän tiedostoon voidaan koota sellaiset asetukset, jotka ovat optimaaliset juuri tulostusta varten. Voit esim. määrittää kaikkien elementtien väriksi mustan sekä piilottaa sellaiset elementit joita et halua tulostaa, kuten linkkejä ja kuvia.

Kolmas <link> -elementti tuo dokumenttiin ruutu.css -tiedoston, jonka määritykset kohdistuvat tietokonenäytön sekä TV:n määrityksiin. Tämä sääntö voi esim. pitää sisällään värikkäitä otsikoita ja muita värinäytölle sopivia asetuksia. Huomaa, että sääntö kohdistuu useammalle medialle, joten eri mediat erotetaan toisistaan pilkulla (screen, tv).

<< Alkuun


@import-sääntö

Myös @import-sääntö on tuttu CSS1:stä, siellä sitä kutsutaan myös at-säännöksi. CSS2 sisältää useita at-sääntöjä (mm. @import, @media ja @page), jotka eivät kaikki liity CSS-sääntöjen tuomiseen ja median määrittämiseen.

@import-sääntöä voidaan käyttää kahdella tavalla: se liitetään suoraan (x)HTML-dokumenttiin tai se sisällytetään ulkoiseen CSS-tiedostoon.

(x)HTML-dokumentissa:

@import-sääntöä voidaan käyttää (x)HTML -dokumentissa seuraavasti:

<head>
 <style type="text/css">
  <!--    
   @import url("oma.css") screen;
  --> 
 </style>
</head>

Tyylitiedoston voi tuoda myös toiselta palvelimelta, jolloin muoto on: @import url("http://www....");

Eli kyseinen sääntö tuo oma.css -tiedoston suoraan (x)HTML -dokumenttiin. Media määritellään yksinkertaisesti kirjoittamalla haluttu mediatyyppi suluissa olevan URL:n jälkeen.

Mikäli medioita on useita, tulee ne erottaa pilkulla toisistaan. Huomaa, että säännön lopussa oleva puolipiste ( ; ) on pakollinen. CSS2-spesifikaati on tarkempi @import-säännön suhteen, eikä seuraava muoto ole sallittu:

<style type="text/css">  <!-- 
 @import url("oma.css") screen;    
  h2 { color: red }
 @import url("my.css") print, tv; --> 
</style>

Tällöin my.css -tiedoston tuonti ei onnistu, tosin jotkin selaimet saattavat hyväksyä myös tämän muodon. Eli jos käytät useita @import-sääntöjä, täytyy ne olla peräkkäin heti <style> -elementin jälkeen.

CSS-tiedostossa:

@import-sääntö mahdollistaa CSS-tiedoston tuomisen suoraan toiseen CSS-tiedostoon. Myös tällöin media voidaan määritellä, tosin toimivuus nykyselaimilla voi olla heikko. Syntaksi on kuitenkin seuraava:

/* -- oma.css -- */
@import url("my.css") screen, print;
/* muut css-säännöt tähän */

Eli oma.css -tiedoston alkuun lisätty @import-sääntö tuo my.css -tiedoston, joka on tarkoitettu näytölle ja tulostuksen. Kuten jo mainitsin niin @import-säännön toimivuus on heikko ja mediavastaavuuden tuki ei toimi vain uusimmissa selaimissa. Tämä onkin hyvä tapa kiertää esim. NN 4.x selainten heikkoa CSS-tukea.

<< Alkuun


@media-sääntö

@media-sääntö on CSS2 tuoma uudistus, jonka käyttö on varsin yksinkertaista. Nimensä mukaisesti sääntö määrittää CSS-sääntöihin mediavastaavuuden. Aivan kuten @import-sääntö myös @media-sääntöä voidaan käyttää kahdella tavalla, eli suoraan (x)HTML-dokumentissa <style>...</style> -elementin avulla tai suoraan ulkoisessa CSS-tiedostossa.

(x)HTML-dokumentissa:

@mediat-sääntöä voidaan käyttää (x)HTML -dokumentissa seuraavasti:

<head>
 <style type="text/css"> 
 <!-- 
  @media print 
  {
   h3 { font-color: black }
  }
  @media screen 
  {
   h3 { font-color: red }
  }
  @media print, screen
  {
   h3 { font-size: 16pt }
  } 
  -->
 </style>
</head>

Eli yllä on kolme @media-sääntöä, jotka ovat kaikki saman <style>...</style> parin sisällä. Huomaa, että jokainen @media-sääntö tulee aaltosulkeiden väliin { ... }. Varsinaiset CSS-säännöt tulevat näiden sulkujen sisäpuolelle, tietysti omien sulkujen sisään. Vaikka säännöt ovat selkeitä käyn ne lyhyesti läpi.

Ensimmäinen sääntö määrittää h3-elementin värin, kun sivu tulostetaan. Määritys toimii myös tulostuksen esikatselussa (ainakin IE 5.5:ssä). Seuraava sääntö määrittää h3-elementin värin näytöllä. Ja viimeinen sääntö määrittää h3-elementin koon näytölle ja tulostukseen, eli eri mediat erotetaan toisistaan pilkulla.

@media-säännön käyttö on varsin yksinkertaista ja huomattavasti helpompaa kun <style> -elementin media-attribuutin käyttö. Jos käytämme muotoa <style media=""> meidän täytyy luoda jokaiselle medialle oma sääntö käyttämällä <style></style> pareja. @media-säännössä riittää yksi <style> -elementti.

CSS-tiedostossa:

Ulkoisen tyylitiedoston käyttö on aina tehokkaampaa kun sisäisen. Onneksi @media-sääntö tukee myös tätä. Muista säännöistä poiketen, @media-sääntö ei tule <link> -elementtiin vaan määritys tehdään suoraan ulkoiseen CSS-tiedostoon. Alla samat säännöt kuin yllä:

/* -- omatyyli.css -- */
@media print
 {
  h3 { font-color: black }
 } 
@media screen
 {
  h3 { font-color: red }
 } 
@media print, screen
 {
  h3 { font-size: 16pt }
 } 

Kun omatyyli.css linkitetään sitten (x)HTML-tiedostoon, käytetään siinä aivan normaalisti <link> -elementtiä:

<link rel="stylesheet" type="text/css 
href="omatyyli.css">

Huomaa, että <link> -elementti ei sisällä nyt media-attribuuttia. Sen käyttö tässä yhteydessä voi aiheuttaa koko ulkoisen CSS-säännön huomioimatta jättämisen!

<< Alkuun



© Petteri Perälä 2000 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!