Yleistä

• CSS kannattaa määritellä mahdollisimman pitkään erillistiedostoissa. Näin se on helposti päivitettävissä.

• Uusimmat selaimet tukevat mediatyyppejä ja -ryhmiä. Vähintään mediatyypit screen, projection ja print tulee ottaa huomioon.

• Mediatyyppien käytössä tulee valita, käytetäänkö medialohkoja (esim. @media print {...}) vai media attribuutteja (esim. media="print").

• Ainakin Netscape 4.x -sarjalle tulee tehdä omat tyylisivut (erityissivulla on tarkemmat ohjeet).

• CSS (kuten muukin koodaus, esim. JavaScript ja DHTML) tulee suunnitella niin, että sivujen asiasisältö on saavutettavissa kaikilla selaimilla, vaikka sivujen esitysasu vaihteleekin (käsittelen toisella sivulla WWW:n perusteita).

Medialohkot

Medialohkojen edut:

• Voit luoda yhteisiä määrittelyjä eri mediatyypeille, esim.:

  @media screen, projection {
html {background-color:#603}
body {background-color:white}
}
@media print, projection {
h3.Break {page-break-before:always}
}

• Jos ryhmität sääntöjä ominaisuuksien arvojen mukaan, yhden arvon muuttaminen vaikuttaa mahdollisimman laaja-alaisesti, jolloin päivittäminen on mahdollisimman tehokasta. Esim.:

  blockquote.code, blockquote.cite, address, pre.code, div.code {border: 1px solid #603;}
code, kbd, var, blockquote.code, div.code, pre.code {background-color:#cff}

Medialohkojen haitat:

• Selain joutuu lataamaan yhden aina ison tiedoston. En ole havainnut kuitenkaan siitä johtuvia ongelmia.

• Yksittäisen kohdan löytäminen on joskus vaikeaa suuresta tiedostosta, vaikka lohkojen välillä olisi paljonkin tyhjää tilaa.

• Yksittäisen virheen huomaaminen on joskus vaikeaa. Erityisesti tulee muistaa välttää tekemästä virheitä lohkon päättävän kaarisulun kanssa. Ylimääräinen tai puuttuva kaarisulku katkaisee lohkon väärästä paikasta. Merkitse medialohkon päätös esim. seuraavalla tavalla:

  } /* mediatyyppien screen ja projection lohko päättyy tähän */

• Medialohkot eivät toimi Netscape 4.x, Opera 3.x, MS IE 4.0 Windows ja MS IE 5.x Mac -selaimissa (jotkut selaimet hyppäävät medialohkon sisällön ohitse ja toiset lukevat sisällön riippumatta siitä, mitä mediatyyppiä ne koskevat).

Erillistiedostot

Erillistiedostojen edut:

• Mikäli mediatyypit ovat omissa tiedostoissaan, yksittäisen tiedoston koko on pienempi kuin kuin yhdistetyssä tiedostossa. Muutettavan kohdan löytäminen on tällöin helpompaa.

• Selainkohtaisten piirteiden huomioiminen on helpompaa.

• Media-attribuutti (media="...") toimii myös MS IE Mac selaimissa.

Erillistiedostojen haitat:

• Erillistiedojen avulla ominaisuuksien kokonaishallinta vaikeutuu, kun yhden kohdan muuttaminen ei riitä.