[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOpassivut > 5. Mikä on CSS:n prosessointijärjestys > Porrastettu valintajärjestys (cascading order) (jakso 3/3)

Porrastettu valintajärjestys (cascading order)

Aiheet

Tavanomaiset tilanteet

Sovittamissäännöt ovat periaatteessa sangen yksinkertaisia Niihin liittyy myös porrastettu valintajärjestys (cascading order; lue termin selitys[S][Pw]). Selain saattaa kohdata samanarvoisia sääntöjä, jolloin saman arvoisista säännöistä viimeiseksi annettu jää voimaan.

Kokonaisuudessaan ominaisuuksien sovittamisen yleisperiaate on näin ollen se, että yksityiskohtaisempi sääntö voittaa yleisemmän ja viimeksi mainittu saman arvoinen sääntö voittaa aiemmin määritellyn säännön. Tässä prosessissa on muistettava myös ns. tuontisäännön (@import) oikea käyttö, jota käsittelin aiemmin sivulla Miten CSS liitetään Web-sivuihin[S][Pw].

Porrastettu valintajärjestys on osa CSS-ominaisuuksien prosessointijärjestystä. Se on kytkeytynyt hahmonsovitukseen (pattern matching). Koko systeemin voi yksinkertaistaa seuraaviin kolmeen tekijään, jotka esitän vielä alkuperäistermien kanssa:

  • Periytyminen (inheritance; CSS1 tasolla vain automaattisena ja sisältää myös CSS2 "pakkoperiytymisen")
  • Tunnistettavat hahmot: kaikki mahdolliset valitsimet toisen valitsimen kanssa ovat tunnistettavia hahmoja (matching patterns)
  • Porrastettu valintajärjestys (cascading order)

Koska nämä kolme ovat koko ajan yhtä aikaa toiminnassa, on mahdotonta yksiselitteisesti esittää yleismallia, joka kuvaisi sitä, mikä on yksityiskohtaisempi määrittely kuin joku toinen. Ennemminkin voidaan esittää esimerkkejä, mikä määrittely yksittäisessä tilanteessa ohittaa jonkun toisen määrittelyn. Sivujen tekijän täytyy miettiä, miten selain tekee ratkaisunsa. Hänen tulee myös tietää, mitä selain todella osaa toteuttaa ja mitä ei! Seuraava järjestys suuntaviivoja pyrittäessä yleisemmästä yksityiskohtaisempaan määrittelyyn. Järjestys voi olla yksittäisessä tilanteessa toinen.

  1. Yleisvalitsin ilman mitään tarkenninta.
  2. BODY-elementti ilman luokkaa.
  3. Class-tarkennettu yleisvalitsin
  4. Muu yksilöity tyyppivalitsin kuin BODY
  5. Muu yksilöity tyyppivalitsin kuin BODY luokkatarkennettuna
  6. Monimutkainen tunnistettava hahmo, jossa on mukana myös luokkatarkentimia.
  7. Id-valitsin.

Sivuntekijöiden pyrkimyksenä on varmastikin luoda mahdollisimman tehokas ja vaivaton systeemi, jossa CSS-määrityksiä tarvitaan suhteellisen vähän dokumentin BODY-osassa. Annan seuraavat suositukset:

  1. Yksi yleinen BODY-määrittely ja yleinen taulukkoelementtien kuvaus (siitä on tarkempi selitys sivulla Taukot[S][Pw]).
  2. Asiakirjakohtaisia muutoksia ajatellen erilaisia sääntöjä BODY-elementille, jolla on luokka- ja id-tarkennin.
  3. Yksittäisille tekstielementeille omat säännöt.
  4. Muut mahdolliset säännöt pyritään toteuttamaan BODY-elementistä lasketuilla tunnistettavilla hahmoilla.
  5. Dokumenttikohtaisia sääntöjä käytetään harkiten
[Alku]

Tärkeyssääntö (!important)

Normaalin järjestyksen voi ohittaa ns. eli tärkeyssäännöllä (important rule), esim:

body {color: black !important; background-color: white !important;}

Mikäli selain ei tapaa toisia samanlaisia tärkeyssääntöjä, vastaavia jälkeenpäin annettuja ominaisuuksia ei oteta huomioon. Kyse ei ole kuitenkaan vain yksinkertaisesta järjestykseen liittyvästä säännöstä. Näin määritellyt ominaisuudet ohittavat myös elementille luokkiin ja tunnistimiin (id) perustuvilla tunnistettaville hahmoille annetut sekä elementtien sisälle yksilöllisesti annetut ominaisuudet.

Sääntö koskee kuitenkin vain elementtiä ja sille annettuja ominaisuuksia, joihin se on liitetty. Jos lapsielementille on annettu poikkeava arvo, lapsielementti ottaa sen. Seuraavat esimerkit valaisevat asiaa ([M][S][Pw]):

body {color: black !important;}
body.CssSite {color:blue;}
/* värimääritys ohitetaan, vaikka BODY-elementille on määritetty luokka */
p.uusi {color:blue;} /* ensimmäinen määrittely ohitetaan elementin P osalta, sillä elementille BODY annettu määrittely ei ohita uudelleen määritellyn lapsielementin ominaisuutta (sillä, onko lapsielementille annettu luokka ei ole tässä tapauksessa mitään merkitystä) vaan tälle elementille väriarvo tulee voimaan; mutta mikäli sitä ei olisi annettu, se saisi sen tärkeyssäännön omaavalta BODY-elementiltä */
p {color:olive !important;}
/* uusi !important-sääntö kumoaa kaikki edelliset määrittelyt elementin P osalta */
p#id_p {color:blue;} /* edellisen tärkeyssääntö ohittaa tämän värimäärittelyn; samoin ensimmäisen dokumentin runko-osassa olevan määrittelyn; koska se on voimakkaampi kuin id-valitsin, se on samalla voimakkaampi kuin tunnistettaviin hahmoihin perustuvat ominaisuudet */

...
<BODY>
<P style ="color:purple;">
Saatat luulla, että tämän tekstin väri on purppuranpunainen, mutta näin ei olekaan, koska tärkeyssääntö antaa tälle värin olive. Tätäkö sinä juuri halusit?</P>
<P style ="color:purple !important;">Jos haluat, että määrittely toimii, sinun pitää laittaa siihen tärkeyssääntö!</P>

Sen vuoksi, että tärkeyssääntö ohittaa kaikki elementille määritellyt muut säännöt, katson sen olevan eräänlainen erityissääntö (termi on kuitenkin hieman ongelmallinen - ks. Alaviite 1). Sivujen suunnittelija saattaa määrätä ohitettavaksi kuvauksen, jota hän ei haluasikaan ohittaa! Koska em. sääntö tuo melkoista päänvaivaa sivujen laatijalle ja selaimelle lisätöitä, suosittelen sen käyttämistä erittäin harkitusti.

Selainkohtaisia huomautuksia:

  1. Tärkeyssääntö ei toimi Netscape 4.x -selaimilla.

  2. Näennäiselementtien :first-letter ja :first-line tärkeyssääntö liittyy vain itse elementtiin. Jos heti elementin alussa on toinen elementti (esim. >p>>cite>) lapsielementille annetut poikkeavat arvot säilyvät Opera 7.x -selaimissa tärkeyssäännön käytöstä huolimatta (esim. cite {font-weight:normal}, vaikka on p:first-letter {font-weight:bold !important}). Muilla moderneilla selaimilla näennäisluokille !important avulla annetut arvot voittavat. Mielestäni Opera 7.x toimii täysin johdonmukaisesti.

  3. Tärkeyssäännön uudelleen määrittely ei aina onnistu.

Koska CSS:llä yleisimpänä käyttökohteena voidaan pitää käytettyyn tekstityyliin vaikuttamista, käsittelemme Seuraavaksi fontin ja tekstin määrittämistapoja sekä erilaisten käyttötilanteiden huomioimista.

 
[Alku]

Alaviite 1. On ongelmallista kirjoittaa tärkeyssääntö, sillä kyseessä ei ole siinä mielessä sääntö, mitä CSS:ssä useimmiten tarkoitetaan säännöllä: ks. selitys sivulta Valitsimet[S][Pw]. Koska se on kuvauslohkon yksittäisen kuvauksen (declaration) sisällä (em. sanan merkitys on selitetty sivulla Miten CSS liitetään Web-sivuihin[S][Pw], jolloin sitä voisi kutsua tärkeyskuvaukseksi. Täsmälleen ottaen kyse on tärkeysominaisuudet (important properties), koska se liitetään juuri ominaisuuslistaan. Koska se kuitenkin luo poikkeuksellisen kuvauslohkon, jonka painoarvo riippuu CSS-säännöistä, se luo tavallaan eräänlaisen säännön. Ks. myös tämän sivun englanninkielisen version alaviite[S].

[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