[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOppaan lisäsivut > F Joitakin CSS-tiedostojen laatimisvihjeitä

F Joitakin CSS-tiedostojen laatimisvihjeitä

Aiheet

Yleistä

Tästä sivusta on Opera 4.x+:aa ajatellen erityinen "diaesitysmuoto", kun käytetään kokoruutunäyttöä (näyttötilan vaihtaminen tapahtuu esim. F11-näppäimellä).
  • CSS kannattaa määritellä mahdollisimman pitkään erillistiedostoissa. Näin se on helposti päivitettävissä.

  • Uusimmat selaimet tukevat mediatyyppejä ja -ryhmiä[S]. 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[S] 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[S]).

[Alku]

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).

[Alku]

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ä.

[Alku]

Teemat

Suunnittele niin, että suurin osa CSS:ää on yhteistä eri sivustoille. Määrittele perus CSS-tiedosto uusille selaimille (esim. basicScreen) siten, että se toimii uusilla selaimilla suhteellisen hyvin ilman JavaScript-tukea. Luo tämän jälkeen sivusto- tai selainkohtaisia tyylisivutiedostoja, esim.:

  • Väriteemoja. Jos sinulla on uusi Mozilla Gecko tai Opera 7.x -selain, voit vaihtaa (Mozilla Gecko -selaimissa View > Use Stylesheet) eri väriteemojen välillä kuten alla olevassa esimerkissä:

    <link rel="stylesheet" type="text/css" href="../Css/ThemeCSS.css" media="screen, projection" />
    <link rel="alternate stylesheet" type="text/css" href="../Css/ThemeCommon.css" media="screen" title="Yleisten sivujen väriteema" />
    <link rel="alternate stylesheet" type="text/css" href="../Css/ThemeHelp.css" media="screen" title="Apusivujen väriteema" />
  • Fonttiteemoja (font-size, font-family jne ominaisuudet).

  • Custom-tiedostoja. Suosittelen laatimaan perustiedoston täydellisesti CSS2:ta noudattavalle kuvitteelliselle selaimelle. Custom-tiedostot joko korjaavat selainten esitysvirheitä tai ne lisäävät selainkohtaisia erityispiirteitä (katso malliksi miten selaimia voidaan tunnistaa tämän sivun lähdekoodi tai toinen liitetiedosto[S]).

[Alku]

Tulostus

MS IE 5.5++ Windows ja Mozilla 1.0+ -selaimissa on minimaalinen ja Opera 4.x+ -selaimissa sangen laaja sivutetun median tuki. Kaikille em. selaimille voi määritellä page-break-after/before:avoid sivukatkojen kontrolloimiseksi. Alla on muutamia ohjeita sivukatkojen ja eräiden tulostukseen liittyvän CSS:n asettamiseksi:

  • Jaa sivut tiettyjä elementtejä käyttäen jaksoihin. Luonnollisia elementtejä tähän tarkoitukseen ovat otsikkoelementit H2-H6 riippuen siitä, mikä on sivujen pääotsikko (se on yleensä H1 or H2).

  • Laita reunustetuille erityislohkoille ja taulukoille page-break-before:avoid.

  • Voit määrittää automaattisen kontrollin Opera-selaimille väärien sivukatkojen eliminoimiseksi asettamalla elementeille tiettyjä luokkia, joille on määritelty page-break-inside:avoid.

  • Voit paljastaa Opera ja Netscape/Mozilla-selaimilla tietyt Web-osoitteen laittamalla esim. a.naytaTulostettaessa:before {content:" <" attr(href) ">"}.

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004