[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]

Koonti 1

(Tämä koonti sisältää lyhyen sisällysluettelon ja 1-12 luetellut Opassivut. Kooste on ensisijaisesti tarkoitettu tulostettavaksi (n. 160 sivua) ja luettavaksi offline-tilassa.)

CSS-oppaan sisällysluettelo

Pidempi versio

Sivujen ryhmittelyt

Yleisinfo

[Alku]

Hakemistosivut

[Alku]

Opassivut

  1. Mikä on HTML ja XML asiakirjojen perusrakenne
  2. Miten CSS liitetään Web-sivuihin (CSS2 1, 3-4)
  3. Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat (CSS2 4)
  4. Mitä ovat valitsimet, luokat ja id-attribuutit (CSS2 5-6)
  5. Mikä on CSS:n prosessointijärjestys (CSS2 3, 5-6)
  6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille (CSS2 7, 13, 15-16, 18)
  7. Miten CSS liitetään ankkureille ja linkeille (CSS2 5)
  8. Miten CSS annetaan elementtien taustoille ja reunoille (CSS2 8, 14)
  9. Miten CSS annetaan listaelementeille (CSS2 12)
  10. Miten CSS annetaan taulukkoelementeille (CSS2 17)
  11. Mikä on CSS2:n Visuaalinen muotoilumalli (CSS 9-11)
  12. Mitä muita erityispiirteitä CSS sisältää (esim. CSS2 19, CSS3 UI)
[Alku]

Oppaan lisäsivut

  1. Mikä merkitys on Web-standardeilla
  2. Mitkä ovat CSS2-spesifikaation ongelmia
  3. Mitä käsitekaavioita ja termipuita CSS:ään liittyy
  4. Millaista epästandardia CSS:ää on olemassa
  5. Mikä on (X)HTML-elementtien semantiikka
  6. Joitakin CSS-tiedostojen laatimisvihjeitä
  7. Mitä JavaScript-temppuja CSS:n kanssa voi käyttää
  8. Miten olen itse käyttänyt sivuillani CSS:ää
  9. Miten luoda dynaamisia valikoita
  10. Mitä ovat käyttäjän tyylisivut (User style sheets)
  11. Miten XML-dokumenttien kanssa voi käyttää CSS:ää
  12. Mikä on XML:n ja XSL:n nykytilanne
  13. Millaisia ongelmia WAPpiin liittyy
  14. Millaisia CSS-totetusvirheitä selaimissa on
  15. Millaisia CSS-totetusvirheitä on MS IE -selaimissa
  16. Millaisia CSS-totetusvirheitä on Netscape/Mozilla-selaimissa
  17. Millaisia CSS-totetusvirheitä on Opera-selaimissa
  18. Millaisia CSS-editoreita on olemassa
  19. Millaista terminologiaa olen käyttänyt
[Alku]

Ehdotelmat

[Alku]

Harjoittelusivut

[Alku]

Esipuhe ja tärkeitä taustatietoja

Aiheet

Esipuhe

Alun perin sivut on tehty opetustarkoitukseen ja sivut ovat kulkeneet myös nimellä CSS-opetussivut. Nykyisin sivut toimivat lähinnä yleisenä CSS-oppaana ja aion kehittää niitä entistä enemmän opasluonteisiksi.

CSS-sivut on tarkoitettu sekä henkilöille, jotka eivät koskaan ole käyttäneet CSS:ää (ja tuskin ymmärtävät mitään HTML-kielestäkään) että ammattilaisille, jotka etsivät uusia kikkoja. Jos et ole koskaan käyttänyt CSS-määrittelyjä, älä yritä heti käyttää kaikkia mahdollisuuksia, vaan opettele asioita vähitellen. Palaa sivuille uudelleen, jos jokin asia jäi epäselväksi.

Sivuista on olemassa sekä suomen että englanninkieliset versiot (englanninkielinen versio on merkitty En). Se on kielellisesti tarkempi, sillä olen voinut kirjoittaa koko ajan alkuperäistermeillä. Voit milloin tahansa vaihtaa englanninkieliseen versioon ja siitä takaisin suomenkieliseen (merkitty En). Molemmat ovat olleet esillä W3C-organisaation CSS-sivuilla.

Suomenkieliset vierailijat ovat yhtä lukuun ottamatta pitäneet sivuston asiasisältöä hyvänä. Alla on kaksi suomenkielisen vierailijan antamaa arviota (ensimmäinen sitaatti on muistinvarainen, joten se ei ole ihan sanatarkka):

Internetin tyylikkäin sivusto kun otetaan huomioon se, kuinka paljon asiaa se sisältää...
Erittäin hyödyllinen ja hyvä opas, mistä saan opetella kaikki minua kiinnostavat kohdat nopeasti ja helposti (löytyy tarvittava tieto helposti).

Olen oppinut jo muutaman käyntikerran jälkeen aika paljon ja lisää opin joka kerta varmasti.

Ehdottomasti internetin paras CSS-opas.

Englanninkielistä versiota lukeneet käyttäjät ovat valittaneet kielellisistä virheistä, vaikka he ovat pitäneet sisältöä yleisesti ottaen hyvänä. Alla muutamia melko tyypillistä arvioita:

The English is poor (which is understandable since English is not your first language). For example, you have "Block elements should not put inside in-line elements", which should be "Block elements should not be put inside in-line elements". "Remark that in the end-tag is the forward slash" should be "Note that in the end-tag is the forward slash". There are so many small English errors like these that the text is difficult to read.
The contents are good and I have no doubt that the Finnish version is an excellent resource, but the English version is still very hard to read. Every sentence is close to being correct, but not quite. It makes reading very slow, because you have to constantly correct the grammar in your head... Nearly all sentences have errors in the word order in the correspondence between verb and subject tai they have words that are close in meaning, but not normally used in that context.
... They are the most comprehensive tutorials I have ever found on the 'Net ... I have stopped reading at section 4 because it was getting too difficult ... many of your English sentences in are quite unenglish. Some I can figure out by the context, but others take several seconds each. Their accumulation hinders the reading too much ... But I think your tutorial deserves a wide audience. Working on the language would be a big step in such direction.

Olen korjannut huomautetut virheet, mutta niitä on silti sivuillani. Olen saanut joidenkin sivujen osalta apua kielen korjaamiseksi. Toivon, että internetissä olevissa englanninkielisissä sivuissa olisi vähitellen hyvä kieli.

Yritän opettaa mahdollisimman ruohonjuuritasoisesti, jotta voisit kiivetä tyvestä latvaan. Pane mieleesi nimenomaisesti juuri puu. Kerron sinulle näillä sivuilla eräästä "puusta"!

Puu

Yksi tavoitteistani on myös edistää selainten ja sivustojen kehittelyssä reilua peliä[S].

Koska suomenkielessä ei ole olemassa virallista CSS-terminologiaa, käyttämäni terminologia saattaa poiketa jonkin verran siitä, mihin olet tottunut. Päämääränä on ollut mahdollisimman johdonmukainen ja selkeä terminologia. Käyttämieni termien suomennokset, termien selitykset, joitakin käännösperiaatteita sekä linkin käytettyjen termien perusteluihin löydät liitesivulta Käyttämäni terminologia[S].

Sivuilta löytyy harjoitustehtäviäsivu[S] sekä siihen liittyviä aputiedostoja kuten opettajan kokeilu­sivu[S] ja collected.css[S] (kootut CSS-määrittelyt; tiedosto on tarkastettu, mutta se ei sisällä viimeaikoina lisäämiäni CSS-määrittelyjä).

Olen tehnyt kaikki piirrokset Expression 2 -ohjelmalla, joka on uuden sukupolven vektoripiirrosohjelma. Pääset tutustumaan sen ominaisuuksiin piirrossivujeni kautta (navigaatiokehyksissä sivusto Art). Viivan käsittely on em. ohjelmassa todella fantastista! (Ohjelman hinta on 139$, mitä pidän edullisena niin hienosta ohjelmasta.)

W3C: W3C CSS[Pw].
Muut sivustot: Creature House Home Page.

[Alku]

Tärkeitä taustatietoja

W3C: CSS: Cascading Style Sheets, level 2 CSS2 Specification(Zip-tiedosto), CSS-validator.
Muut sivustot: CSS Enhancements in Internet Explorer 6 Public Preview, Termitalkoot, Webstandards.

[Alku]
[Alku]

1. Mikä on HTML ja XML asiakirjojen perusrakenne

Yleistä

HTML-sivujen tekeminen on helppoa. On olemassa paljon ohjelmia, joilla sivuja voi tehdä ymmärtämättä oikeastaan juuri mitään HTML-asiakirjojen koodin rakenteesta, sillä ne näyttävät sivut suoraan lähes sellaisina kuin ne näkyvät eri selaimissa (aivan tarkka tuo yhtäläisyys ei yleensä ole). Tällaisia sovelluksia nimitetään WYSIWYG-ohjelmiksi (What You See Is What You Get = mitä näet sen saat).

Web-dokumentti

Tämän tason sivujen tekeminen ei riitä, mikäli pyritään tehokkaasti käyttämään CSS:ää. On siksi ainakin suhteellisen syvällisesti ymmärrettävä HTML- ja XML-dokumenttien rakenne. Jaksot 1-4 ovat yleisluontoisia johdantosivuja HTML:n ja CSS:n ymmärtämiseen ennen tarkempia opassivuja. Käsittelen niissä ensisijaisesti HTML-koodausta ja viimeisessä jaksossa XML-koodausta. Jos HTML on sinulle ennestään tuttua, voit jättää osan jaksoista välistä ja siirtyä suoraan kohtaan HTML 4.0 + CSS ja CSS:n tavoitteet. Suosittelen kuitenkin, että luet elementtien käyttäytymiseen liittyviä kommentteja sivulta Help for TM CSS menu (kommentit ovat englanniksi).

[Alku]

Yleistä elementeistä ja HTML:n perusidea

HTML ja XML dokumentit (selostan myöhemmin, mitä XML tarkoittaa) sisältävät ns. elementtejä (elements), jotka ovat em. asiakirjojen perusrakenneosia. Elementtien ensisijaisena tarkoituksena on luoda dokumenteille selkeä rakenne (structure), joskin niillä on myös muita tehtäviä (Alaviite 1[S][Pw]). Rakenteen merkityksen ymmärtää, jos vertaa seuraavia kahta asiakirjaa:
Ilman rakennetta oleva teksti: [M][S][Pw].
Asiakirja, jonka tekstillä on yksinkertainen rakenne: [M][S][Pw].

Jotta elementit erottuisivat (asia)sisällöstä (content), niiden olemassaolo tarvitsee merkitä alku- ja yleensä myös loppukoodauksilla. Niistä käytetään englanninkielisissä teksteissä nimeä tag (start-tag ja end-tag tai muut vastaavat ilmaisut), joka sananmukaisesti tarkoittaa merkintää eli kansanomaisemmin merkkausta. Kun kyseessä on elementti, asiallisesti tarkka käännösvastine olisi elementtimerkkaus.

HTML perustuu SGML-kieleen (Standard Generalized Markup Language = standardi yleismerkintäkieli. SGML on yleinen dokumenttien rakenteen esittämiskieli, joka sisältää välineet eri dokumenttityyppien kuvaamiseksi (käsittelen dokumenttityyppiä koskevia näkökulmia tarkemmin edempänä). SGML ei ole siis merkintäkieli vaan metakieli eli tapa kuvata merkintäkieliä, jotka ovat sekä ihmisen että koneen luettavissa.

Gentle Introduction to SGML.

SGML-dokumentaatiossa kirjoitetaan elementtimerkkauksista seuraavasti (lisäsin tekstiin hieman korosteita; voit katsoa myös sanan tag selityksen[S][Pw]):

Markup that describes the structure and other attributes of a document in a non-system specific manner, independently of any processing that may be performed to it. In particular, SGML descriptive markup uses tags to express the element structure.

Elementtimerkkaukset ovat dokumentin elementtirakennetta kuvaavia ja siten kielen tärkeimpiä merkintäkoodeja (markup codes; HTML ja XML-kielissä on eräitä muitakin merkintäkoodeja, joita käsittelee Alaviite 2[S][Pw]). Jos sana tag haluttaisiin "kääntää" sen selityksen perusteella, voisimme nimittää sitä kuvausmerkinnäksi.

Elementin nimeä kutsutaan sen yleistunnisteeksi (generic identifier) ja se tarkoittaa eri asiaa kuin tag, mikä käy ilmi seuraavista SGML- ja modularisaatio­dokumentaatioiden sitaateista:

SGML:

Generic identifier (GI) = A name that identifies the element type of an element

Modularization of XHTML (Terms and Definitions):
Tag
Descriptive markup delimiting the start and end (including its generic identifier and any attributes) of an element.
W3C: CSS2: 4 CSS2 syntax and basic data types, 4.1.3[Pw].
Modularization of XHTML.

Tosiasiassa elementin nimi yhdessä rajoittimien kanssa toimii tunnistimena (mitä tarkoitetaan rajoittimilla, tulee esille elementin käsitekaaviossa[S][Pw], jossa esimerkkinä on elementti HTML). On silti terminologinen asiavirhe sanoa, että elementtimerkkaus kokonaisuudessaan on tunniste, sillä elementin alkumerkkaus saattaa sisältää useita tunnisteita (käsittelen tätä asiaa tarkemmin myöhemmin; voit tutkia asiaa myös käännösvastineen perusteluista[S][Pw]).

SGML:ssä elementtimerkkaukset eivät itsessään sisällä mitään toimintaohjetta, mutta HTML:ssä niillä on määritellyt tehtävät. Perustehtävä on kuitenkin sama kuin SGML:ssä eli kuvata dokumentin rakennetta. Nimi HTML johtuu osaltaan siitä, että aloitus- ja päätösmerkkaukset merkitsevät alueita. Siksi puhumme merkintäkielestä (markup language).

Elementtimerkkaus eli alkukielessä tag on ikään kuin "leima", joka "isketään" elementin alkuun ja mahdollisesti myös loppuun, jotta elementti varmasti erottuisi muusta koodista. Sitä voisi verrata puiden leimaamiseen. tai voit ajatella sen "lapuksi", joka laitetaan valitun sisällön alkuun ja loppuun. Toivon, että sitä havainnollistaa käyttämäni eläinvertaus. Tälle eläimelle laitetaan eräitä merkintöjä. Mutta ei toki kuvassa olevia! Asiakirjamme nimi voisi olla vaikka Lehma.html.

Lehmä, jolla on HTML elementtimerkkaukset

Toinen keskeinen merkitys on se, että elementtien avulla luodaan linkkejä. HTML suunniteltiin alun alkaen hyvin yksinkertaiseksi kieleksi luoda dokumentteja, jotka sisältävät hyperlinkkejä (hyperlinkit ovat dokumentin sisäisiä tai dokumenttien välisiä linkkejä). Tämän vuoksi puhumme HTML:n yhteydessä hypertekstistä ja HTML-kielestä (Hyper Text Markup Language = hypertekstin merkintäkieli - alunperin HTML sisälsi vain tekstilinkkejä). Itse asiassa alun alkaen muut kuin linkitykseen tarvittavat elementit olivat lähinnä vain viestinnän selkeyttämisen apukoodeja, jotta asiasisältö olisi luettavampaa ja se voisi olla selkeästi jäsenneltyä ([M][S][Pw]).

Elementit, jotka voivat saada sekä alku- että päätösmerkkaukset, voivat toimia sisällön ja toisten elementtien säilyttiminä eli "konttielementteinä" (element containers). Tällaiset elementit voivat olla emoelementtejä (parent elements) lapsielementeille (child-elements) eli elementeille, jotka ovat jonkun emoelementin alku- ja päätösmerkkauksen välissä ilman että elementtien välissä on muita elementtitasoja (käsittelen tätä näkökulmaa tarkemmin myöhemmin). Emoelementeillä voi olla sisältömalleja (content models; vastaavasti elementillä, joka on jonkun toisen elementin lapsielementti, voi olla emomalleja, parent models).

Jotkut elementit eivät voi saada päätösmerkkauksia, sillä ne eivät rajaa mitään sisältöaluetta. Tällöin niitä nimitetään "tyhjiksi elementeiksi" (empty elements). Esimerkki elementtien käytöstä (esimerkissä on elementit P= paragraph eli kappale ja BR = pakotettu rivikatko), joka näkyy seuraavanlaisena ns. lähdekoodia (source code) katsomalla ([M][S][Pw]):

<P>Tämä teksti on aloitus-<BR> ja päätösmerkkausten välissä,<BR> mutta välissä on eräitä BR-elementtejä,<BR> jotka aiheuttavat ylimääräisiä rivikatkoja.</P>
[Alku]
 

Alaviite 1. Jotkut käyttävät elementeistä nimitystä komento, mitä en pidä onnistuneena. Se antaa niistä liian aktiivisen mielikuvan. Elementeillä voi olla HTML ja XML dokumenteissa kuitenkin sangen passiviinen rooli, vaikka on niitäkin elementtejä, jotka suorittavat käyttäjän aktivoivan komennon. Koska elementeillä on hyvin monenlaisia käyttötarkoituksia, pitäydyn neutraaliin ilmaisuun. Sana elementti antaa mielestäni paremman kuvan siitä, että elementit ovat kielen rakenneosia. Tällainen tehtävä niillä on kaikissa merkintäkielissä. Lisäksi käyttämäni termi on täysin läpinäkyvä, jolloin lukijan on helppo siirtyä suomenkielisestä tekstistä englanninkielisten spesifikaatioiden pariin.

Alaviite 2. Esimerkkinä HTML standardi dokumenttityypistä on http://www.w3.org/TR/REC-html40/loose.dtd. Selain ei tarvitse tietoa käytetystä dokumenttityypistä. Tiedostoa ei voi tarkistuttaa ilman, että asiakirjassa on käytettyihin elementteihin ja attribuutteihin viittaava DTD-ilmoitus, esim.: <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">. DTD:ssä määriteltävät kuvaukset (declarations) ja niiden muoto (... = jonkin kuvauksen sisältö):

W3C: loose.dtd (HTML 4.01).

 

Elementit, <!ELEMENT ... >
Attribuuttilistat, <!ATTLIST ... >
Parametrientiteetit (parameter entities). Kyseessä ovat ns. DTD-makrot, joilla kootaan yhteen DTD-tiedostoissa käytetyjä arvoja, attribuutteja ja elementtejä, esim. <!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">. Selitän niiden käyttöä eräässä parissa englanninkielisessä sivussa (Help for HTML All[S] ja Help for TM ../HTMLKit/wappush[S]). Yritän löytää termiluetteloon[S][Pw] termille mielekkään suomenkielisen vastineen.
Henri Ruini: XML sanasto[Pw].

Yleisentiteetit (common entities/ general entities), esim. <!ENTITY amp "&#38;#38;">. HTML-dokumenteissa näitä ovat eräät sovitut koodien merkintätavat, jotka on standardi DTD-tiedostoissa joko lueteltu tai ne on löydettävissä viitatuista osoitteista. Niitä tarvitaan esim. esittämään tämä merkki näytöllä <. Kyseistä merkkiä tarvitaan koodaukseen. Sen näyttäminen tekstinä tulee toteuttaa erityiskoodauksella, joka alkaa &-merkillä, keskellä lukee lt ja se päättyy ; - merkkiin. Aksentoidut kirjaimet tulisi aina merkitä entiteetteinä, esim. ä = &auml; ja ç = &ccedil; (espanjalais-portugalilainen kirjain). Tekstiä, jossa entiteetit käännetään tietyiksi kirjaimiksi, kutsutaan nimellä PCDATA (Parsed Character Data; katso myös selitys viittaukselle #PCDATA[S]).
 

Koodin sisällä käytetyt entiteetit sekä kommentit ovat viittaamiani muita merkintäkoodeja.
Merkintäkoodit (markup codes) = elementtimerkkaukset, kommenttimerkkaukset, yleisentiteetit. Lisäksi XML käyttää merkkausta <![CDATA[ ja ]]>, joka vaihtaa moodin. Merkkauksen sisällä oleva koodi käsitellään sellaisenaan, ilman jäsentelyä (CDATA = Character Data). Eräät käytöstä poistuneet HTML 2.0 ja HTML 3.2 -elementit[S] toteuttavat joillakin selaimilla saman asian.

[Alku]

Lohko- ja rivinsisäiselementit

Sen lisäksi, että elementit on luokittelu normaaleihin ja tyhjiin elementteihin, HTML:ssä on olemassa myös toinen perusluokittelu: lohkoelementit (tarkemmin sanottuna lohkotason elementit, block level elements) ja rivinsisäiselementit (tarkemmin sanottna rivinsisäistason elementit, inline level elements). Lohkoelementin kohdalla selain luo elementin ympärille ikään kuin näkymättömän suorakaiteen muotoisen laatikon (box) eli lohkon. CSS1 spesifikaatioissa sanotaan lohkoelementeistä, että niitä ennen ja niiden jälkeen on rivikatko.

Lohkoelementit voidaan luokitella joihinkin alaluokkiin. Yleisiä lohkoelementtejä ovat H1-H6, P, BLOCKQUOTE, OL, UL ja TABLE. Lohkoelementit voivat yleensä sisältää toisia lohkoelementtejä (eräitä rajoituksia on kuitenkin olemassa, joihin en tässä puutu) ja rivinsisäiselementtejä. Tämäkin teksti on lohkoelementin sisällä. Lohkoelementit toimivat ensisijaisesti asiasisällön jäsentely-, ryhmittely- ja rakenne-elementteinä (structural elements).

Rivinsisäiselementtejä on kahdentyyppisiä. Ensinnäkin erilaiset tekstiin liittyvät rivinsisäiselementit, esim. B ja I, joita voidaan pitää esitysasullisina elementteinä (inline presentational). Useimmilla tämän ryhmän elementeillä on tietty semanttinen (semantic = merkitysopillinen) sisältö. Em. elementit voidaan ilmaista myös semanttista puolta kuvaavilla elementeillä EM (emphasized = painotteinen) ja STRONG. Näitä elementtejä voisi kutsua rivinsisäisiksi fraasielementeiksi (inline phrasal). Tällaiset rivinsisäiselementit voivat olla rajoituksetta keskenään sisäkkäisiä (nested).

W3C: Modularization of XHTML (käytetyt termit).

Ne eivät luo ympärilleen lohkoelementtien tavoin suorakaiteen muotoisia laatikoita vaan elementit liikkuvat rivin mukana. Ne käyttäytyvät kuin rivillä oleva fraasi. Tekstiin vaikuttavia rivinsisäiselementtejä käytetään ensisijaisesti korostamaan jotain asiasisällön kohtaa.

Opiskeluaikana monet pistivät kirjoihinsa keltaisella paksulla tussilla merkkauksia. Käytän samaan tapaan elementtiä CODE, jonka avulla merkitsen sinisellä vain lähdekoodissa näkyvät merkintäkoodit - huomaa, että tässä lauseessa olevat korosteiset sanat ovat rivinsisäiselementtejä (CODE ja STRONG).

Kuva elementtimerkkauksesta

Myös linkitykseen käytetty erityiselementti A (sanasta Anchor = ankkuri) kuuluu rivinsisäiselementteihin. Se käyttäytyy tekstiin vaikuttavien elementtien tavoin, mutta sen rajoituksena on se, että linkitykseen käytetyt elementit eivät saa olla sisäkkäisiä.

Toiseksi on olemassa rivinsisäiselementtejä, jotka luovat ympärilleen yhtenäisen laatikon, mutta jotka kuitenkin liikkuvat rivin mukana toisin kuin lohkoelementit. Näitä elementtejä voisi käyttäytymisen perusteella nimittää rivinsisäislohkoelementeiksi (inline block elements). Eräät tyhjät elementit ovat luonteeltaan rivinsisäiselementtejä ja ne käyttäytyvät juuri tällä tavoin (kuten IMG = kuva).

Yleisesti ottaen rivinsisäiselementtejä tulisi yleensä käyttää vain lohkoelementtien sisällä. Tosin jotkin HTML-versiot sallivat niiden käyttämisen yksinäänkin, mutta niiden käyttö tällä tavoin ei ole suositeltavaa.

Lohko- ja rivinsisäiselementit tulisi sijoittaa toisiinsa nähden oikein. Elementtien väärinkäyttö on yleistä. Vaikka selaimet hyväksyvät jonkin verran elementtien väärää sijoittelua, se voi kuitenkin aiheuttaa ennalta odottamatonta virhekäyttäytymistä ja jopa kaataa selaimen. Voit opetella lohko- ja rivinsisäiselementtien oikeaa käyttöä englanninkielisistä eri spesifikaatioita käsittelevistä nooteista[S] ja taulukoista[S]. Myös tälle sivustolle määrittelemäni semantiikka[S] opettaa jonkin verran elementtien oikeaa käyttöä.

[Alku]

Dokumenttipuu

Elementeistä muodostetaan asiakirjoille ns. dokumenttipuu (document tree), jossa on yksi ns. juurielementti (root element), joka HTML-asiakirjoissa on HTML (XML-dokumenteissa se voi olla jokin muukin elementti).

Juurielementin sisällä on piilotieto-osa, jonka kokoavana elementtinä on HEAD. Tässä käytetty vertauskuva vaihtuu vartaloon ja head tarkoittaa päätä (emme suomenkielessä voi kuitenkaan kirjoittaa (dokumentin) pääosa, joten meidän tulee tyytyä kirjoittamaan (dokumentin) HEAD-osasta). Sen lisäksi, että joillakin elementeillä on pää ja vartalo, niillä on myös "jalkaosa" (kuten TFOOT = table foot(er) = taulukon (ei-pakollinen) jalkaosa). Sinun tulee nyt ajatella seisovaa ihmistä - tai ajattele lehmäämme istumassa takajalkojensa varassa. Kuten olet varmaan jo huomannut, silloin kun dokumentissa olevista elementeistä käytetään vertauskuvia, niitä tarkastellaan lopusta alkuun päin tai suoraan edestä päin.

Head-osan sisällä olevat elementit sisältävät esim. erilaisia piilotiedotteita sekä mahdollisesti dokumentin runko-osaan vaikuttavia ohjelmointikoodauksia. Ainoa mikä HTML-asiakirjoissa normaalisti näkyy kyseisestä osasta selaimen käyttäjille on selainikkunassa näkyvä dokumentin kutsumanimi, joka on elementin TITLE sisällä.

Dokumentin näkyvä osa on nimeltään runko-osa (suomenkielessä on parempi kirjoittaa rungosta kuin vartalosta) ja sen kokoavana elementtinä on BODY. Sellaiset runko-osan elementit, joilla on alku- ja loppumerkinnät, voivat koota sisälleen toisia elementtejä ja muodostaan hyvinkin monimutkaisia sisäkkäisiä rakenteita. Ne ovat kuin dokumenttipuun näkyviä "oksia". Tällä tavoin puu symbolisoi dokumentin olemusta.

Puu

Seuraavaksi esimerkki yksinkertaisesta dokumenttipuusta, jossa dokumentin runko koostuu yleisistä lohkoelementeistä; laitoin mukaan myös sisennetyt elementtimerkkaukset, jolloin voit ymmärtää, miten elementit ovat keskenään sisäkkäin:

HTML  - HEAD 

-META (ei-välttämätöntä (implied) piilotietoa sisältävä elementti lähinnä hakurobotteja varten)
-TITLE (vaadittu (required) elementti)

- BODY  - H1 (pääotsikko, jonka sisään laitetaan rivinsisäiselementtejä)
- P (kappale, jonka sisään voi sijoittaa rivinsisäiselementtejä)
- BLOCKQUOTE (sisennetty lohkositaatti, jonka sisään voi sijoittaa toisia lohkoelementtejä or rivinsisäiselementtejä, esim. B)
- OL (järjestetty lista, joka on eräs lohkoelementtien alaluokka )
- LI (yksittäinen listaelementti)
- LI (toinen listaelementti; listojen sisälle voi sijoittaa uusia listoja ja luoda siten "alaoksia")
 
<HTML>
   <HEAD>
      <META>
      <TITLE></TITLE>
   </HEAD>

   <BODY> 
         <H1></H1>
         <P></P>
         <P></P>
         <BLOCKQUOTE></BLOCKQUOTE>
         <OL>
            <LI></LI>
            <LI></LI>
         </OL>
   </BODY>
</HTML>

Tästä dokumenttipuusta on myös mallisivu: [M][S][Pw].

W3C: CSS2: 3 Conformance: Requirements and Recommendations[Pw].

[Alku]

Dokumenttien kokonaisrakenne

Aiheet

Attribuutit, kuvausilmoitukset ja kommentit

Elementeillä voi olla myös lisämääritteitä, ns. attribuutteja (attributes), jotka sijoitetaan elementin alkumerkkauksen sisään.

Attribuuteilla on monenlaisia tehtäviä. Niitä käytetään esim. tarkentamaan elementin esitysasua (presentation). Linkit toteutetaan yleensä elementin A erityisattribuuttien avulla (href, id ja name).

Koska tyhjät elementit eivät voi toimia säilytinelementteinä, ne voivat saada jonkinlaisen sisällön vain attribuuttiensa avulla. Joissakin tapauksissa elementti korvataan viitatulla sisällöllä. Esim. elementti IMG korvataan kuvalla, johon attribuutti src viittaa (tällaista elementtiä kutsutaan nimityksellä korvattava rivinsisäiselementti, replaced inline (level) element - muut ovat tietenkin ei-korvattavia rivinsisäiselementtejä, non-replaced inline level elements).

Yksittäisillä attribuuteilla on arvoja (values). HTML 3.2 dokumentissa elementille P voi olla esim. attribuutti align="center", joka tarkoittaa keskitä kappale ([M][S][Pw]):

<P align="center">Tässä on tavallinen kappale, joka on keskitetty kuten tämä esimerkkikappale käyttäen attribuuttia align="center".</P>

Selvyyden vuoksi pyrin siihen, että tekstissä ja esimerkeissä elementit on merkitty isolla kirjaimella (esim. BLOCKQUOTE) ja kaikki attribuutit ja niiden määrittelyt pienellä kirjaimella (esim. style=" ... ").

On kuitenkin kaksi poikkeusta. Dokumenttityypin kuvausilmoitus on isolla kirjaimilla, koska se on yleinen tapa. Se ei kuulu dokumentin varsinaiseen rakenteeseen. Mikäli ilmoitus sisältää tiedostonimen, se antaa selaimelle mahdollisuuden ladata DTD-tiedosto tietokoneen muistiin. Erilaisille validaattori ohjelmille tieto on välttämätön. Alkuerottimessa on huutomerkki (<!DOCTYPE ... >).

W3C on luonut HTML -dokumenteille ns. DTD-tiedostot (Document Type Definition = dokumenttityyppimäärittely), jotka sisältävät tiedot elementeistä ja käytetyistä attribuuteista sekä tiedon siitä, millaisia rakenteita dokumentissa sallitaan.

Dokumenttityypin kuvausilmoitus on kuin lehmän korvamerkkaus (eartag). Lehmä ei tarvitse korvamerkintää, mutta sen isäntä (ja viranomaiset) tarvitsee. Selain osaa ne ilman ilmoitustakin, mutta periaatteessa juuri dokumenttityyppi ilmoittaa sen kielen, jolla dokumentti on kirjoitettu (kuten aiemmin on tullut esille, määrittelykielenähän HTML-dokumenteissa on SGML).

Lehmä, jolla on korvamerkinnät

XML-dokumentit sen sijaan saattavat tarvita dokumenttityyppi-ilmoitusta, sillä sivujen tekijä voi luoda oman dokumenttityyppikuvauksen. XML-dokumenteissa korvamerkintää vastaakin <?xml version="1.0"?>. Käytän viitatessani XML-elementteihin pieniä kirjaimia.

Kommenteissa käytetään seuraavan kaltaisia merkitsemistapoja, joita olen itsekin käyttänyt esimerkeissäni (katso kommentin käsitekaavio[S][Pw]):

/* tämä on CSS-kommentti, joka CSS-määrittelyjä ymmärtävillä selaimilla selvyyden vuoksi pitäisi näkyä vihreänä */
<!--
merkitsen myös mahdolliset HTML-kommenttien aloitus- ja päätösmerkit vihreällä -->

Dokumentin osasten merkitys

Yksinkertainen HTML dokumentti koostuu vain elementeistä, attribuuteista sekä sisällöstä, jossa käytetään erityiskirjaimille omia merkintäkoodeja (lue Alaviite 2[S][Pw], jos haluat tietää tarkemmin asiasta).

Dokumentin osaset luovat asiakirjoille seuraavat perustekijät (esitän ne siinä tärkeysjärjestyksessä, minkä katson niillä olleen ensimmäisissä HTML-dokumenteissa):

  • Sisältö (content)
  • Rakenne (structure)
  • Linkitys (linking)
  • Semantiikka (semantics)
  • Esitysasu (presentation)

HTML:n alkuperäinen idea on, että se on ensisijaisesti rakenne- ja semantiikkakieli, ei esitysasukieli, vaikka muutamat elementit voidaan ymmärtää esitysasullisina elementteinä. Seuraavassa jaksossa käydään lävitse hieman eri HTML:n historiaa.

[Alku]

Esi-HTML:stä HTML 3.2:een

Ensimmäiset HTML asiakirjat olivat hyvin yksinkertaisia dokumentteja, joissa oli vähän elementtejä ja attribuutteja. Elementit loivat lähinnä yksinkertaisen rakenteen. Koska mitään virallisia spesifikaatioita ei ollut, ensimmäisiä nykyistä HTML:ää muistuttavia koodauksia voidaan kaiketi kutsua "esi-HTML:ksi".

Ensimmäiset Web-dokumentit

Rakenne-elementtien lisäksi jotkut elementit olivat semanttisia (esim. STRONG), mutta esitysasua kuvaavia elementtejä ei Dan Connollyn ensimmäisessä DTD:ssä ollut. Sen sijaan W3C:n hakemistossa, joka käsittelee ensimmäisiä HTML-dokumentteja on käytetty elementtejä B ja I (niidenkin käytön voi ymmärtää osittain semanttisesti). Ensimmäiset dokumentit eivät sisältäneet lainkaan kuvia eikä fonttimäärittelyjä, sillä dokumenttien tuli olla käyttöympäristöstä riippumattomia, kuten seuraavasta sitaatista käy ilmi:

It is required that HTML be a common language between all platforms. This implies no device-specific markup, tai anything which requires control over fonts tai colors, for example. This is in keeping with the SGML ideal.

Tutustu varhaisien HTML-versioiden historiaan sivun Help for HTML All johdanto-osa Document types[S]avulla.

W3C: HTML Home page[Pw]; esimerkkihakemisto.
Muita sivustoja: Dan Connollyn ensimmäinen DTD, Dmitry Kirsanov.

HTML 2.0 toi jo mahdollisuuden käyttää kuvia, mutta elementtien ja attribuuttien määrä pysyi sangen pienenä. Vähitellen niihin haluttiin yhä lisää tekstinkäsittelyohjelmien (kuten Word, WordPerfect) tapaisia muotoiluja ja lisäelementtejä, jolloin elementtien ja attribuuttien määrää kasvatettiin, mikä näkyy HTML 3.2:ssa.

HTML 3.2:ssa kaikki attribuutit liitettiin aikaisempien versioiden tapaan elementtien sisään ja siten myös osaksi asiakirjan runkoa (BODY). Sisältö, rakenne ja esittäminen ovat yleensä samassa dokumentissa lukuun ottamatta linkitettyjä kuvia ja ns. upotettuja (embed) elementtejä (kuten esim. ns. Java-kielellä tehtyjä pienoissovelluksia (applets), joita en käsittele näillä sivulla lainkaan). Tällaisen HTML asiakirjan luominen on erittäin helppoa. Ongelmana on muotoilun staattisuus - kerran tehtyjä muotoiluja voi olla hidasta muuttaa jälkikäteen varsinkin, jos esitysasua kuvaavia elementtejä ja attribuutteja on paljon!

HTML 3.2 johti HTML:n käytön harhapoluille. HTML:ää itseään pyrittiin käyttämään sivuntaittokielenä (layout language), mihin sitä ei oltu alunperin suunniteltu ja mihin se soveltuu huonosti. HTML 3.2 oli väliaikaisratkaisu, josta ei koskaan pitänyt tulla niin yleisesti käytetty sivuntekotapa kuin siitä käytännössä tuli.

Tosin jos sivu muodostetaan automaattisesti generoituna tietokannasta (esim. Java-servleteillä (servlets) tai Perl -skripteillä), HTML 3.2 toimii ihan hyvin, sillä esim. automaattisesti luotu linkkilista tarvitsee vain yhden pohjatiedoston. HTML 3.2:lla ei kuitenkaan saa tehtyä kaikkea sitä, mihin CSS pystyy. Lisäksi CSS:ää käytettäessä lopullisen koodin määrä on useimmiten selvästi pienempi, jolloin sivut voivat latautua nopeammin.

Suurin etu CSS:llä saavutetaankin käsinkirjoitetuissa laajoissa opetus- ja opassivustoissa, kuten CSS-sivuissani. Toiseksi suurin etu on sivustoissa, joissa osa tuotetaan automaattisesti ja osa käsin. Joku voi tehdä automaattisesti tuotetun osa, joku toinen voi tehdä käsin kirjoitetut osan ja joku kolmas voi CSS:n avulla määritellä yhteisen esitysasun.

[Alku]

HTML 4.0 + CSS ja CSS:n tavoitteet

HTML 4.0:n ja CSS:n avulla sisältö ja sen ulko- eli esitysasu (esittämistapa) voidaan eriyttää osittain or lähes kokonaan toisistaan käyttäen CSS-koodausta. Lyhenne CSS tarkoittaa seuraavaa (käsitteet ovat loogisessa järjestyksessä):

  1. Style = tyyli eli elementtien ulkoasun esittäminen käyttäen erityisiä tyylikuvauksia ja -sääntöjä (käsittelen niitä tarkemmin edempänä).
  2. Style Sheets = kirjaimellisesti tyyliarkit = tyylikuvaukset ja -säännöt kootaan "tyyliarkeiksi" eli tyylisivuiksi (nykyisin tyylisivu on standardiksi muodostunut sanan sheet vastine, mitä voi pitää oikeutettuna, sillä arkkikin on sivu); yksittäinen tyylisivu on paikka, jossa on yksi tai useampia varsinaisia or loogisia tyylisääntöjä, jotka määrittelevät dokumentin esitysasun (spesifikaatioissa on hieman epätarkat määritelmät; lue Alaviite 1[S][Pw]).
  3. Cascading = tyylisivut voidaan kytkeä toisiinsa ja alistaa eli ikään kuin limittää tai porrastaa keskenään. Juuri siksi käsittelemme Cascading Style Sheets -määrittelyjä, emme vain style tai style sheet määrittelyjä. Suomennan sen tilanteesta riippuen joko limitetyt tyylisivut tai porrastetut tyylisivut. Nämä käännökset ovat sopusoinnussa W3C-organisaation logon kanssa!
    CSS-logo - hae se!
Porrastetut tyylisivut

CSS:ssä on kyse useiden, eri lähteistä peräisin olevien tyylikuvauksien ja -sääntöjen soveltamisesta samanaikaisesti. Tämän vuoksi spesifikaatio kirjoittaa sheets monikossa ja suomenkielessä tulee käyttää monikkomuotoista ilmausta arkit. Tyylisäännöillä on toisiinsa nähden ikään kuin porrastetut, tarkoin säädellyt painoarvot (weigth).

CSS ei ole täyspiirteinen kieli, sillä se toimii vain toisten kielten apukielenä (yleisimmin HTML, XML ja XSL). Se ei se sisällä lainkaan HTML:n kaltaisia elementtimerkkauksia. CSS:n käyttöä voi verrata pikemminkin JavaScript ja ECMAScript ohjelmointikieliin, joita kutsutaan nimellä scripting languages. Sekä JavaScript-kieltä että CSS:ää voidaan käyttää dokumentin runko-osassa hyvin lyhyinä koodikatkelmina. CSS ei ole kuitenkaan ohjelmointikieli, vaikka sen syntaksi on niiden perua.

CSS1 on rajoitettu mekanismi käyttää erilaisia tyylejä Web-asiakirjoissa ja se on siten rajoittunut muotoilukieli (formatting language). CSS1:tä ei voi pitää varsinaisena sivuntaittokielenä.

Sen sijaan CSS2 on jo lähes täysipainoinen sivuntaittokieli, sillä sen avulla pystyy luomaan suurimman osan Web-dokumenttien tarvitsemista muotoiluista ja sivujen tarvitsemista kontrolleista. Tosin eräitä puutteita siinäkin on. Nämä puutteet pyritään korjaamaan CSS3:ssa[S]. Muotoilu merkitsee ensisijaisesti visuaalista muotoilua (visual formatting). CSS on kuitenkin monessa muussakin mielessä muotoilukieli.

Jos selain toteuttaisi täysin CSS2:n, kielellä voisi teoriassa määritellä useimpien HTML:n rakenneosien eli elementtien muotoilupiirteet kokonaan uudestaan. CSS käyttäisi tällöin HTML-elementtejä lähinnä vain merkkauskoodeina. HTML itsessään ei toimisi juuri lainkaan muotoilukielenä. Elementtien todellista järjestystä CSS:llä ei tosin pysty muuttamaan (kylläkin poistamaan elementtejä näytöltä tai sijoittamaan ne toisiin paikkoihin - miten se tapahtuu selviää myöhemmin).

Muotoilu- ja sivuntaittokielen keinoin CSS2 pyrkii seuraaviin tavoitteisiin:

  1. Sisältö ja sen esittäminen voidaan irrottaa toisistaan.

  2. Muotoilukeinoja käyttäen voidaan muuttaa myös dokumentin rakennetta. CSS ei ole kuitenkaan keino irrottaa rakenne ja sisältö kokonaan toisistaan, koska se ei kykene muuttamaan elementtien todellista järjestystä.

  3. Sillä voidaan luoda tarkempia ja monipuolisempia esitysasumäärittelyjä elementeille kuin mitä HTML-kielellä yksinään on mahdollista.

  4. Tiedostot voivat olla alaspäin yhteensopivia.

  5. Perusasiakirjat voivat olla rakenteeltaan hyvin yksinkertaisia.

  6. Sama asiakirja voidaan tarjota hyvin erilaisena erilaisille laitteille. Visuaalisen esittämisen sijaan tiedot voidaan syöttää näkövammaisia ajatellen erityiskirjoittimille tai puhesyntetisaattoreille. Tällöin kyseessä on kuuloon ja kosketukseen perustuva dokumenttien muotoilu.

  7. CSS-tiedostoja voidaan käyttää muissakin kuin HTML-asiakirjoissa, kuten XML-asiakirjoissa.

CSS mahdollistaa palaamisen HTML:n alkuperäiseen ideaan eli paluu juurille! äärimmilleen vietynä HTML 4.0 asiakirja ei itsessään sisällä ainuttakaan esitysasua kuvaavaa attribuuttia, vaan lähinnä rakenne- ja linkityselementtejä ja -attribuutteja. Sellaisia elementtejä ja attribuutteja, jotka koskevat puhtaasti tekstin esittämistyyliä (kuten esim. elementtejä FONT, B, I, U ja attribuutteja align, bgcolor) ei käytetä. Osa em. elementeistä ovat sinänsä sallittuja, mutta ne ovat joka tapauksessa ei-suositeltavia, sillä elementtien ensisijaisena tarkoituksena on ilmaista dokumenttien rakenne ja semantiikka, ei sen esitystapa. Tämä sivu ei käytä edes sallittuja esitysasullisia elementtejä.

Muotoilut linkitetään useimmiten pääosin erillistiedostoon käyttäen muotoa <LINK rel="stylesheet" type="text/css" href="tyylisivutiedosto.css"> kuten tässä esimerkissä ([M][S][Pw]):

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="tyylisivutiedosto.css">
<TITLE>
Asiakirjan otsikko</TITLE>
</HEAD>
<BODY>
<H2>
Otsikkoteksti</H2>
<P>
Kappale</P>
<P>
Toinen kappale. <A href="html_asiakirja.html">Linkki</A >. Ainoat välttämättä tarvittavat attribuutit ovat linkit sekä mahdolliset linkitettävät objektit kuten kuvat.</P>
</BODY>
</HTML>

Tiedostossa tyylisivutiedosto.css kuvataan, miten esim. elementti H2 näytetään tietokoneruudulla. Sama koskee tätä dokumenttia. CSS mahdollistaa korvata HTML 3.2 tyyliset dokumentin esitysasua koskevat attribuuttimäärittelyt paljon rikkaammalla tavalla esittää asiakirjan ulkoasu.

Lopputuloksena voi olla äärimmäisen pelkistetty, vähän koodia sisältävä ja nopeasti latautuva asiakirja, joka on kaikesta huolimatta hyvin näyttävä selaimelle, joka ymmärtää CSS:ää - mutta samalla äärimmäisen karu selaimelle, joka ei sitä ymmärrä. Todellisuudessa esim. Netscape 3.x pudotetaan ulkonäön esittämisen suhteen lähes alkuajan selainten tasolle. Tätä on HTML 4.0 Strict (strict= ankara, tinkimätön)!

Vaikka rakenne on pääosin itse asiakirjassa, siihen voidaan periaatteessa joiltakin osin vaikuttaa myös CSS:n avulla. Koska elementtien ulkoasun määrittelyt ovat erillistiedostossa, sivuston ulkoasun ja eräiden rakenteiden muuttaminen on äärimmäisen helppoa! Sivun tekijän (author) ei tarvitse uudestaan koodata yksittäisiä elementtejä. Minimitapauksessa riittää, että muutat vain muutaman kirjainmerkin ja tuhansien sivujen ulkoasu muuttuu kerralla!

On mahdollista luoda myös löysiä (loose), HTML 4.0 Transitional asiakirjoja. Transitional tarkoittaa "murrosvaiheen" dokumenttityyppimäärittelyä. Asiakirja sisältää muotoiluja, jotka HTML 4.0:ssa strict ei tarvita ja jotka siinä voidaan korvata CSS:llä. Tällaiset määrittelyt katsotaan vähitellen poistuviksi ja korvautuviksi. Paremman yhteensopivuuden vuoksi niitä käytetään vanhempia selaimia varten. Tosin poistuvuuden suhteen olen hieman eri mieltä kuin jyrkimmät CSS:n käyttäjät. Monin paikoin on joustavampaa käyttää HTML 3.2 attribuutteja kuin CSS:ää.

Tämä dokumentti on lähes strict-kriteerit täyttävä. Olen käyttänyt dokumentin varsinaisessa asiaosassa lähes yksinomaan sellaisia elementtejä ja attribuutteja, jotka on mainittu HTML 4.0 strict.dtd asiakirjassa (sen sijaan yksittäisissä linkkeissä ja linkkikokonaisuuksissa on strict-dokumenttityyppiin kuulumattomia elementtejä ja attribuutteja, joihin kuuluu elementille A annettu attribuutti target; lue viimeksi mainittuun attribuuttiin liittyvä Alaviite 2[S][Pw]). Tämän dokumentin näyttäminen riippuu vanhoilla selaimilla niiden oletusasetuksista ja käyttäjän niihin tekemistä mahdollisista muutoksista. Testaa ero! Vertaa tiedostoa tyylisivun kanssa ([S][Pw]) ja ilman sitä ([S][Pw]). Jälkimmäinen on kuin HTML 2.0 asiakirja.

Huomautus. HTML 4.01 (HTML 4.0:n korjattu versio) ja CSS2 spesifikaatiot on suunniteltu toteuttamiskelpoisiksi. Selaimen pitää toimia mahdollisimman pitkälle niin, että sen tukemat spesifikaatiot pääsevät toteutumaan. On kuitenkin muistettava se, että HTML ja CSS spesifikaatiot kehittyvät ja niiden kesken tulee olla priorisointi.

Jos eri spesifikaatioiden välillä ilmenee ristiriitoja, toimitaan selaimen tukeman uusimman spesifikaation mukaan. Vanhempia spesifikaatioita toteutetaan siinä määrin kuin niitä voidaan toteuttaa aiheuttamatta ristiriitaa uudempien kanssa.

Koska CSS:n perusideana muualta käsin (kuten erillistiedostoista) pystyä poistamaan tai muuttamaan minkä tahansa esitysasua koskevan HTML-elementin tai -attribuutin vaikutusta, CSS:lle pitää antaa suhteessa HTML:ään etusija, mikäli sekä HTML että vastaava CSS on annettu tai HTML ylipäätänsä käsittelee jollakin tavalla samoja esitysasullisia piirteitä kuin CSS.

Käyn lävitse näillä sivuilla seuraavia asioita:

  1. Yritän tällä sivulla selittää, mitä ovat tyylisivut.

  2. Sivulla 2 käsittelen sitä, missä niitä voidaan määritellä. Annan joitakin käytännön esimerkkejä yksinkertaisista tyylisivuista.

  3. Sivulla kolme käsittelen mahdollisia mittayksiköitä ja värejä.

  4. Sivuilla 4-5 käsittelen sitä, milloin käyttäjäsovellukset (UA = User agents, useimmiten WWW-selaimet) käsittelevät niitä lopullisessa prosessissa.

  5. Sivut 6-9 käsittelevät sivun yksityiskohtia (fontit, ankkurit ja linkit, tausta, reunukset ja listat).

  6. Sivut 10-11 käsittelevät dokumentin perusrakenteiden hallintaa.

  7. Sivu 12 on vilaus tulevaisuuteen.

Seuraava jakso käsittelee HTML 4.01:n jälkeisiä XHTML-spesifikaatiota sekä XML-dokumentteja. Mikäli et ole niistä kiinnostunut, voit hypätä sivulle 2.

John Allsop: The key ideas of CSS[Pw].
Keijo Kortelainen: Tyylimäärittelyjen käytöstä aiheutuvat hyödyt ja haitat.

[Alku]
 

Alaviite 1. Seuraavat spesifikaatioiden määritelmät vaativat vähän selittämistä:

CSS1:
a collection of rules
CSS2:
A set of statements that specify presentation of a document.

Yksittäinen tyylisivu ei sisällä välttämättä useaa sääntöä eli sääntö- tai lausekokoelmaa (a collection of rules (sama kuin a rule set) tai a set of statements). Yksinkertaisimmillaan se sisältää joko yhden säännön tai se ei sisällä lainkaan varsinaista sääntöä, esim. style="color:blue". Tällaisessa tapauksessakin on kuitenkin kyse loogisesti säännöstä, sillä tyylisivuilla on aina suhteellinen painoarvo toisiin tyylisivuihin nähden. CSS2-spesifikaation määritelmä on tosi, kun a set of statements (lausejoukko) määritellään seuraavasti:
Lausejoukko = yksi tai useampi varsinainen tai looginen CSS-sääntö.

Alaviite 2. Strict ei salli kehysten käyttöä. Keskusteltuani erään W3C organisaation HTML-työryhmän (working group) jäsenen kanssa asiasta. Hänen mukaansa kehykset eivät ole riittävän hyvin määriteltyjä, että ne kelpaisivat tiukkaan dokumenttimäärittelyyn. Poistin välillä joitakin linkkejä, jotta sain tämän dokumentin hyväksytyksi. Totesin kuitenkin, etten voi tehdä mielekkäällä tavalla tehdä tämän kriteerin täyttäviä dokumentteja. Tarvitsen aina target-attribuutteja linkittäessäni muiden tekemiin asiakirjoihin (käytän näillä sivuilla target="new" ja yleinen tapa avata rinnakkaisikkuna on target="_blank"). En katso ollenkaan hyväksi ratkaisuksi sitä, että kehyksien käyttöä pidettäisiin virheellisenä. Juuri target-määritteet tuovat mahdollisuuden monipuoliseen ikkunoiden käyttöön.

[Alku]

XMLja XHTML

Aiheet

XML

XML on syntynyt kaupallisten yhtiöiden erityistarpeiden takia. HTML-elementit ovat rajoittuneita eivätkä ne kuvaa aina itse asiaa riittävän hyvin. XML-dokumenteissa voi käyttää omia elementtejä, jotka kuvaavat itsessään käyttötarkoitusta, esim. <BOOK-CONTENTS>.

Haluatko luoda XML-dokumentteja?

Erityisesti Microsoftin tarkoituksena on ollut luoda laajoja maailmanlaajuisia tietokantoja, joissa on mahdollista käyttää etsintäkriteereinä elementtejä ja elementtiryhmiä. Myös erilaiset tieteenalat, kuten matematikka ja kemia voisivat käyttää omia elementtejä. Koska mahdollisille elementeille ei ole mitään rajoituksia ei ole, XML kertoo jo nimenä tämän asian XML is extensible (eXtensible M arkup Language = 'laajennettavissa oleva merkkauskieli').

HTML-dokumenteissa elementeillä on esimääritellyt esitystavat. XML-elementeillä ei ole mitään oletusesitystapaa. Määrittelemätön XML-elementti ei tee yhtään mitään! Eräs tapa antaa XML-elementeille esitystapa on CSS. Jos XML-dokumentit käyttävät samoja elementtejä kuin HTML-elementit, samaa CSS-tiedostoa voidaan käyttää niin HTML- kuin XML-dokumenteillekin (tein lisäsivu:n tästä asiasta[S]).

Toinen keino on XSL (eXtensible Stylesheet Language), jossa on enemmän mahdollisuuksia vaikuttaa XML-dokumenttien rakenteeseen. Microsoft suosii sitä. Se antaa enemmän mahdollisuuksia asettaa elementit toiseen järjestykseen kuin CSS. On kuitenkin huomattava, XSL:n suosiminen johtuu osittain siitä, että Microsoft Internet Explorer:n CSS-tuki ei ole valmis. Puuttuvat piirteet olisivat XML-dokumenttien suhteen tärkeitä. CSS:llä ei voi saada MS IE -selaimille kunnon esitysasua.

Jos toteutus olisi parempi tilanne voisi olla toinen. Lyhyesti sanottuna MS IE ei CSS-tuen osalta täytä XML-vaatimuksia. Esim. Netscape 6.x+ ja Opera 4.x+ -selaimille on XML-dokumenteille luotavissa kunnollinen esitysasu. Käsittelen MS IE 5.5+n ongelmia eräällä lisäsivu:lla[S]).

XML-dokumenttien yhteensopivuus (compatibility) HTML 3.2 -tasoon kykenevien selainten kanssa riippuu XML-sivujen tekijästä. Pahimmassa tapauksessa XML-dokumentit ovat vanhoille selaimille toisiinsa liittynyttä tiivistä tekstiä ja erityiskoodeja (lue alaviite 1[S][Pw], jos tahdot tietää mitä tarkoitan erityiskoodeilla) - käytännössä mahdotonta tai erittäin vaikea lukea. Itse asiassa sivujen tekijä voi luoda oman HTML:ää muistuttavat kielen - XML on ihanne kieli "tee se itse" -ihmisille! XML-dokumentit voidaan kuitenkin laatia sangen luettaviksi myös vanhoille selaimille, jollin kaikki tai useimmat elementit ovat samoja kuin HTML-dokumenteissa (elementtien ei kuitenkaan tarvitse käyttäytyä samalla lailla kuin XML:ää osaavilla selaimilla).

XHTML

Mitä XHTML (eXtensible Hyper Text M arkup Language) dokumentteihin tulee kyse on erityisistä XML-dokumenteista, jotka käyttävät pääosin täysin samoja elementtejä kuin HTML-dokumentit. Ne voidaan ilmoittaa joko HTML tai XML dokumentteina. XHTML-dokumentit pitää aina tehdä XML-sääntöjen mukaan, jotka ovat paljon tiukemmat kuin HTML-dokumenteilta edellytettävät vaatimukset. Ensinnäkin kaikki dokumentit täytyy olla hyvin muotoiltua (well-formed) - enää ei ole sallittua tehdä niin paljon virheitä kuin aiemmin! HTML-dokumenttien ja XHTML-dokumenttien välillä on esim. seuraavia eroja:

 
  1. Dokumentissa voi olla XML-ilmoitus (<?xml ...?>), mutta se ei ole pakollinen. HTML-dokumentille ei ole olemassa vastaavaa ilmoitusta. HTML-dokumenttien tavoin dokumentit tulee ilmoittaa XHTML-dokumentiksi ainakin standardilla DTD-ilmoituksella, esim. <!DOCTYPE HTML PUBLIC "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/"/dtd/transitional.dtd"> (tiukassa DTD-ilmoituksessa on pieni virhe - lue alaviite 2[S][Pw]).

  2. Dokumentin juurielementti (root element) on aina html ja siihen liittyy aina XML-nimiavaruusilmoitus: <html xmlns="http://www.w3.org/TR/xhtml1/">.

  3. Kaikki HTML-elementit ja -attribuutit kirjoitetaan pienillä kirjaimilla. Kaikki elementit ovat pieni-iso-eroavia. Tämän kaltainen kombinaatio on XML-dokumenteissa laiton vaikka se on kelpaa HTML-dokumenteille: <BODY>... </body>. Mikäli attribuutille on standardit arvot, nekin kirjoitetaan pienillä kirjaimilla (esim. align="center").

  4. Kaikki attribuuttien arvot ympäröidään sitaateilla mukaan luettuina nekin, joissa arvot ovat vain numeroita. Attribuutti width=3 ei ole kelpaa XHTML-dokumentille, sen täytyy olla merkattu width="3".

  5. Id-attribuuttien arvot ovat pieni-iso-eroavia (lisäksi on huomattava, että jos esim. elementille A antaa tunnisteen, name-attribuutti ei riitä vaan sen ohella tai sen sijaan tulee käyttää id-attribuuttia, jolla on täsmälleen sama arvo).

  6. Elementit jaetaan tiukemmin normaaleihin ja ns. tyhjiin elementteihin. Tyhjät elementit eivät HTML-dokumenteissa kaipaa mitään päätösmerkkausta. Menettely ei kuitenkaan käy XML-dokumenteille. Myös tyhjillä elementeillä täytyy olla jonkinlainen päätösmerkkaus. Päätösmerkkaus sisällytetään elementin aloitusmerkkaukseen ennen sen päättävää > -merkkiä, esim. <br /><img scr="image.gif" /> (jos ennen etukenoviivaa (/) jätetään tyhjä väli kaikki selaimet osaavat lukea merkkauksen oikein). Siten elementin aloitusmerkkaus on samalla sen päätösmekkaus. HTML-dokumentissa esim. elementeiltä P ja LI voidaan jättää pois päätösmerkkaus vaikka päätösmerkkaukset voidaan niihin laittaa (on jopa suositeltavaa laittaa elementille P päätösmerkkaus - käytän itse tälle elementille aina päätösmerkkausta). Menettely on laitonta XHTML-dokumenteille. Myös <p />      tai <li /> merkkaukset ovat laittomia, sillä em. elementit eivät ole olemukseltaan tyhjiä elementtejä.

Alla on esimerkki hyvin yksinkertaisesta XHTML-dokumentista ([M][S][Pw]):

<!DOCTYPE HTML PUBLIC "-//w3c//dtd xhtml 1.0 transitional//en"
http://www.w3.org/TR/xhtml1/"/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1/">
   <head> 
      <meta name="keywords"
      content="Opera,Mozilla,Netscape,Internet Explorer,CSS" />
      <title>Esimerkki XHTML-dokumentista</title>
   </head>

   <body>
      <h1>Pääotsikko</h1>
      <br />
      <p>Tekstiä.</p>
      <p>Tekstiä.</p>
      <blockquote>Tekstiä lohkositaatin sisällä.</blockquote>
      <ol>
         <li>Tekstiä listan sisällä.</li>
         <li>Tekstiä listan sisällä.</li>
      </ol>
</body>
</html>

CSS-oppaan sivut ovat nykyisin XHTML 1.0 dokumentteja mallisivuja lukuun ottamatta. HTML-tiedostoja on helppo kääntää XHTML:ksi käyttämällä ilmaisen HTML-Kit-editorin HTML Tidy-toimintoa. Jos haluat käyttää samaa CSS-tiedostoa HTML, XHTML ja XML-dokumenteille, on järkevää kirjoittaa elementtien nimet aina pienillä kirjaimilla. Olen pyrkinyt tekemään esimerkkini siten, että niitä voi käyttää myös XHTML-dokumenteissa. Skriptien käyttö on kuitenkin ongelmallista, mutta olen käyttänyt niitä HTML-dokumenttien tapaan.

W3C: XHTML 1.0 (4.8 Script and Style elements and C.4 Embedded Style Sheets and Scripts), Namespaces in XML[Pw].
Other sites: HTML-Kit Home Page[Pw]
.

Seuraava sivu käsittele perus menetelmiä, joilla CSS liitetään Web-sivuille.

[Alku]
 

Alaviite 1. XML-tiedostoille tarkoitetut DTD-tiedostot laaditaan pääsääntöisesti samoja periaatteita noudattaen kuin HTML-tiedostoillekin. Omat yleisentiteetit[S] (common entities - yleensä lyhenteitä) tulee ilmoittaa. On suositeltavaa käytää CDATA jaksoja sections[S] (CDATA sections) yleisentiteettien sijaan jos tarkoituksena on esittää näytöllä erityiskoodeja. Jos koodin tekijä luo omia entiteettejä, dokumentit ovat joiltakin osin vanhoille selaimille lukukelvottomia, sillä vanhat selaimet eivät tiedät mitä omat entiteetit merkitsevät.

Alaviite 2. XHTML 1.0 Strict DTD-tiedostossa on virheellinen parametrientiteetti-ilmoitus (<!ENTITY % FrameTarget "CDATA"> <!-- render in this frame -->), koska se ei vastaa elementin A attribuuttilistaa kuten se tekee HTML 4.0 loose -dokumenttityypin DTD:ssä (target %FrameTarget; #IMPLIED -- render in this frame --).

[Alku]

2. Miten CSS liitetään Web-sivuihin

Yleistä

Jaksoissa kaksi ja kolme kyse on elementin sisällä olevista, asiakirjaan upotetuista ja asiakirjan ulkopuolisista tyylisivuista. Sitä miten niitä tulisi käyttää, tulee tarkastella CSS:n perusfilosofiasta käsin. Tarkoituksenahan on se, että elementtien esitysasua olisi mahdollisimman helppo jälkikäteen muokata.

Cascading Style Sheets

CSS voi käyttää kolmea erityisattribuuttia. Attribuuttia style (style="...") elementin sisään tuleville suorille tyylisivuille, class (class="...") ja id (id="...") ulkopuolisille tyylisivuille. Käsittelen tässä yhteydessä tarkemmin vain attribuutin style käytön.

[Alku]

Kuvaukset

tyylisivut ovat ikään kuin dokumentin esitysasua koskevia attribuuttikokoelmia. Tässä mielessä CSS toimii aina attribuuttitasolla riippumatta tavasta, millä tavoin elementtien ulko- eli esitysasu määritellään.

Tyylisivuen sisällä olevia dokumentin ulkoasua koskevia määrittelyjä ei kuitenkaan kutsuta englanninkielisissä teksteissä attribuuteiksi vaan niistä käytetään ilmaisua properties eli suomeksi ominaisuudet.

Yksi CSS-ominaisuus voi toisinaan korvata monta HTML-attribuuttia. On myös tilanteita, joissa yhden HTML-attribuutin korvaamiseksi tarvitaan useiden CSS-ominaisuuksien määrittelemistä vieläpä niin, että ominaisuudet täytyy antaa eri elementeille. Jos HTML-attribuutti ja CSS-ominaisuudet käsittelevät samaa dokumentin esityasua koskevaa piirrettä, tällä seikalla ei ole periaatetasolla mitään merkitystä. CSS:n perustehtävähän on poistaa or muuttaa minkä tahansa dokumentin esitysasua koskevan HTML-elementin tai -attribuutin vaikutus. Olennaista on vain se, että pystyykö CSS:ää ylipäätänsä soveltamaan johonkin tilanteeseen.

Ominaisuuksista luodaan aina kuvauksia (declaration), jolla tarkoitetaan yhtä ominaisuutta ja sille annettua arvoa tai arvojoukkoa. Kuvauksen sisällä yksittäinen omainaisuus määritellään siten, että ensin annetaan ominaisuuden nimi ja kaksoispisteen (:) jälkeen sen arvo tai useita samalla kertaa annettuja arvoja. CSS-ominaisuuksia voi antaa yhtä aikaa kuinka paljon tahansa kunhan yksittäiset ominaisuudet ja niiden arvot erotetaan toisistaan puolipisteellä (;), esim.:

color:#660033; background-color:yellow;

Ominaisuudet ovat yleensä kuvauslohkon (declaration-block) sisällä. Kuvauslohkon rajoittimina toimivat kaarisulut ({}). Alla on kuvauslohkon käsitekaavio (kaarisulkujen, kaksois- ja puolipisteiden väliin saa jättää tyhjää tilaa niin paljon kuin halutaan):

Kuvauslohko (declaration-block)
kuvaus (declaration)
ominaisuus (property) arvo (value)
{ color : #660033 }

Sivujen tekijä voi useissa tapauksissa valita sen, esittääkö hän ominaisuudet ja niiden arvot yksitellen vai kokoaako hän jotkut ominaisuudet ns. pikakirjoitteeksi (shorthand properties). Yleensä taustan ominaisuudet esitetään pikakirjoitteina, esim. seuraavaan tapaan ([M][S][Pw]):

body {background: white url(./Taulut/kierrevihko.gif) repeat-y 2px 0px;}

Edellisessä esimerkissä kuvauslohkon sisällä oli vain yksi kuvaus. Seuraavassa esimerkissä kuvauslohko sisältää useita kuvauksia. Laitan seuraavassa esimerkissä selvyyden vuoksi yksittäiset kuvaukset allekkain. Yksitellen esitettynä edellisen esimerkin ominaisuuksien kuvauslohko näyttäisi tältä (en tässä yhteydessä käy lävitse, mitä yksittäiset ominaisuudet tarkoittavat):

body
{background-color: white;
background-image: url(./Taulut/kierrevihko.gif);
background-repeat: repeat-y;
background-position: 2px 0px;}

Kaikkia ominaisuuksia ei voi esittää pikakirjoitteena, mutta jos voi, periaate on sangen yksinkertainen:
Pikakirjoitteessa ominaisuuden arvot laitetaan peräkkäin, väliin jätetään tyhjää (space) ja arvojen antaminen päätetään puolipisteellä (;). Myös aliominaisuudet voidaan toteuttaa pikakirjoitteena, esim.:

body {border-top: 1px #660033 solid;}

/* vertaa sitä seuraavaan kuvauslohkoon */

body {border: 1px #660033 solid;}
[Alku]

Tyyliattribuutteihin sijoitetut tyylisivut

Jos tyylisivuja määritellään elementtien sisällä käyttäen tyyliattribuuttia. Muista tyylisivuen määrittelyistä poiketen tyyliattribuutin sisällä olevalla kuvauksella ei käytetä kaarisulkuja. Esim.:

<TD style="border:1px solid #660033">

Menettely ei oleellisesti poikkea HTML 3.2:n attribuuttimäärittelyistä. Tätä menettelytapaa nimitetään englanninkielisissä teksteissä myös rivinsisäisten tyylien käyttämiseksi (inline style sheets or vain inline styles; termi on hieman ongelmallinen - lue Alaviite 1[S][Pw]). Jos haluat muuttaa elementin aloitusmerkinnän sisään tekemääsi määrittelyä, joudut etsimään sen muun koodin seasta aivan kuin HTML 3.2 esitysasua koskevat attribuutit! Tällä tavoin määriteltyjä tyylisivuja voitaisiin nimittää elementtitason tyylisivuiksi. Ne voidaan antaa useimmille elementeille, ei kuitenkaan juurielementeille, jolle HTML 4.01 spesifikaation mukaan voi antaa vain kieliattribuutteja.

Elementtitason tuomasta rajoituksesta huolimatta myös näillä tyylisivuilla on perustavalaatuisia eroja HTML 3.2 elementtien ulkoasua määritteleviin attribuutteihin nähden:

  1. Määrittelyt voivat olla paljon monipuolisempia. HTML 3.2 esitysasua koskevia attribuutteja (muunkinlaisia attribuutteja on olemassa) voi antaa vain yhden kerrallaan eli attribuutilla voi olla kerrallaan vain yksi arvo.
  2. HTML 3.2 dokumenteissa ei voi antaa tietylle elementille kuin vain rajoitetun määrän attribuutteja. CSS-ominaisuudet eivät ole sidonnaisia tiettyihin elementteihin kuten HTML 3.2 attribuutit. Tosin on tilanteita, että kaikkia CSS-ominaisuuksia ei oteta huomioon (mainitsen tällaisia tapauksia muilla sivuilla yksittäisissä asiayhteyksissä).

Vaikka tyyliattribuutit ovat heikoin tapa hyödyntää CSS-ominaisuuksia, ne ovat kuitenkin käyttökelpoisia esim. silloin, kun määritellään elementeille absoluuttisia paikkoja. Seuraava määrittely antaa kuvalle elementille 120 pikselin sijainnin sivun yläreunasta laskien (voit määritellä kuvan muut arvot joko HTML 3.2 attribuuteilla tai lisätä tyyliattribuutin sisään enemmän CSS-ominaisuuksia ([M][S][Pw])):

<IMG src="../Kuvat/Css/omakuvaIso.gif" style="position:absolute; top:120px;">

Käytä tyyliattribuutteja harkiten! Mieti ensin tarvitsetko välttämättä juuri tiettyyn kohtaan erillismäärittelyn.

Selainkohtaisia huomautuksia:.

  1. Netscape-selaimet eivät hyväksy tyyliattribuutin kanssa kaarisulkuja (asia ei ole kuitenkaan kovin yksiselitteinen ja käsittelen ongelmia Alaviite 2:ssa[S][Pw]).

  2. Suorat tyylimäärittelyt ovat kaikkien CSS:ää tukevien selainten luettavissa. Erityisesti Netscape 4.x -selaimilla on suuria toimintavaikeuksia CSS:n kanssa, jolloin sille ei pidä antaa samaa CSS:ää kuin esim. Opera ja MS IE -selaimille. Käyn erillissivulla[S][Pw] tarkemmin lävitse, miten Netscapen suhteen tulee menetellä.


[Alku]
 

Alaviite 1. Termin inline style sheets ongelma on siinä, että sanaa inline käytetään yleensä sanan block vastakohtana. Molemmat kuvaavat elementtien peruskäyttäytymistä. Mikäli termi olisi sopusoinnussa tämän jaottelun kanssa, se koskisi vain tyypillisiä rivinsisäiselementtejä, kuten EM. Parhaiten se sopisi elementille SPAN, joka on nimenomaisesti tarkoitettu rivinsisäisiin tyyli- ja kieliohituksiin.

Tällä kertaa ei ole kuitenkaan kyse elementtien käyttäytymisestä, vaan kyse on dokumentin runko-osaan sijoitetuista eli lähdekoodiin upotetuista (embedded) tyylisivuista. Kyseltyäni asiasta sain seuraavan vastauksen:

Yes, inline has two meanings: something can be inline in the source tai in the output... An inline style is a style that is embedded in the source, an inline element is an element that will look like a phrase in a line on output... Most people talk about "inline style" tai "style attribute",...

Suomalaisittain osuvinta on kirjoittaa vain tyyliattribuuteista, sillä niitä käytetään yksinomaan dokumentin runko-osassa. Käytän myös ilmaisua elementtitason tyylisivut (element-level style sheets).

Alaviite 2. Tyyliattribuutin oikeasta syntaksista on ollut erimielisyyksiä. Useimmat selaimet hyväksyvät style="{}", jolloin tulee selvemmin esille, että tyyliattribuutin sisällä on upotettu CSS-kuvauslohko. Mutta kyseinen syntaksi on vastoin tavanomaista HTML-syntaksia eikä Netscape sitä hyväksy. Kun keskustelin David Baronin kanssa, hän sanoi, että oikea syntaksi on style="". Tarkasteltuani asiaa syvällisesti, olen asiasta eri mieltä. Olennaista on se, että dominoivaksi syntaksiksi on valittu HTML eikä CSS, joten asialle ei enää voi tehdä mitään. Nykyinen syntaksi on saman kaltainen kuin JavaScript-kirjoitteilla, joissa voidaan koota yhteen monia toimintoja, jotka erotetaan toisistaan ";"-merkillä, esim.: onClick="uusikkunaa(); if(browser) nayta(10, 'b')".

[Alku]

Linkitetyt tyylisivut

Aiheet

Ulkopuoliset tyylisivut

Mielestäni aina on mielekästä luoda ulkopuolinen CSS-tyylisivutiedosto, jos tyylisivuja käyttäviä asiakirjoja on enemmän kuin kaksi. Laadi erillistiedostoon koko sivustossasi käytettävät perustyylit. Tällöin voidaan kirjoittaa sivustotason tyylisivuista.

Ulkopuolisissa tyylisivuissa määritellyillä ominaisuuksilla on sama funktio kuin tyyliattribuuteilla. Niissä annetuilla CSS-ominaisuuksilla, esim. p {color:blue; border:1px solid blue;} on sama vaikutus kuin <P style="color:blue; border:1px solid blue;">, mutta ominaisuuksia ei ole annettu elementille suoraan vaan epäsuorasti. Jollei toisin ole varta vasten määritelty p {color:blue;... koskee kaikkia dokumentin kappaleita (selostan tällä sivustolla edempänä, mikä merkitys on kuvauslohkojen edessä olevilla määrittelyillä). Tyyliattribuutin avulla annetut ominaisuudet koskevat sen sijaan vain yhtä kappaletta ([M][S][Pw]).

Ulkopuolisten tyylisivumäärittelyiden vaikutus on saman tapainen kuin HTML 3.2 dokumenttien esitystyyliin vaikuttavilla attribuuteilla, mutta sillä erolla, että dokumentin runko-osassa ei tarvitse välttämättä käyttää lainkaan esitystyyliin vaikuttavia attribuutteja!

Kun käytät ulkopuolisia tiedostoja, anna tiedostolle nimeksi esim. css_tiedoston_nimi.css ja linkitä se HTML-tiedostoosi. Linkitys on alla olevan esimerkin tapainen:

<LINK rel="stylesheet" type="text/css" href="tyylisivuTiedosto.css">

Koodin tulee sijaita dokumentin HEAD-osassa. Voit linkittää joko paikallisiin hakemistoihin tai käyttää vaikka toisten tekemiä tyylisivutiedostoja ja linkittää niihin. Vapaasti käytettäviä CSS-tiedostoja löydät ainakin W3C organisaation sivuilta (ns. core stylesheets). Alla on esimerkki linkityksestä yhteen siellä olevaan CSS-tiedostoon:

<LINK rel="stylesheet" type="text/css" href="http://www.w3.org/stylesheets/Core/Modernist">

Ulkopuolisissa tyylisivuissa ei pidä käyttää mitään HTML-elementtiä tai -kommenttia. Seuraavassa on hyvin yksinkertainen malli ulkopuolisesta tyylisivutiedostosta:

/* Älä käytä HTML-kommentteja. Käytä niiden sijaan CSS-kommentteja. */
body {color:#333333; background-color:aqua}

Suositan, että tarkastutat CSS-tiedostosi W3C CSS validator -palvelulla. W3C:n CSS-validaattorin voi asentaa myös HTML-Kit -ohjelmaan, mutta olen havainnut, että se ei toimi kunnolla.

W3C: CSS validator.
Muita sivustoja: HTML-Kit Home Page[Pw].

Ulkopuolisiin tiedostoihin voi viitata myös käyttäen ns. tuontisääntöä (import (at-)rule), jota käsittelen tämän sivun seuraavassa jaksossa. Annan samalla muutamia esimerkkejä linkitettyjen tyylisivuen käytöstä.

[Alku]

Upotetut tyylisivut ja ns. tuontisääntö

Upotetuilla tyylisivuilla tarkoitetaan asiakirjan HEAD-osaan liitettyjä tyylisivuja. Ominaisuuksien määrittelyt ovat samoja, joita käytetään ulkopuolisissa tyylisivutiedostoissa. Ne liitetään asiakirjaan ennen runko-osaa (BODY) <HEAD></HEAD> koodien väliin eli "upotetaan" (embed) asiakirjaan käyttäen STYLE-elementtiä. Tällä tavoin määriteltyjä tyylisivuja voidaan kutsua dokumenttitason tyylisivuiksi.

Suosittelen, että laitat tähän määrittelyyn vain sellaiset tiedot, joita käytät yhdessä asiakirjassa. Voit myös ohittaa muille sivuille ulkopuolisissa CSS-tiedostoissa antamiasi ominaisuuksia. Esimerkiksi haluat tiettyyn asiakirjaan muista poikkeavan taustakuvan ja -värin. Sinun ei tarvitse määritellä kaikkea uusiksi. Riittää, että annat uudet ominaisuudet vain taustalle. Muut arvot jäävät voimaan.

Seuraavan esimerkin ominaisuudet antavat asiakirjalle keltaisen pohjavärin ja uuden taustakuvan, joka on keskitetty sivulle ja joka ei toistu (näet esimerkissä myös tyylisivun oikean sijoittelun - mallissa on mukana myös linkitetty tiedosto, josta siis haetaan muut ominaisuudet ([M][S][Pw])):

<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Otsikko</TITLE>
<LINK rel="stylesheet" type="text/css" href="tyylisivutiedosto.css">
<STYLE type="text/css">
<!-- /* määrittelyt ovat HTML-kommenttien sisällä, jotta vanhat selaimet ohittaisivat ne */
body {background: yellow url(uusikuva.gif) no-repeat center;} /* selostan toisessa yhteydessä tämän merkityksen */
-->
</STYLE>
</HEAD>
<BODY>
...

Sekä upotettujen että ulkopuolisten tyylisivuen kanssa voi käyttää ns. tuontisääntö (@import), joka kuuluu ns. at-sääntöihin (käsittelen muita at-sääntöjä edempänä).

Laatimastani esimerkistä näet, miten tuota sääntöä käytetään. Ensimmäisessä esimerkissä sääntö liitetään STYLE-elementtiin ([M][S][Pw]):

<LINK rel="stylesheet" type="text/css" href="tyylisivutiedosto.css">
<STYLE type="text/css">
<!--
@import url(lisaTyylisivutiedosto.css); /* huomaa lopussa oleva ; merkki - ilman sitä selain ei jatka eteenpäin lukemaan jäljessä tulevia määrittelyitä; */

/* dokumenttikohtaiset määrittelyt */
body
{font-family: Verdana, Arial, Helvetica, sans-serif; font-size:x-small;
padding-top: 10px;
padding-left: 32px;
padding-right: 10px;
padding-bottom: 10px;
margin: 0px;}
h2
{color: #660033;font-family:Verdana, Arial, Helvetica, sans-serif;} /* muista, että tämä ei kumoa aiemmin annettuja ominaisuuksia muilta kuin uudelleen määritellyiltä kohdin */
td
{font-family: Verdana, Arial, Helvetica, sans-serif; font-size:x-small;}
-->
</STYLE>

Toinen tapa käyttää tuontisääntöä on laittaa se toisen CSS-tiedoston alkuun seuraavan esimerkin tapaan:

/* tyylisivutiedosto.css - tämä on päätyylisivutiedosto; on hyvä tapa laittaa aina tyylisivutiedoston alkuun lyhyt kuvaus tyylisivutiedoston sisällöstä */
@import url(toinen_ulkopuolinen_tyylisivutiedosto.css);

body {...} /* muut määrittelyt normaaliin tapaan */

Muista, että aina kun käytetään ns. tuontisääntöä, se tulee sijoittaa ennen yksittäisiä ominaisuuksien määrittelyjä ja se käsitellään ensimmäiseksi. Jos tuontisääntöjä on useita, selain käy ne järjestyksessään lävitse. Tuontisäännön idea on se, että selain lukee tuontisäännöissä viitatut tyylisivut ikään kuin ne olisi kirjoitettu siihen paikkaan, jossa tuontisääntö sijaitsee.

Selainkohtaisia huomautuksia:

  1. Tuontisääntö ei toimi Netscape 4.x -selaimissa.

  2. MS IE 6.0 vanhemmat Windows-versiot ja MS IE 6.0 silloin kun selain ei toimi standard-compliant -moodissa[S] lukevat myös väärään paikkaan sijoitetut tuontisäännöt. Laita sääntö aina oikeaan paikkaan (kokeile mallisivua - siinä ei pitäisi näkyä tyylisivun tuomia muutoksia! ([M][S][Pw]).)

  3. Tuontisääntö sisältää useita ongelmia, mikäli halutaan mediakohtaisia CSS-määrittelyjä. Käsittelen näitä ongelmia tarkemmin sivulla Testiominaisuudet ja CSS:n kohdentaminen[S][Pw].

  4. MS IE Windows -selaimissa (ainakin MS IE 6.0 asti) on rajoituksena se, että linkitettyjä tai upotettuja tyylisivuja voi olla enintään 30 kpl.

  5. Koska MS IE 3.02 ymmärtää vain viimeisen STYLE or LINK elementin kautta määritellyn tyylisivun, se muodostaa oman ongelmansa. En käsittele selainta kuitenkaan tarkemmin, sillä sen käyttäjiä on enää todella vähän.


Pekka Järveläinen: CSC; John Allsop: Managing Style at Large Sites[Pw]; Microsoft: BUG: 30 Style Sheet Limitation in Internet Explorer.

[Alku]

Vaihtoehtoiset tyylisivut

Joku saattaa kysyä, miksi on olemassa kaksi tapaa linkittää ulkopuolisiin tyylisivuihin (tuontisääntö ja LINK elementti). Perusero niiden välillä on siinä, että periaatteessa LINK elementin käyttö antaa mahdollisuuden vaihtaa tyylisivuja määrittelemällä vaihtoehtoisia tyylisivuja. Systeemi toimii yksinkertaisesti toteutettuna seuraavasti:

  • Attribuutti title nimeää tyylisivun, jotta sen voi haluttaessa vaihtaa. Tyylisivu, jolla ei ole em. attribuuttia luetaan automaattisesti eikä sitä voi vaihtaa.
  • link rel="stylesheet" title="Oletustyylisivu" määrittelee oletustyylisivun, joka on voimassa, mikäli käyttäjä ei ole valinnut jotain toista tyylisivua.
  • link rel="alternate stylesheet" title="Vaihtoehtoinen tyylisivu" on vaihtoehtoinen tyylisivu, jonka käyttäjä voi valita joko oletustyylisivun tilalle tai jos oletustyylisivua ei ole määritelty muiden tyylisivuen lisäksi.
W3C: HTML 4.01: 14.3.1 Preferred and alternate style sheets.

Selainkohtaisia huomautuksia:

  1. Vaihtoehtoiset tyylisivut toimivat vain Mozilla Gecko, Opera 7.x+ ja Linux käyttöjärjetelmän tiedostoselaimista ainakin Konqueror 3.1:ssä, joka saattaa joskus valita väärän tyylisivun. Koska ne eivät säily selaimen muistissa seuraavalle sivulle mentäessä niistä ei ole käytännössä mitään hyötyä. Aseta niiden sijaan vaihtoehtoiset tyyliarkit evästeillä (cookies)

  2. MS IE - ja Opera-selaimissa voi määritellä käyttäjän tyylisivut. Erityisesti Opera 4.x+ tarjoaa erittäin nopean tavan vaihtaa käyttäjän (user) ja sivun tekijän (author) tyylisivuen välillä. Selitän tämän asian lisäsivu >sivulla[S].

Käsitten seuraavaksi millaisia arvoja CSS-ominaisuuksille voi antaa.

[Alku]

3. Mitkä ovat CSS:n mittayksiköt, värit ja avainsanat

Aiheet

Mittayksiköt ja korvaavat avainsanat

CSS-ominaisuuksien koko- ja sijaintiarvot määritellään joko käyttämällä mittayksiköitä (units) tai tiettyjä avainsanoja (keywords), jotka korvaavat numeeriset mittayksiköt. Avainsanat vaihtelevat ominaisuuskohtaisesti ja käsittelen tässä yhteydessä vain yleisiä mittayksiköitä ja fonteille tarkoitettuja avainsanoja.

Mitat

HTML 3.2:ssa tarkkoja mittayksiköitä ei ole kuin yksi (= pixel = piste näyttöruudulla, esim. widht="300" - mittayksikköä ei ole mainittu, koska se aina sama). Tekstille ei sitäkään, koska teksti halutaan säilyttää skaalautuvana. HTML 3.2 mukainen fonttikoko (kuten esim. <FONT size="3">) voidaan ilmaista CSS:llä vain fonteille tarkoitetuilla avainsanoilla xx-small, x-small, small, medium, large, x-large, xx-large (esim. small {font-size:x-small;}).

Fontteihin liittyville elementeille kuten useimmille muille elementeille voidaan käyttää myös numeroarvoisia mittayksiköitä. Niiden mahdollisina desimaalierottimina käytetään pistettä. Numeroarvoille pitää laittaa lähes aina mittayksikkö (toisin kuin HTML 3.2 attribuuteissa), mikäli kyse pituuteen tai korkeuteen liittyvistä seikoista (numeroarvo voi tarkoittaa myös jotain muuta asiaa, jolloin siinä ei käytetä mittayksikköä). Ainoan poikkeukset muodostavat ominaisuus line-height (sille riittää esim. line-height:1.2) sekä arvo 0.

Jotkut ominaisuudet voivat saada arvokseen web-osoitteen. Arvot (values) voidaan sijoittaa lainausmerkkien sisään, mutta se ei ole välttämätöntä (url("gif.gif") tai url(gif.gif)). Lainausmerkkejä (' tai ") tarvitaan kaikissa nimissä, joissa on välilyöntejä (esim. font-family: "Times New Roman") sekä sekä ominaisuuksissa, joiden arvoissa käytetään merkkijonoja (esim. content: "tämä on merkkijono";)

Numeroarvoisista mittayksiköistä toiset ovat relatiivisia ja toiset absoluuttisia. Mittayksikkö em suhteutuu ympäröivän elementin fonttikokoon. Esim. small {font-size: 0.9em;} tarkoittaa, että; fonttikoko on 0,9 kertaa pienempi kuin ympäröivällä elementillä eli "emoelementillä" (käsittelen emoelementti-näkökulmaa tarkemmin tuonnempana, mutta tässäkin on kyse elementin asemasta dokumenttipuussa[S][Pw]).

Saman tapainen mittayksikkö on ex, josta spesifikaation ilmoittaa:

ex: the 'x-height' of the relevant font.

Termi x-height merkitsee tietylle merkistölle tyypillisen pienen x-kirjainmerkin korkeutta; suurempi x-korkeus tekee samalla nimellispistekoolla luodun merkistön pienet kirjaimet suuremmiksi ja luettavammiksi.

Fonteille ja useimmille muille elementeille voidaan käyttää myös prosenttiarvoja (kuten esim. big {font-size:120%}.

Relatiivisten arvojen ongelma on siinä, että ne ovat käytännössä sangen epätäsmällisiä. Fonttikokojen suhteen etuna se, että fonttia voi helposti isontaa/pienentää. Tästä syystä useimmat fonttimääritykseni ovat relatiivisia. Tein esimerkkisivun, jossa on käytetty useita relatiivisia yksiköitä ([M][S][Pw]).

Absoluuttisilla mittayksiköillä saa tarkemman kontrollin, mutta useimmat selaimet eivät osaa skaalata niitä (Opera skaalaa kaiken, joten sille liian pieni fonttikoko ei ole ongelma). Kaikki CSS-ominaisuuksia osaavat selaimen näyttävät siten saman fonttityypin aina (lähes) saman kokoisena. Seuraavat mittayksiköt ovat spesifikaation mukaan absoluuttisia (mahdollinen desimaaliosuus erotetaan pisteellä):

  • in = inches, tuumia
  • cm = senttimetrejä
  • mm = millimetrejä
  • pt = points, pisteitä - yksi piste on sama kuin 1/72 tuumaa = 0,353 mm (printattuna, mutta ruudulla se voi olla esim. 1/96 osa tuumaa riippuen käyttöjärjestelmästä ja sen resoluutiosta)
  • pc: pica - 1 pica = 12 points, pistettä = 4,24mm

Spesifikaatio määrittelee mittayksiön px (= pikseli) olevan näyttölaitteen (viewing device) suhteen relatiivisiin mittayksikkö (edellisellä mallisivulla oli viimeisenä yksi esimerkki tämän yksikön käyttämisestä). Se on printatuissa dokumenteissa periaatteessa relatiivinen mittayksikkö, mutta näyttöruudulla absoluuttinen yksikkö. Tosin CSS2 spesifikaatio suosittelee, että selaimet laskevat sille absoluuttisen arvon ja niin selaimet toimivatkin.

Pikseliarvot ovat hyödyllisiä, jos fonttikoko täytyy pitää jostakin syystä vakiona. Näin on asian laita esim. tietyn levyisiin taulukoihin tai kehyksiin suunnitelluissa linkeissä.

Absoluuttiset mittayksiköt toimivat parhaiten ensisijaisesti tulostettaviksi tarkoitetuilla www-sivuilla, joille on tehty oma tyylisivu mediasäännön[S] avulla. Se voi olla hyvinkin erilainen kuin ruudulla näkyvä versio. Erityisesti mittayksikkö pt on tarkoitettu printattaville dokumenteille. Ainakin mittayksiköt in, cm ja mm takaavat yhtäläisen tulostuksen kaikissa tulostustyylisivuja tukevissa selaimissa.

Selainkohtaisia huomautuksia:

  1. Kaikki selaimet eivät vaadi width ja height ominaisuuksiin mittayksikköä, vaikka pitäisi. Joillakin selaimilla tämä seikka on DTD-riippuvainen[S].

  2. Selaimilla saattaa olla toisistaan poikkeavat oletusmäärittelyt, mistä syystä relatiiviset fonttikoot saattavat olla toisistaan poikkeavia.

  3. Avainsanat xx-small-xx-large eivät täsmälleen vastaa HTML attribuuttia size ja selainten tulkinta vaihtelee suuresti. Small on pienin käytettäväksi suositeltava arvo. Uusimmmille Netscape/ Mozilla ja tietyillä dokumenttityypeillä myös MS IE 6.0 Windows -selaimen käytös on em. fonttikokojen kohdalla DTD-riippuvainen[S]. Tein vertailusivun[S][Pw], joka osoittaa mitä eroja selainten välillä on olemassa.

  4. Jotkut selaimet osaavat skaalata absoluuttisia fonttiyksikköjä, mutta useimmat eivät (Opera skaalaa tarvittaessa kaiken).

  5. Selaimet toteuttavat prosenttiarvojen pyöristyksen hieman toisistaan poikkeavasti.

  6. Fonttikoossa ei koskaan saa unohtaa mittayksikköä, sillä sen sen lisäksi että Netscape 4.x hylkää virheellisen arvon se hylkää myös virheellisen fonttimäärittelyn jälkeen annetut ominaisuudet! Laitoin mallisivun alimpaan esimerkkiin tahallisesti virheellisesti laaditun määrittelyn ([M][S][Pw]).


Zeffrey Zeldman and Brian Platz: A List Apart; Keijo Kortelainen: Syntaksi.
[Alku]

Värit

Väreille on olemassa useitakin vaihtoehtoisia esitystapoja. Suositan selvyyden vuoksi käyttämään vain kahta yleisintä, sillä nämä ovat samoja kuin mitä käytetään HTML-attribuuteissa (esim. <BODY bgcolor="white" text="#3f3f3f" link="#3f3f3f"> - CSS-ominaisuuksia ymmärtävät selaimet käyttävät näitä siinä tapauksessa, että vastaavia CSS-ominaisuuksia ei ole määritelty):

  1. Avainsanoina määritellyt nimetyt värit (esim. strong {color:red;}). Muista kuitenkin, että myös 16 yleisesti käytettyä värien nimeä (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white ja yellow) ovat käyttöympäristöriippuvaisia.
  2. Ns. heksadesimaaliarvot (= numerot 0-9 + kirjaimet a-f), joiden eteen laitetaan merkki # (esim. p.special {color:#070e0e;} ([M][S][Pw])). Kuusidigitaaliset arvot vastaavat 24 bittisiä (noin 16,7 miljoonaa väriä) RGB-arvoja (red-green-blue). Heksadesimaaliarvot voidaan esittää myös kolmidigitaalisina arvoina (esim. {color:#00e;}, joka merkitsee samaa kuin {color:#0000ee;} ), jolloin värejä on käytössä vähemmän.

Tosin jotkut voivat pitää RGB-arvojen antamisesta. Seuraavassa esimerkissä kaikki kuvaukset tarkoittavat samaa väriä ([M][S][Pw]):

em {color: rgb(255,0,0) } /* RGB värit 0-255, voit käyttää aina kolmidigitaalisia numeroita, esim. 255,000,000 */
em {color: rgb(100%,0%,0%) } /* RGB värit 0-255 lähinnä sopivina prosenttiarvoina - huomaa, että tämä on epätarkempi tapa kuin edellinen */
em { color: red; } /* edellä mainittuja arvoja vastaava keyword-tyyppinen määrittely */
W3C: CSS2: 4 CSS2 Syntax and basic data types, 4.3.6 Colors[Pw].

Selainkohtaisia huomautuksia:.

  1. CSS2 spesifikaatio antaa mahdollisuuden käyttää sovelluskohtaisia värejä. Opera 5.x -sarja tukee Netscapen 140 nimetyn värin palettia mutta monet versiot eivät. Katso englanninkieliseltä sivulta Color keywords[S], miltä eri värit näyttävät ja miten niitä eri käyttöympäristössä tuetaan. Mikäli haluat välttää mahdollisimman pitkälle väriongelmia, käytä mahdollisuuksien mukaan ns. web safe colors -palettiin kuuluvia värejä RGB tai heksadesimaaliarvoja käyttäen.

  2. Uudet Netscape/Mozilla-selaimet käyttävät UA CSS[S] tiedostoissa joitakin erityisiä väriarvoja (esim. invert), jotka on tarkoitettu selaimen omaan käyttöön. Niitä voi kuitenkin käyttää myös intranet-ratkaisuissa, joissa käytetään uusia Netscape/Mozilla -selaimia. Viittaan niihin CSS-taulukon nooteissa[S].

  3. Jotkut selaimet hyväksyvät virheellisesti heksadesimaaliarvoiset värit ilman #-merkkiä (esim. color:334455). MS IE 6.0 Windows ja uusissa Netcape/Mozilla -selaimissa tämä asia on DTD-riippuvainen[S].

[Alku]

Muut mittayksiköt

Uudempi spesifikaatio tarjoaa lisäksi mahdollisuuden tehdä kuulovammaisia varten erityistyylisivuja (angles, times & frequencies). En ole itse perehtynyt syvällisemmin tähän osa-alueeseen, sillä katson että se kuuluu toistaiseksi toteutumattomiin tulevaisuuden visioihin. Niitä voitaneen käyttää ehkä myös tavallisten tyylisivuen kanssa, jolloin voidaan hyödyntää tietokoneiden äänikortteja.

W3C: CSS2: 4 CSS2 syntax and basic data types, 4.3 Values [Pw], 17 Tables, 7.7 Audio rendering of tables[Pw], 19 Aural style sheets[Pw].
Muita sivustoja: Keijo Kortelainen: Syntaksi.

[Alku]

Virheiden käsittely

Joissakin tapauksissa selain tai muu tyylisivuja käsittelevä ohjelmaa kohtaa virheellisiä tai tuntemattomia tyylimäärityksiä. Esim. ominaisuuksien arvot voivat olla virheellisiä. Jotta uudet ominaisuudet ja arvot toimisivat tulevaisuudessa, kaikkien käyttäjäsovellusten tulisi täytyy noudattaa seuraavia sääntöjä:

  • Tuntemattomat ominaisuudet jätetään tulkitsematta (selaimen pitäisi pystyä kuitenkin tulkitsemaan kuvauslohkoista standardin mukaisesti määritellyt ominaisuudet).
  • Laittomat arvot jätetään huomioimatta.
  • Kelvottomat at-avainsanat jätetään huomioimatta (käsittelen at-avainsajoja myöhemmin).
W3C: CSS2: 4.2 Rules for handling parsing errors[Pw].

Selainkohtaisia huomautuksia:

  1. Erityisesti MS IE 4.01-5.5 Windows -selaimet sietävät paljon sellaisia virheitä, joita selaimen ei tulisi suvaita. Kun MS IE 6.0 Windows toimii ns. standard-compliant -moodissa[S] se sietää niitä paljon vähemmän.

[Alku]

Käsittelen seuraavaksi sitä, millä tavalla selain tunnistaa kohteet, joihin CSS:ää sovelletaan eli tarkastelemme valitsimia.

[Alku]

Yleistä

CSS systeemin perustoimintaperiaate on siinä, että elementeille sovitetaan CSS-ominaisuuksia tiettyjen periaatteiden mukaan. Selaimen tulee tunnistaa elementit. Lukuun ottamatta suorien tyyliattribuuttien käyttöä selain luo elementtitunnisteista ikään kuin tunnistettavan hahmon. Perustoimintaperiaatetta nimitetäänkin hahmontunnistukseksi (pattern matching). CSS:ssä ja dokumentissa, jossa sitä käytetään tulee olla toisiaan vastaavia pareja.

Valitse

Jos esitysasu määritellään erillisillä CSS-tiedostoilla, tiedostot toimivat eräänlaisina esitysasua koskevina tietokantoina (ne vastaavat käsinkirjoitettuja tietokantoja). Ulkopuolisten CSS-tiedostojen käyttämistä voi verrata siihen, että sivun asiasisältö haetaan tietokannasta. CSS mahdollistaa siten esitysasun dynaamisen päivittämisen. Upotetussa CSS:ssä "tietokanta" kulkee asiakirjan mukana, joten se ei toteuta dynaamista päivitystä muuten kuin siten, että upotettu CSS haetaan palvelinpuolen skriptillä jostakin erillistiedostosta.

Jotta "CSS-tietokannassa" ja dokumentissa olevat parit löydettäisiin, selain tarvitsee ns. valitsimia (selectors). Ne nimensä mukaisesti valitsevat elementin tai elementit, joille CSS-ominaisuudet liitetään. Tällä sivulla käsittelen yleisimmät valitsimet ja niihin liittyvät tärkeimmät hahmonsovitussäännöt (matching rules). Alkuperäistermejä ovat mm. universal selector, (element) type selector, class selector, id selector, pseudo-class selectors ja pseudo-element selectors.

W3C: CSS2: 5 Selectors; 5.1 Pattern matching[Pw].
Muita sivustoja: Keijo Kortelainen: Valitsimet.

Käsittelen tällä sivulla myös CSS:n kanssa käytetyt erityisattribuutit class (class="...") ja id (id="..."), koska kyseisiä attribuutteja käytetään eräiden valitsimien toimintamekanismeissa.

Valitsimilla on toisiinsa nähden erisuuruisia painoarvoja (weigth), joten ne luovat toisiinsa nähden porrastetun järjestyksen (cascading order). Käsittelen tällä sivulla alustavasti tätä näkökulmaa. Sivulla 5[S][Pw] käsittelen joitakin harvinaisempia valitsimia (adjacent sibling selector - valitsintyypin + first-child pseudo-class näennäisluokkavalitsimen), koska niiden käsittely on luontevampaa toisessa yhteydessä. Käsittelen tuolla sivulla syvällisemmin, missä järjestyksessä selain lukee CSS-ominaisuudet. Kokoan siinä myös erilaiset sovitussäännöt. Nämä kaksi sivua siis kuuluvat yhteen ja esitän asiat vain hieman eri järjestyksessä kuin virallinen spesifikaatio.

[Alku]

Perusvalitsimet ja ryhmittäminen

Aiheet

Yleisvalitsimet

Yleisvalitsimella tarkoitetaan sitä, että selain ei siis yritä löytää dokumentista mitään tiettyä vastaavuutta, vaan selain etsii kaikki dokumentin elementit, joihin CSS:ää voi soveltaa. Yleisvalitsimilla on valitsimista alin prioriteetti.

Muistutus. Kuten jo aiemmin olen tuonut esille, elementin tunnisteella ei tarkoiteta koko elementtimerkkausta (tag), vaan jotain merkkauksen aliosaa, joka toimii tunnisteena. Yleisvalitsimen kyseessä ollessa tunnistimina ovat elementtityyppien nimet eli yleistunnistimet (generic identifiers) = elementtimerkkaukset ilman alku- ja loppurajoittimia sekä attribuutteja. Esimerkkinä voisi mainita elementit P ja B (sanan identifier termipuu[S][Pw]).

Esimerkkien ensimmäinen määrittelytapa on kaikkein yleisin, mitä voi ajatella. Seuraavassa esimerkissä on myös muutamia muita HTML-asiakirjoille tarkoitettuja yleisvalitsimen käyttötapoja ([M][S][Pw]):

*{color:red;} /* ensimmäinen merkki on ns. jokerimerkki, joka on tässä yhteydessä välttämätön - jokerimerkki on yleinen tapa eri tietokonesovelluksissa */
*.muu {color:blue;} /* tässä tapauksessa jokerimerkin voi jättää pois, sillä määrittelyssä on mukana piste ja pisteen jälkeen on tällä kertaa ns. luokkavalitsin, joka selitetään edempänä */
.muu {color:blue;} /* merkitys sama kuin edellä */

Kuten edeltävistä esimerkeistä voi havaita valitsimet liittyvät ns. kuvauslohkoihin (sanan määrittely[S][Pw]). Kun kuvauslohkoon liitetään jokin valitsin, saadaan sääntö (rule), esim:

*
{font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
text-align:justify;}

Seuraava käsitekaavio selvittää vielä termien välisiä suhteita (* tarkoittaa sekä yleisvalitsinta että mitä tahansa mahdollista valitsinta; kuvauslohko voi sisältää useita kuvauksia):

sääntö (rule)
kuvauslohko (declaration-block)
kuvaus (declaration)
valitsin (selector) ominaisuus (property) arvo (value)
* { font-family : Verdana, Arial, sans-serif; }

Englanninkielisessä tekstissä sääntöjä nimitetään myös sanoilla rule sets ja statements (=käsky, lause; ks. sanan määrittely[S][Pw]). Tarkasti ottaen kyse on käskylohkokoista, jolloin englanninkielisissäkin teksteissä pitäisi kirjoittaa statement-blocks or block-statements). Valitsimiin liittyvät yksinkertaiset säännöt or sääntöjoukot kertovat 1)  kohdistettavan or kohdistettavien elementtien tunnisteet sekä 2) ominaisuudet, jotka niille annetaan eli ominaisuuksien kuvauslohkon ja siinä olevat kuvaukset. Näiden perusteella selain esittää dokumentin halutulla tavalla.

Elementtityyppivalitsin

Yleisin mahdollinen määrittely on useimmiten liian kattava ja käytännössä yleisvalitsimellakin on aina jokin tarkennin. Elementtityyppitunnisteilla on seuraavaksi ylempi painoarvo. Oikeastaan hahmontunnistusperiaatekin alkaa vasta elementtityyppivalitsimista, sillä selain joutuu etsimään yksittäisiä kohteita. Siksi perusvalitsimena voidaan pitää yksinkertaista ns. elementtityyppivalitsinta (element type selector or vain type selector).

Elementtityyppivalitsimissa tunnisteena toimii tietyn elementin nimi. Esim. seuraavassa on elementtiä H2 koskeva sääntö ([M][S][Pw]):

h2 {color:#660033; background-color:#ff3; border:#660033 1px solid; font-size:17px}

CSS-säännöissä ja dokumentissa olevien elementtimerkkausten sisällä olevat elementtien nimet muodostavat toisiaan vastaavan parin.

Muista, että XML-asiakirjoissa on merkitystä sillä, käytetäänkö pieniä vai isoja kirjaimia. CSS-säännöissä ja XML-dokumentissa olevilla elementtityyppitunnisteilla täytyy olla sama kirjainkoko.

Selainkohtaisia huomautuksia:

  1. CSS3:een on lisätty XML:n nimiavaruuksista (namespace) riippuvaisia valitsimia (esim. *|*, |* ja ns|*, jossa ns on XML-nimiavaruus, johon CSS:ää sovelletaan). Ainakin yleisvalitsimeen liittyvät säännöt toimivat uusissa Mozilla Gecko (esim. Netscape 6.x+) ja Opera 7.x selaimissa.

  2. MS IE 5.x+ tukee epästandardilla tavalla XML-nimiavaruuksia (ns\elementti).


W3C: CSS3 module: W3C selectors (W3C Working Draft 26 January 2001).
[Alku]

Ryhmittäminen

Jotta samoja kuvauslohkoja ei tarvitsisi kirjoittaa useaan kertaan, niitä voidaan ryhmittää (grouping). Ryhmään voidaan koota kaikkia mahdollisia sääntöjä. Tässä yhteydessä on olennaista vain se, että yksittäiset ryhmän jäsenet erotetaan toisistaan pilkulla. Seuraavassa on muutamia ryhmittelyesimerkkejä ([M][S][Pw]):

h1,h2,h3,h4,h5,h6 {color:red;background-color:yellow;border:red 1px solid;} /* tässä ryhmässä on vain tavanomaisia elementtityyppivalitsimia, jotka erillismäärittelyjen sijaan määritellään yhtä aikaa; peräkkäiset pilkut eivät ole sallittuja eikä lista saa päättyä pilkkuun */
h1, p.red {color:red;background-color:yellow;border:red 1px solid;} /* tässä ryhmässä jälkimmäisessä on luokkatarkennin - sen sisältö selvitetään seuraavaksi */
ol li, ol li li li {color:red;background-color:yellow;border:red 1px solid;} /* tässä ryhmässä on koottu ns. hahmonsovitusperiaatteella toimivia määrittelyjä (selitän toisessa yhteydessä mitä periaatteella tarkoitetaan) */
[Alku]

Luokkavalitsin, attribuuttivalitsimet ja id-valitsin

Aiheet

Yleistä luokka-, attribuutti- ja id-valitsimista

Valintakriteereitä voi tarkentaa käyttämällä luokka- (class) ja id-attribuutteja (id tulee sanasta identification) sekä niitä vastaavia valitsimia (class selector tai id selector) tai hyödyntämällä mitä tahansa attriubuuttia. CSS-terminologian pohjalta class ja id attribuutteihin laitetut nimet toimivat elementtitunnisteina.

Luokkavalitsin on tarkoitettu useille samassa dokumenteissa oleville elementeille. Sen ideana on auttaa voittamaan elementtien nimien tuoman rajoituksen. Voit luoda niitä käyttäen niin monta "uutta elementtiä" kuin haluat.

Luokka- ja id-valitsimilla (kuten edempänä käsiteltävillä attribuuttivalitsimilla) on suurempi painoarvo kuin elementtityyppivalitsimilla. HTML-spesifikaatioiden mukaan id-attribuutin nimen tulisi olla dokumenttikohtaisesti uniikki. Id-valitsinta voitaisiin kutsuu oikeastaan uniikkivalitsimeksi, sillä valintakriteeri perustuu (periaatteessa) yksilöivään eli uniikkiin tunnisteeseen (unique identifier). Attribuuttia id kutsutaan englanninkielisissä teksteissä myös sanoilla fragment identifier (= katkelmatunniste, fragmenttitunniste), joten id-valitsinta on mahdollista kutsua myös fragmenttivalitsimeksi.

On kuitenkin huomattava, että CSS:ää tukevat selaimet hyväksyvät CSS:n suhteen saman id-attribuutin arvon useaankin otteeseen annettuna. Saman arvon omaavaa id-valitsimia (HTML-spesifikaatioiden vastaisesti) voisi käytännössä antaa useaan otteeseen samassa asiakirjassa luokkavalitsinten lisätarkentimina. Tällöin luokkavalitsimet määrittäisivät yleisiä ominaisuuksia ja id-valitsinten avulla annettaisiin poikkeuksellisia ominaisuuksia. Ongelmaksi muodostuu kuitenkin dokumentin oikeellisuuden tarkistus, sillä tarkistuspalvelut huomauttavat dokumentin olevan virheellinen. Sama lopputulos saadaan aikaiseksi standardilla tavalla käyttämällä samalle elementille useita luokkia (annan esimerkin edempänä).

Luokka- ja id-valitsimen nimen voi määritellä sangen vapaasti, mutta niillä on kuitenkin eräitä rajoituksia (samantapaiset rajoitukset ovat yleisiä muissakin ATK-kielissä, mutta säännöt vaihtelevat hieman eri kielissä):

  • Nimen pitää alkaa kirjaimella. Normaalisti ja ongelmitta käytettäviä kirjaimia ova a-z,A-Z + tavuviiva. Alaviivan (_) salliminen on jälkikäteen lisätty CSS2:een.
W3C: Errata in REC-CSS2-19980512.
  • Numeroita saa käyttää, mutta ei ensimmäisenä merkkinä kuten ei myöskään tavuviivaa.
  • Isojen ja pienten kirjainten ero riippuu siitä, käytetäänkö niitä HTML- vai XML-dokumenteissa. Jälkimmäisissä isojen ja pienten kirjainten välillä on ero (engl. kirjaimet ovat case sensitive).
  • Jos käyttää erikoiskirjaimia, niiden eteen tulee laittaa takakenoviiva eli merkki \ (backward slash), esim. w\?. Samoin ISO 10646 161 tai yli olevat kirjaimet ovat periaatteessa käytettävissä numeerisina koodeina. Tyyliattribuuteissa voi käyttää entiteettikoodeja (esim. style="voice-family: D&#252"), mutta ne eivät toimi erillistiedostoissa eivätkä elementin STYLE kanssa (niissä tarvitaan kenoviivoja).

Selainkohtaisia huomautuksia:

  1. Selaimet hyväksyvät virheellisiä nimiä. MS IE 5.x Windows hyväksyy niitä eniten. Tämä on korjattu MS IE 6.0:ssa standard-compliant -moodissa[S]. Myös monet Netscape- ja Opera-selaimet hyväksyvät virheellisiä nimiä, mutta eivät yhtä paljon kuin MS IE 5.x Windows. Minulla on mallisivu[S][Pw] tämän asian testaamiseksi.

  2. Jotkut selaimet reagoivat aina isojen ja pienten kirjainten väliseen eroon attribuutin class arvoissa, mutta kaikki selaimet eivät. Käytä class ja id attribuutteihin viittaavissa säännöissä isoja ja pieniä kirjaimia aina samalla lailla kuin ne ovat itse asiakirjoissa.

  3. En suosittele minkään erikoiskirjaimen käyttämistä, sillä kokemusteni mukaan ne toimivat (ainakin osittain) vain Netscape 6.0+ - ja MS IE 6.0 Windows -selaimissa.

Microsoft: CSS Enhancements in Internet Explorer 6 Public Preview.
[Alku]

Luokka- ja attribuuttivalitsimet

Aiheet

Luokkavalitsin

Seuraavassa on esimerkki elementin P CSS luokka-attribuutista ja sen määrittelystä. Asiakirjan runko-osassa voi olla luokka-attribuutti class="red" ([M][S][Pw]):

<P class="red">Tässä kappaleessa oleva teksti näkyy punaisena</P>

Elementille on olemassa joko asiakirjan alussa or erillistiedostossa sääntö, jossa on vastaavuus elementin sisällä ilmoitettuun tietyn nimiseen luokkaan. CSS-koodauksessa se liitetään pisteellä muihin valitsimiin, esim.:

p.red {color:red;} /* pistettä ennen on elementin nimi ja pisteen jälkeen tulee CSS luokka-attribuutti */

Elementillä on tällöin aina kaksi tai useampi tunnistetta. Ensiksi sillä on elementtityypin nimi (P) ja toiseksi tietyn luokan nimi (red). Nämä kaksi tunnistetta on kytketty toisiinsa. Liittämällä luokkatunniste yleisvalitsimeen, elementti tunnistetaan käytännössä siinä olevan luokan nimen perusteella (yleisvalitsin ei kohdista valintaa millekään tietylle elementille).

.red {color:red;}

Tämän säännön voi liittää (melkein) mihin tahansa elementtiin laittamalla elementtien alkumerkkauksiin attribuutin class="red". Huomaa kuitenkin, että syntaktisesti luokka liittyy aina johonkin toiseen tunnistimeen ja sääntöön.

Luokkavalitsimet ovat tavallaan attribuuttivalitsimia, jotka käyttävät pistettä erotinmerkkinään. CSS2 tuo mahdollisuuden myös puhtaaseen attribuuttiperustaiseen valitsinten käyttöön ottamalla käyttöön yleiset attribuuttivalitsimet (attribute selectors), joita voidaan pitää varsinaisina attribuuttivalitsimina. Tällöin periaatteessa mitkä tahansa attribuutit ja niiden arvot toimivat tunnisteina. Koska class on semanttisessa mielessä attribuutti, se voidaan esittää muiden attribuuttien tavoin käyttäen varsinaisia attribuuttivalitsimia. Käsittelenkin seuraavaksi attribuuttivalitsimia.

On myös mahdollista antaa samalle elementille useita luokkia jättämällä välilyönti (esim. class="a b c"), esim.:

.a {color:black; border:1px solid black; blackgroud-color:white}
.special {color:red}
...
<div class="a special">

En pidä sitä kuitenkaan kovin suositeltavana tapana. Ominaisuudet voivat olla toisensa kumoavia. Selaimelle tulee lisätöitä selvitellessä prioriteettisuhteita ja CSS:n laatija itse voi mennä sekaisin. Mikäli niitä käytetään, on oltava erityisen huolellinen.

Selainkohtaisia huomautuksia:

  1. Luokkavalitsimia voidaan yhdistää toisten luokkavalitsimien kanssa jos attribuutilla class on välilyönnin erottamia luokkalistoja, esim. <th class="a b c">. MS IE -selaimet eivät tue kunnolla yhdistettyjä luokkavalitsimia. Esim. th.a.b.c pitäisi toimia <th class="a b c"> mutta ei <th class="c"> kanssa kuten se toimii MS IE -selaimissa. Luokan nimien joukossa pitää olla a, b ja c, mutta MS IE ottaa huomioon vain sääntölistassa viimeisenä olevan luokan nimen. MS IE käyttäytyy ikään kuin th.a.b.c == th.c. Luokan nimi sinänsä voi olla satunnaisessa paikassa class-attribuutin sisällä, esim. class="x b c a". Erich Mayerin mukaan yhdistelmät eivät toimi myöskään MS IE Mac-selaimissa.
  2. Netscape 4.x ja MS IE 4.x Windows eivät tue useiden luokkien antamista samalle elementille (testasin class="noPrint b" eikä Netscape 4.79 näyttänyt tekstiä lihavoituna .b {font-weight:bold} mukaisesti).

Attribuuttivalitsimet

Attribuuttivalitsimet on ensisijaisesti suunniteltu XML-dokumentteja varten, jotta CSS:llä on mahdollisuus toimia minkä tahansa XML-pohjaisen kielen kanssa (eräät XML-pohjaiset kielet nimittäin vaativat niiden toimivuutta). CSS2:n mukaan *.red {color:red;} ja p.red {color:red;} -tyyppiset säännöt on tarkoitettu vain HTML-dokumenteille. XML-dokumenteissa ei pitäisi käyttää tällaisia yhdistelmäsääntöjä. Niissä tulisi käyttää vain yleis-, elementti- ja attribuuttivalitsimia sekä niiden yhdistelmiä.

Koska XML on metakieli, XML-dokumenttien elementeillä ja attribuuteilla (muutamia perusattribuutteja lukuunottamatta) ei ole mitään oletuskäyttäytymistä tai -tehtävää elementit ja attribuutit tulee pystyä tunnistamaan sinänsä. Vaikka .luokka {} ja #id {} tyyppisten sääntöjen (käsittelen jälkimmäistä tyyppiä edempänä) tukeminen ei kuulu tiukkoihin XML-kieliin XHTML:ää tukevien selainten oletetaan tukevan niitä. .luokka {} ja #id {} muotoisten sääntöjen ei pitäisi kuitenkaan automaattisesti toimia XML-pohjaisissa kielissä kuten ei myöskään style attribuutin sisällä olevan CSS:n. Jos selain ei saa DTD-tietoja, edellä mainitut CSS:n määrittelytyypit pitäisi hylätä. Ne pitäisi hyväksyä vain siinä tapauksessa, että käytetty dokumenttityyppi tukee id, class and style attribuutteja samalla tavalla kuin HTML:ssä.

Attribuuttivalitsimet käyttävät hakasulkuja ([]). Attribuuttivalitsimissa attribuuttien nimet ja niiden arvot toimivat tunnisteina. Ne toimivat aina yhdessä muiden valitsinten kanssa kuten seuraavissa esimerkeissä (mallisivussa[S][Pw]):

[href] {color:red} /* tämän esimerkin mukaan kaikki elementit, jotka sisältävät attribuutin href saavat punaisen värin; tässä esimerkissä vain attribuutin nimi toimii tunnistimena */
[class="example"] {color: blue;} /* mikä tahansa elementti, jolla on luokka-attribuutti example saavat sinisen värin; tällä kertaa tunnistimena on sekä attribuutin nimi että sen tarkka arvo */
[class~="red"] {color:red;} /* mikä tahansa elementti, jossa on luokka-attribuutti red saavat punaisen värin; ~-merkki ei ole tässä tapauksessa välttämätön; sitä voidaan käyttä, jos class attribuuteilla on välilyönnin erottamia arvolistoja, esim. class="green red" (esimerkin sääntö koskee myös tätä attribuuttia) */
*[src] {background-color:aqua} /* mikä tahansa elementti, jolla on attribuutti src, saavat taustavärin aqua; yleisvalitsimen (*) käyttö ei ole periaatteessa välttämätöntä */
span[class="example"] { color: blue; } /* elementti SPAN, jolla on luokka-attribuutti example saavat sinisen värin; - huomaa, että elementtivalitsimen nimen on oltava kiinni attribuuttivalitsimessa; välilyönti muuttaa sisällön seuraavanlaiseksi: elementti SPAN, jonka perässä on elementti, jolla on attribuuttina class="example", saavat sinisen värin (selitän myöhemmin tarkemmin tämänkaltaisia sääntöjä) */
p[class~="red"] {color:red;} /* ne P elementit, joilla on luokka-attribuutti red saavat punaisen värin; */

Jos luokkavalitsimet ilmaistaan attribuuttivalitsimina, niillä on sama prioriteetti. Mikäli kuvauslohkojen ominaisuudet ovat erilaisia, viimeksi annettu jää voimaan kuten seuraavissa esimerkeissä:

.testi {color:red}
*[class="testi"] {color:blue} /* tällä säännöllä on sama prioriteetti kuin edellisellä säännöllä, mutta sen on annettu edellisen jälkeen, jolloin se kumoaa edellisen; jotkut MS IE -selaimet lukevat tämän ikään kuin yleisvalitsimena */
p.testi{color:olive} /* tämä sääntö kumoaa edellisen, sillä mukana on elementtityypin tuoma tarkennus */
p[class="testi"]{color:green} /* tällä säännöllä on sama prioriteetti kuin edellisellä säännöllä, mutta sen on annettu edellisen jälkeen, jolloin se kumoaa edellisen*/

Voit katsoa virhesivulta lisää malleja, miten selaimen tulisi toimia[S][Pw].

Selainkohtaisia huomautuksia:

  1. MS IE -selaimet eivät osaa ensisijaisesti XML:lle tarkoitettuja attribuuttivalitsimia.

  2. Attribuuttivalitsimet toimivat tällä hetkellä vain Mozilla Gecko, Opera 4.x+, Konqueror (Linux) ja Safari (Mac) -selaimissa. Opera 4.x-6.x:n kohdalla ne toimivat melkein kaikissa tilanteissa, mikäli niiden kanssa käytetään eksplisiittisesti elementtityyppi- tai yleisvalitsimia, esim. a[target="new"] {...} or *[target="new"] {...}.

  3. Muoto *[...] {...} aiheuttaa eräillä MS IE -selaimilla virhekäyttäytymisen. Käytä siksi vain muotoa a[...] {...}.

  4. Attribuuttivalitsimet voivat käyttää myös | merkkiä, esim. th[class|="a"], jolloin class attribuutilla on tavuviivan erottama arvolista, joka alkaa tietyllä sanalla. Yhdistetyissä säännöissä, jotka käyttävät | (esim. td[class|="a"][id="a"]) Opera hylkää jälkimmäisen attribuuttivalitsimen (edellä mainitun säännön ei pitäisi toimia <td class="a-b-c" id="b"> kanssa kuten se toimii Operassa).

  5. Mozilla Gecko -selaimet tukevat attribuuttivalitsimia myös eräille kuvitteelliselle attribuuteille eli voisi sanoa että se tukee "näennäisattribuuttivalitsimia" (ks. CSS notes 1[S]).

  1. MS IE ja Opera hyväksyvät XML-dokumenteissa myös vain HTML-dokumenteille tarkoitetut säännöt. Tällä menettelyllä MS IE - ja Opera-selaimet häpäisevät XML:n perusperiaatetta. Ne luovat nimittäin XML-elementtien attribuuteille automaattisesti HTML:n kaltaisen oletuskäyttäytymisen.

  2. Olen huomannut, että joskus ei saa samoilla arvoilla yhtäläistä lopputulosta MS IE -, Mozilla Gecko - ja Opera-selaimille. Tällöin voi attribuuttivalitsimia käyttäen antaa jälkimmäisille selaimille omat arvot. Tästä syystä olisi jopa suotavaa, että MS IE ei milloinkaan tukisi attribuuttivalitsimia.

  3. Mozilla Gecko -selaimet käyttävät XML:ssä ehdotettua @namespace at-sääntöä tunnistaakseen käytetäänkö HTML:n mukaisia CSS-periaatteita. Nämä selaimet määrittelevät HTML-asetukset tiedostossa /res/html.css. Siinä on alussa @namespace url(http://www.w3.org/1999/xhtml);. Jos dokumentissa on vastaava xmlns tieto (xmlns="http://www.w3.org/1999/xhtml"), ne tulkitsevat CSS:n HTML-periaatteiden mukaan, sillä XHTML 1.0:ssa aiemmin mainitut attribuutit toimivat HTML:n tavoin. Ilman täsmäävää nimiavaruusattribuuttia, ne tulkitsevat CSS:n yleisten XML-periaatteiden mukaan, jolloin attribuutit class, id ja style toimivat vain varsinaisia attribuuttivalitsimia käyttäen.

[Alku]

Id-valitsin

Jotta id-valitsin erottuisi muista tunnisteista, se liitetään elementissä attribuutin id sisälle. CSS-koodauksessa se käyttää merkkiä #. Se voidaan liittää välittömästi jonkin muun valitsimen perään ilman pistettä. Jos se liitetään yleisvalitsimeen, sen muoto on *#joku-id. Tämä on kuitenkin turhaa, sillä attribuuttivalitsimien tavoin, niitä ei tarvitse eksplisiittisesti liittää mihinkään elementtiin. Seuraavassa on id-valitsimen käytön esimerkki ([M][S][Pw]):

<HEAD>
<TITLE>
Sovita id-valitsin vain elementille H1</TITLE>
<STYLE type="text/css">
h1#z98y {letter-spacing: 0.5em } /* huomaa # - merkki, joka ilmaisee, että kyseessä on id-valitsin; väliin ei tule pistettä; mikäli jätät tyhjän välin, säännön sisältö muuttuu toiseksi */
</STYLE>
</HEAD>
<BODY>
<H1 id="z98y">
Laajaa tekstiä</H1>
</BODY>

Id-valitsinten painoarvo on suurempi kuin attribuuttivalitsimien. Siten esim. #p123 {...} on tarkennetumpi sääntö kuin [id="p123"] {..}. Merkintätavan mukaan niiden tulisi olla saman arvoisia, sillä niillä on asiakirjan runko-osassa sama vastaavuus (esim. <P id="p123">). Asialla ei tällä hetkellä suurta merkitystä, mutta tulevaisuutta ajatellen tämäkin seikka on hyvä pitää mielessä (katso toinen esimerkki virhesivulta[S][Pw]).

Vaikka style-attribuutit eivät luo varsinaisia sääntöjä (niiden sisällä on vain yksittäisiä kuvauksia ja kukin niistä muodostaa yhden kuvauslohkon), ne luovat omaa painoarvoaan vastaavia loogisia sääntöjä. CSS1 spesifikaatiossa sanotaan näin:

A declaration in the STYLE attribute of an element (...) has the same weight as a declaration with an ID-based selector that is specified at the end of the style sheet.

CSS2 spesifikaatio (6.4.3 Calculating a selector's specificity) sanoo, että ne ymmärretään olevan muiden sääntöjen jälkeen. Tässä ei ole kyse painoarvosta vaan ns. cascading order[S]-periaattesta, jota käsittelen edempänä.

Selainkohtaisia huomautuksia:.

  1. Koska id-tunnisteita käyttävät muutkin kuin CSS-määrittelyt, ne voivat aiheuttaa tiedoston laatijalle sekaannuksia. Mm. JavaScript-koodus käyttää elementtien sisällä samanlaisia tunnisteita. Tosin samaa tunnistetta voi yhtä aikaa käyttää sekä CSS että JavaScript - jälkimmäiselle id:n arvo tulee olla ehdottomasti uniikki!

  2. Samojen tunnisteiden käyttäminen eri tarkoitukseen ei yleensä tuota asiakassovellukselle (User agent, UA) ongelmia, sillä niitä tulkitsevat ohjelman eri alikomponentit. Tosin saamani sähköpostin mukaan samojen tunnisteiden käyttö sekä CSS:n että skriptien kanssa voi tuottaa ongelmia MS IE 4.x Windows -selaimissa. On myös tärkeää käyttää nimiä, jotka toimivat sekä JavaScript että CSS käytössä. Olen laatinut ohjeet sivulla Help for HTML All menu[S].

  3. Koska XML-kielissä ei tarvita DTD:tä (tai selaimet eivät sitä aina lue) #id {} muotoiset säännöt eivät välttämättä toimi kaikissa XML-kielissä. Ks. myös aiempi XML-periaatteisiin liittyvä huomautus[S] sekä attribuuttivalitsinten käsittelyn ensimmäinen kappale[S].

[Alku]

Näennäisluokat ja -elementit

Aiheet

Toimintaperiaate

Näiden luokkien määrittelyt on luotu siksi, että mitkään tavanomaiset dokumenttipuuhun[S][Pw] perustuvat määrittelyt eivät toimi tietyissä tilanteissa. Siksi on luotu kaksi apukäsitettä, jotka muistuttavat normaaleja tyyppi- ja luokkamäärittelyjä. Koska ne eivät kohdistu lähdekoodissa nähtävään kokonaiseen elementtiin (kuten <P></P>), ne ovat tavallaan fiktiivisiä. Niitä nimitetään siksi näennäiselementeiksi ja -luokiksi.

Pseudo-class on apukäsite, joka CSS:ssä mahdollistaa elementtien luokittelun samaan tapaan kuin luokkien avulla, mutta joissakin tapauksissa HTML-dokumentin ulkopuolisiin seikkoihin perustuen (esim. sen mukaan, onko linkkiä seurattu vai ei).

Pseudo-element on apukäsite, jolla CSS:ssä liitetään valitsimia elementin esitysasullisiin aliosiin (kuten elementin esitysasun ensimmäiseen riviin or kirjaimeen) samaan tapaan kuin elementtityyppivalitsimia liitetään elementteihin.

Näennäisluokat

Yksinkertaiset elementtityyppivalitsimet eivät ole sidoksissa elementin sisällä oleviin attribuutteihin. Näennäisluokka liittyy aina joko todelliseen tai kuvitteelliseen attribuuttiin periaatteessa aivan samalla mekanismilla kuin class-attribuutti (muista että myös luokkavalitsin on sidottu tiettyyn attribuuttiin). Näennäisluokat tarjoavat mahdollisuuden saman elementin erilaiseen esitystapaan vaihtelevissa tilanteissa.

Erityisesti linkeillä voi olla hyvinkin monia esitystapoja eri tilanteissa ja yleisimmin tämän ryhmän määrittelyjä tapaa juuri linkeissä. Linkin olemassaolo ilmaistaan HTML-dokumenteissa attribuutilla href ja linkin tilan esitysmuoto määritellään HTML 3.2:ssa BODY elementille annetuilla link ja visited attribuuteilla. Näennäisluokat :link ja :visited antavat mahdollisuuden määritellä linkin tilan esitysmuoto ilman HTML-attribuutteja.

Linkkeihin liittyviä näennäisluokkia ovat linkkinäennäisluokat (link pseudo-classes) :link & :visited sekä dynaamiset näennäisluokat ( dynamic link pseudo-classes) :hover, :active ja :focus. Dynaamiset näennäisluokat koskevat muitakin elementtejä kuin vain ankkurielementtiä (A) ja ne liittyvät ainoastaan elementin kulloiseenkin tilaan.

W3C: CSS2: 5.11.2 The link pseudo-classes[Pw], 5.11.3 The dynamic pseudo-classes[Pw].

Linkkeihin liittyvien näennäisluokkien muoto on esim.:

a:link { color: red }
:link {color: red }
/* ankkurielementtiä A ei ole tässä tapauksessa välttämätöntä merkitä HTML-asiakirjoissa, sillä selain tietää, että näitä käytetään vain ankkurielementtien yhteydessä */

Selainkohtaisia huomautuksia:

  1. Näennäisluokka :link edellyttää toimiakseen sen, että ankkurielementti sisältää attribuutin href eikä niiden pitäisi toimia pelkän elementin A kanssa. Netscape 4.0x ja Opera 3.x tukevat :link ilman href attribuuttia.

  2. Opera 3.x ja Netscape 4.x tukevat vain linkkinäennäisluokkia (:link, :visited).

  3. MS IE 4.x+ tukee :active CSS1-spesifikaation mukaan (linkkinäennäisluokan tavoin) ja :hover rajoitetusti.

  4. Opera 4.0x tukee :hover ja Opera 5.0x+ lisäksi :active (molemmat toimivat rajoitetusti).

  5. Laajin tuki on Mozilla Gecko ja Opera 7.x+ -selaimissa, jotka tukevat myös :focus. Niissä dynaamiset näennäisluokat voidaan liittää myös muihin elementteihin kuin elementtiin A. Tästä syystä pitäisi aina merkitä, mitä elementtejä dynaamiset näennäisluokat koskevat (esim. a:hover). Opera tukee :hover laajimmin, mutta :focus toimii vain lomakekontrollielementtien kanssa, mikä on mielestäni oikein sillä A vain toteuttaa tietyn tehtävän, mutta elementti ei pysy fokuksessa.

Käsittelen linkkeihin liittyvien näennäisluokkien käyttöä vielä sivulla 7[S][Pw].

Samalla periaatteella toimivat kielinäennäisluokka (:lang()). Se reagoi dokumentin kieliattribuuttiin ikään kuin se olisi luokkatarkennin.

W3C: CSS2: 5.11.4 The language pseudo-class[Pw].

Vain CSS2 -tason näennäisluokka on myös first-child pseudo-class, jonka merkintänä on :first-child. Käsittelen sen käyttötavan sekä toimivuuden sivulla Prosessointijärjestys[S][Pw]. Samassa yhteydessä käsittelen ns. adjacent sibling selector - valitsintyypin. :first-child on luokkien kaltainen apukäsite, mutta ei elementtityypin lisäksi otetaan huomioon elementin järjestys ikään kuin se loisi luokkatarkentimen. :first-child valitsee ensimmäisen saman tason samaa tyyppiä olevan elementin.

Selainkohtaisia huomautuksia:.

  1. Kielinäennäisluokka ei toimi missään selaimessa. Kieliriippuvaisia sääntöjä voidaan luoda Opera ja Mozilla Gecko -selaimille attribuuttivalitsimia käyttäen. [lang="en"] on HTML-dokumenteille sama kuin :lang(en). Kieliehto ei koske kuitenkaan XML-dokumentteja, sillä niissä käytetään xml:lang attribuuttia. Kielinäennäisluokka on siten merkintäkieliriippumaton, joten esim. :lang(en) koskee sekä xml:lang="en" että lang="en" attribuutteja.

  2. :first-child toimii vain Mozilla Gecko ja Opera 7.x+ -selaimissa.

Väännetään vielä rautalangasta malli, mitä kaikkia ainakin jossakin selaimessa toimivia tunniste- ja valitsintyyppejä yksittäisellä elementillä voi tähän mennessä käsiteltyjen valitsinten perusteella olla.

<A href="joku.hml" target="new" class="oma" id="toinen">

Tuo elementti sisältää seuraavat mahdolliset tunnistetyypit, joihin voidaan viitata CSS-säännöissä:

  1. * (* {...}) = ei erityistunniste - selain vain tunnistaa, että dokumentissa on elementtejä
  2. A (a {...}) = elementtityyppitunniste
  3. oma (.oma {...}) = luokkatunniste
  4. toinen (#toinen {...}) = id-valitsimen tunniste
  5. class, id, href, target ([class] {...} jne.) = attribuutin nimi attribuuttivalitsimen tunnisteena
  6. class="oma", id="toinen", href="joku.html", target="new" ([class="oma"] {...} jne.) = attribuutti + attribuutin arvo attribuuttivalitsimen tunnisteena
  7. a:link, a:visited (a:link {...} jne.) = tunnistus, onko linkissä vierailtu vai ei (linkit staattiset tilat)
  8. a:hover, a:active, a:focus (a:hover {...} jne.) = tunnistus, mikä on linkin mahdollinen dynaaminen tila

Näennäiselementit

Näennäiselementit eivät käytä mitään attribuuttia lisätunnistimenaan. Ne toimivat yhdessä muiden valitsinten kanssa. Jos näennäiselementti liittyy vain tiettyyn elementtityyppiin, siihen ei tarvitse liittää muita valitsimia. Koska CSS2:n mukaan :first-letter ja :first-line voidaan liittää mihin tahansa lohkoelementteihin (CSS3:n mukaan em. näennäiselementit koskevat mitä tahansa elementtiä) on tarpeen merkitä, mitä elementtiä ne koskevat. Niille voitaisiin luoda kuvitteellinen koodijono (fictional tag sequence) ja ensimmäinen voitaisiinkin korvata esim. koodisarjalla <B><BIG><FONT color="#660033"> ? </FONT></BIG></B>, mutta jälkimmäiselle sitä ei aina voi luoda, koska rivi voi katketa ei kohdista, mikäli sitä ei ole pakotettu tiettyyn leveyteen.

HTML 3.2 koodisarjat ovat hitaita luoda ja ne ovat sangen joustamattomia. Näennäiselementit ovat helppo ja joustava tapa tehdä kappaleiden ensimmäisille kirjaimille tai ensimmäiselle riville muista poikkeava esitystapa. Esim. seuraavan kuvauksen mukaan kappaleiden ensimmäinen kirjain on 120% suhteessa kappaleen muuhun tekstiin, lihavoitu ja väriltään #660033 eli violetinruskea ([M][S][Pw]):

p:first-letter {font-size:120%; font-weight:bold; color:#660033;} /* kappaleen alkukirjan */
p:first-line {font-size:110%;} /* kappaleen ensimmäinen rivi */

Selainkohtaisia huomautuksia:.

  1. Opera 3.51-3.6x, MS IE 5.5+ Windows ja MS IE 5.0+ tukevat niitä CSS1-tasoisesti. Tosin olen havainnut, että ne eivät aina toimi MS IE -selaimissa. Tekemissäni testeissä outo seikka oli se, että MS IE 6.0 Windows tuki niitä CSS-sivuillani LI mutta ei P elementeille kuten MS IE 5.5 Windows.

  2. MS IE 5.5:ssä font-size ominaisuus ei toimi p:first-letter kanssa jos kappale ala jollakin rivinsisäiselementillä. Joissakin tilanteissa fontin värin muutokset saattavat aiheuttaa virheellisen lopputuloksen. Näennäiselementtejä voi käyttää otsikkoelementtien kanssa.

  3. Jos ensimmäinen kirjain on elementti (esim. <p><cite>Alkusana<cite>) Opera 7.x hylkää kaikki sellaiset omainaisuudet, jotka ovat ristiriivassa kyseisen elementin kanssa vaikka ominaisuudet olisi merkitty näennäisluokalle :first-letter erityisen tärkeiksi (käsittelen tärkeysjärjestystä myöhemmin).

  4. Jos elementti P on määritelty käyttäytymään rivinsisäiselementtinä Opera hyväksyy p:first-letter myös tällöin vaikka sitä pitäisi soveltaa vain lohkoille.

  5. Opera 4.x+ ja Mozilla Gecko -selaimet osaavat sekä CSS1 että CSS2 tason näennäiselementtivalitsimet (:before and :after), joita käsittelen niitä myöhemmin tällä sivustolla.


W3C: CSS2: CSS2 5.12 Pseudo-elements[Pw].

[Alku]

Muut valitsimet ja valitsinluettelot

Aiheet

Yleistä

Niiden lisäksi ns. taulukoita käsittelevillä sivuilla puhutaan valitsimista (row selectors ja column selectors). CSS2 spesifikaatiot eivät liitä niitä yleiseen valitsinlistaan vaan se käsittelee niitä luvussa 17. CSS2 standardi ei liitä niitä yleislistaan eikä niillä ole mitään erityisvalitsimia, vaan ne hyödyntävät jo aiemmin esille tulleita valitsintyyppejä.

Samoin eräänlaisia pseudoluokkia ovat CSS2 sivukatkosääntöihin liittyvät :left ja :right (sivusäännöt eivät toimi vielä kovin monessa selaimessa, mutta tulevaisuudessa niistä on hyötyä).

Selainkohtaisia huomautuksia:

  1. Näennäisluokat :left ja :right toimivat uusissa Opera selaimissa.

  2. Uudet Mozilla Gecko -selaimet tukevat suurta joukkoa selainkohtaisia näennäiselementtejä ja -luokkia (ks. CSS notes 1[S]).


W3C: CSS2: 13 Paged media[Pw], 17 Tables[Pw].
Muita sivustoja: John Allsop: Kinds of Selector[Pw].
[Alku]

CSS2:n valitsimet

  • The universal selector
  • The element type selector/ type selector
  • The first-child selector
  • The adjacent sibling selector
  • The class selector
  • The id selector
  • Attribute selectors
  • Pseudo-class selectors:
    • Link pseudo-classes:
      • :link
      • :visited
    • Dynamic pseudo-classes:
      • :active
      • :hover
      • :focus
    • The language pseudo-class
    • The first-child pseudo-class
  • Pseudo-element selectors:
    • :fist-letter
    • :fist-line
    • :before
    • :after
  • Erityisnäennäisluokat, joita käytetään sivukatkoissa:
    • :first
    • :left
    • :right
[Alku]

CSS3:n valitsimet

CSS3:een on ehdotettu seuraavia uusia yleiskäyttöisiä valitsimia:

  • Rakenteellisia näennäisluokkia (structural pseudo-classes):
    • :root
    • :not-first-child
    • :last-child
    • :not-last-child
    • :first-of-type
    • :not-first-of-type
    • :last-of-type
    • :not-last-of-type
    • :only-of-type
    • :not-only-of-type
    • :only-child
    • :not-only-child
    • :nth-child(n) (n=kokonaisluku)
    • :nth-of-type(n)
  • Muita näennäisluokkia:
    • :subject (subject element pseudo-class)
    • :target (target pseudo-class)
  • Muita valitsimia:
    • "" (esim. address"someContent"; sisältövalitsin, content selector)
    • ~ (esim. ul ~ ol; epäsuora sisarvalitsin indirect adjacent combinator)

Näiden lisäksi on ehdotettu HTML 4.0 lomake-elementtien toiminnallisuuksia simuloivia sääntöjä[S].

Selainkohtaisia huomautuksia:

  1. Mozilla Gecko -selaimet tukevat useimpia CSS3:een ehdotettuja näennäiselementtejä ja -luokkia (ks. CSS notes 1[S]).

En kuitenkaan käsittele niitä. Seuraavaksi on prosessointijärjestyksen käsittely.

[Alku]

5. Mikä on CSS:n prosessointijärjestys

Yleistä

CSS-tiedostojen rakentelun kannalta olennaisinta on ymmärtää, missä järjestyksessä selain lukee CSS-ominaisuudet.

CSS

Periaatteessa selaimella on kolmenlaisia tyylisivuja (en voi antaa esimerkkejä vaan sinun on itse tutkittava käyttämääsi selainta):

  1. UA style sheets (UA = User Agent = asiakassovellus, joka on yleensä selain tai sitten jokin muu ohjelma, joka osaa käyttää tyylisivuja). Kyse on ohjelman omista elementtimäärittelyistä silloin, kun kukaan ei ole määritellyt tyylisivuja. Itse asiassa kyse on pääosin tavallisten HTML 3.2 tai HTML 4.01 elementtien ja attribuuttien ymmärtämisestä. Eri selaimilla on hieman toisistaan poikkeavia oletusarvoja. Tallennetut asetukset luovat eräänlaisen selaimen oman tyylisivutiedoston. Selaimilla voi olla myös tuki eräille CSS-ominaisuuksille, joita voi sovittaa mille tahansa www-sivulle. MS IE 5.x+:lla voi määrittää linkeille ominaisuuden hover. Sillä on sama merkitys kuin näennäisluokalla :hover. Mozilla Gecko -selaimet määrittävät HTML-asetukset UA CSS:n avulla res/html.css ja /res/html.css tiedostoilla (myös Opera hyödyntää UA CSS:ää muissa kuin HTML-toteutuksissa; käsittelen UA CSS:n käyttöä erillisivulla[S]). Selaimen omat elementtimäärittelyt ovat voimassa silloin, kun elementtejä ei ole CSS:n avulla erityisesti määritelty.

    Muulla tavoin määritellyt CSS-ominaisuudet ohittavat yleensä selaimen tyylisivutiedoston ja HTML-attribuutit, mutta on olemassa eräitä poikkeuksia ja selainten välillä on tässä suhteessa eroja. Nämä muutamat erot on sivujen tekijän syytä tuntea, mikäli hän haluaa sivujensa näkyvän mahdollisimman samankaltaisena CSS-ominaisuuksia tukeville selaimille. Käsittelen näitä toisissa yhteyksissä.

  1. User style sheets eli selaimen käyttäjän selaimelle määrittelemät CSS-tyylisivut. Periaatteessa selaaja voi luoda CSS-ominaisuudet kaikille netistä lukemilleen tiedostoille luomalla oman tyylisivutiedoston, jonka hakemistopolun (path) hän ilmoittaa selaimelle (selitän niiden käyttöä tarkemmin sivulla[S].
  2. Author style sheets eli dokumentin kirjoittajan tekemät CSS-määrittelyt. Näiden suhde käyttäjän tyylisivuihin on käytännössä selainriippuvainen. Periaatteessa sitä voi hieman kontrolloida CSS:n avulla ns. important rule -periaatteella, jonka avulla yksittäiset CSS-ominaisuudet määritellään erityisen tärkeiksi (selitän tarkemmin sen käytön tämän sivun lopussa). CSS2:n mukaan etusija on käyttäjän tyylisivuilla ja CSS1:n mukaan dokumentin laatijan tyylisivuilla.
W3C: CSS2: 6.4.2 !important rules[S][Pw].

[Alku]

Perusideat

Aiheet

Perusvertauskuvat

Selain tulkitsee kaikki määrittelyt tiettyjä sääntöjä noudattaen. Useimmat säännöt perustuvat ns. dokumenttipuuhun. Puuvertauksen lisäksi tietokonekielessä käytetään sukumetaforaa. Alkukielessä puhutaan mm. vanhemmasta (parent) ja lapsista (child). Suomenkielisen yleisen tietokonekielen pohjalta on kuitenkin syytä käyttää ilmaisua emo (lue perustelut[S][Pw]). Lapsielementeillä saattaa edelleen olla pakollisia (required) ja siten tavallaan luonnollisia lapsielementtejä (lapsielementit voivat olla myös ei-välttämättömiä).

Emo- ja lapsielementtien välistä suhdetta havainnollistaa yksinkertaistettu dokumenttipuu:

BODY  - H1 (pääotsikko, jonka sisään laitetaan yleensä vain joitakin rivinsisäisiä fonttityylielementtejä; ne eivät ole elementin H1 välttämättömiä lapsia)
- P - BLOCKQUOTE
- OL (tämä on seuraavien listaelementtien "emo"; emolla täytyy olla vähintään yksi lapsi )
LI (yksittäinen listaelementti eli siis edellisen elementin lapsi)
LI (toinen listaelementti listaelementeillä voi olla hyvinkin monia tasoja ja siten ikään kuin "lastenlapsia")

Suurin osa säännöistä on nimetty sukumetaforaa käyttäen eikä metaforan rikkautta voi täysin ilmaista suomenkielisissä vastineissa. Alkukielen kuvakieli on kuitenkin syytä pitää mielessä. Elementeistä puheen ollen on muistettava, että nämä nimet liittyvät elementtitasoihin ja elementtien keskinäisiin suhteisiin toisiinsa nähden ns. dokumenttipuussa (systeemi toimii osittain myös attribuuttivalitsimilla). Käsittelen tässä yhteydessä myös :first-child näennäisluokkavalitsimen (sitä voisi kutsua "näennäisesikoisluokkavalitsimeksi"). Se on osa koko systeemiä ja se voidaan ymmärtää vain suhteessa muihin käsitteisiin. Yritän selittää kaiken niin ruohonjuuritasoisesti kuin voin. Elementtien keskinäisiä suhteita koskevat CSS-metaforan osat ovat seuraavat:

 
  • Parent = taso vanhempi eli "emoelementtitaso". Olennaista on se, että kirjoitettaessa emosta, emolla tulee olla vähintään yksi lapsitason elementti, jonka se sulkee sisäänsä. Se sulkee lapsielementin sisäänsä suoraan, ilman, että rakenteessa on niiden välissä muuta elementtiä eli kyseessä on ympäryselementti.
    Kanaemo ja sen poikaset
  • Child = taso lapsi eli mikä tahansa lapsitason elementti, jolla on emotason elementti. Huomaa, että lapset ovat vain ensimmäisen alatason elementtejä ilman, että rakenteessa on emo- ja lapsielementtien välissä muuta elementtiä. "Lastenlapset" ovat "perillisiä" (descendants). Lapsielementit voivat olla emoelementille pakollisia osaelementtejä, mutta ei välttämättä.
  • First-child = ensimmäinen lapsi eli esikoinen; elementtitasoista puhuttaessa kyseessä on ensimmäisen emoelementtitason jälkeen tuleva lapsielementtitaso (:first-child - näennäisluokassa kyse on puolestaan yksittäisestä elementistä jollakin elementtitasolla)
  • Ancestor = esi-isä, esivanhempi eli "esi-isäelementti" (tai "esiemoelementti"). Osittain sama kuin parent, mutta toistensa sisään sijoittuvia tasoja voi olla useita, kuten perheessä isoisällä on lastenlapsia ja lastenlapsilla voi edelleen olla lapsia jne.
  • Descendant = perillinen eli perilliselementtitaso. Osittain sama kuin child, mutta elementtien välissä voi olla useita elementtitasoja. "Lapsenlapset" ovat aina perilliselementtejä.
  • Adjacent sibling = viereissisarelementti eli "viereissisarelementtitaso". Sisarelementeillä on sama emo. Sisarelementit eivät ole koskaan keskenään sisäkkäin vaan ovat samalla tasolla ikään kuin siskokset. Adjacent sibling on ilmoitetun sisarustason jälkeen seuraava saman tason elementti. CSS2 liittää "sisarussuhteisiin" vieläkin tarkempia ilmaisuja.
    • Preceding sibling. Perheessä on aina yksi esikoinen ja hänen jälkeensä tulevat muut siskokset. Adjacent sibling määrittää vain elementtitason. Jotta esikoinen voitaisiin tarkasti nimetä, tarvitaan :first-child näennäisluokkaa. Preceding sibling on sisarusparven esikoinen, ennen muita sisaria.
    • Following sibling. Joku muu saman "elementtiperheen" sisarus.
    • Preceding element. Elementti, joka on heti jäljessä tulevaan sisarelementtiin nähden samalla tasolla sitä ennen tai edellisellä elementtitasolla.
    • Following element. Kyseessä on edelliseen nähden päinvastaisesta suhteesta. Näiden eroa aiemmin mainittuihin yleisempiin ilmaisuihin selventänee (?) seuraava yritys suomentaa CSS2 spesifikaation selityksiä (mukana on alkuperäistermit, sillä ilman niiden ymmärtämistä ei selviä):
      • Ancestor (element). Elementtiä A kutsutaan elementin B esi-isäelementiksi (ancestor), jos ja vain jos B tulee elementin A jälkeen eli on sen jälkeläiselementti (descendant).
      • Descendant (element). Elementtiä A kutsutaan elementin B jälkeläiselementiksi (descendant), jos elementti A on joko
        (1) elementin B lapsi or
        (2) jonkun muun elementin (C) lapsi ja on samanaikaisesti elementin B jälkeläiselementti (descendant) elementti
      • Preceding element. Elementtiä A kutsutaan elementin B edeltäväksi (preceding) elementiksi, jos ja vain jos
        (1) A on elementin B esi-isäelementti or
        (2) A on elementin B edeltävä sisarelementti (preceding sibling).
      • Following element. Elementtiä A kutsutaan elementin B jäljessä tulevaksi elementiksi (following) jos ja vain jos B on elementin A edeltävä (preceding) elementti.
W3C: CSS2: 3 Conformance: Requirements and Recommendations[Pw].
[Alku]

Periytyminen

Perintö

Perheessä lapsi perii vanhempansa ja jälkeläinen saa perinnön esi-isiltään tiettyjen lakien ja asetusten mukaisesti. CSS-ominaisuuksien ymmärtämisessä on olennainen kysymys "perimysjärjestyksestä" (inheritance). Periytymisessä on kyse selaimen automaattisesta toimintamekanismista, jolla ominaisuudet sovitetaan eri elementeille. Periaate koskee toisten sisällä olevia eli sisäkkäisiä elementtejä, jotka ovat dokumenttipuun[S][Pw] (document tree) osia.

HTML-dokumenteissa määriteltävä peruselementti on yleensä BODY. BODY-elementin ominaisuuksien periytyminen toimii hyvin erityisesti tietyillä lohkoelementeillä ja niiden pakollisilla lapsilla. Lohkoelementeille automaattisesti periytyviä ominaisuuksia ovat lähinnä useimmat fontti- ja tekstityyppimääreet.

Käytettävään tekstityyppiin vaikuttavilla elementeillä, kuten H1-H6, B ja I säilyy vaihtelevassa määrin niiden ominaispiirteet. H1-H6 säilyttävät suhteelliset kokosuhteensa perustekstiin nähden, mutta tekstityyli periytyy BODY-elementiltä. Toisilla elementeillä perustyyli ei periydy BODY-elementiltä vaan sen muuttaminen edellyttää uudelleen määrittelyä. Syy siihen, miksi tietyt fontteihin liittyvät ominaisuudet eivät periydy kaikille mahdollisille elementeille on yksinkertaisesti siinä, että niille on määritelty selaimen omissa määrittelyissä tietyt perusominaisuudet. Esimäärittelyjen määrä vaihtelee selainkohtaisesti. Siksi jotkut selaimet tarvitsevat enemmän CSS:ää kuin jotkin toiset. Periytymissysteemissä on lisäksi joitakin puutteita, mutta käsittelen niitä muissa yhteyksissä.

Kaikki ominaisuudet (kuten taustamäärittelyt) eivät periydy emolta lapselle (CSS2 spesifikaation liiteosassa on taulukko, joka kertoo, mitkä ominaisuudet ovat periytyviä ja mitkä eivät).

CSS2:een standardiin on lisätty arvo inherit (esim. TABLE {color:inherit;}), joka siis tarkoittaa, että arvo peritään lähimmältä emoelementiltä. Kyseessä on "pakotettu periytyminen".

Selainkohtaisia huomautuksia:

  1. En suosittele arvon inherit käyttämistä, koska monet selaimet, jotka muuten osaavat sangen hyvin CSS:ää eivät sitä ymmärrä. Omissa testeissäni se on toiminut vain Mozilla 0.7:ssä sekä Mozilla 1.1a:ssa, mutta ei kaikissa suhteellisen uusissa Mozilla Gecko -selaimissa.


W3C: CSS2: Appendix F. Property index[Pw].

[Alku]

Tunnistettavat hahmot ja tapauskohtaiset valitsimet

Automaattinen periytymissysteemi koskee oikeastaan vain elementtien luonnollisia sisäkkäisyyssuhteita. Luonnollisella sisäkkäisyyssuhteella tarkoitan sitä, että esim. listaelementeillä voi edelleen alilistoja, joihin automaattisesti sovitetaan CSS-ominaisuuksia. Elementtien sisäkkäisyys voi olla hyvin monitasoista eikä automaattinen periytyminen pysty luomaan kuin yleislinjat. Tarkemman kontrollin aikaansaamiseksi voidaan luoda ominaisuuksien sovittamisen vastaavuus sääntöjä. Vastaavuussäännöt luovat elementtien kanssa ikään kuin "hahmon", jolle selain pyrkii etsimään sitä vastaavan kohdan dokumentista. Tapauskohtaisia sovelluksia voisi kutsua vaikka nimellä tunnistettava hahmo (a matching pattern).

Koska tunnistettavien hahmojen tarkoitus on luoda yksilöllisiin tilanteiseen sopivia sääntöjä, CSS1 spesifikaatio kirjoittaa tapauskohtaisista valitsimista (contextual selectors), mutta nimitystä ei käytetä CSS2 spesifikaatiossa (siinä säännöt ilmaistaan käyttämällä sanoja ancestor, descendant jne.; ilmaisu tapauskohtainen valitsin on kuitenkin niin kuvaava, että suosittelen senkin käyttämistä).

Näissäkin toimintamekanismi perustuu pääosin dokumenttipuuhun ja suhteiden kuvaamiseen käytetään aiemmin selittämääni sukumetaforaa. Mutta toisin kuin automaattisessa ominaisuuksien periytymisessä, ominaisuuksia ei soviteta automaattisen mallin mukaan vaan ikään kuin avain ja lukko -periaatteella. Kontekstin mukaiset valitsimet ottavat nimensä mukaisesti huomioon ympäristön, jossa tyyli on määritelty. Määritelty tyyli on voimassa vain, mikäli elementti on oikeassa paikassa or sillä on tietty elementti vanhempana.

Itse asiassa yksinkertainen yleis- tai elementtityyppivalitsin on tunnistettava hahmo. Monimutkaisissa tunnistettavissa hahmoissa käytetään kohdistetumpia valitsimia. Erottaaksemme ne yksinkertaisista luokka- ja elementtityyppivalitsimista, tarkoitan tunnistettavalla hahmolla sellaista sääntöjä, jossa on vähintään kaksi ehtoa. Esimerkki yksinkertaisesta tunnistettavasta hahmosta ([M][S][Pw]):

table p {color:green;} /* jälkimmäistä osaa tässä säännössä kutsutaan nimellä descendant selector; määrittelyssä on huomattava, että kaarisulun eteen ei saa laittaa rivikatkoa, sillä olen todennut, että se tekee määrittelyt joskus toimimattomiksi */

Tämän säännön mukaan sellaiset kappaleet jotka ovat elementin TABLE jälkeläisiä (descendant), saavat värin green eli vihreän (kappaleet ovat elementin TD aloitus- ja päätöskoodien sisällä).

Käytän itse tämän tapaista menettelyä usein määritellessäni ei-järjestettyjä listoja (UL) ja niille erilaisia listakuvia. Käyttämällä ryhmittämistä[S][Pw], saadaan eri tason kuville yhtä aikaa sama kuvaus. Alla on esimerkki tällaisesta ratkaisusta ([M][S][Pw] - mukana on myös seuraavan esimerkin mallit):

ul li, ul li li li { /* tässä esimerkissä listan ensimmäisen ja kolmannen tason kuvat saavat vihreän listakuvan (selitän toisessa yhteydessä listoille sallittuja ominaisuuksia) */
list-style-type: disc;
list-style-image: url(pallo-vihrea.gif);
list-style-position: inside;
margin-left: -10px; }


ul li li { /* tässä esimerkissä listan toinen taso saa punaisen listakuvan; ilman lisämäärittelyä se olisi edellisen sääntöryhmän perusteella vihreä */
list-style-type: disc;
list-style-image: url(pallo-punainen.gif);
list-style-position: inside;
margin-left: -10px;}

CSS1-tason tunnistettavissa hahmoissa voidaan elementtityyppivalitsimiin lisätä luokka-tarkentimia. Tavallaan jo luokkavalitsimella tarkennettu elementtityyppivalitsin on jo sinänsä tarkoittamani tunnistettava hahmo, koska siinä samaan kohtaan annetaan kaksi ehtoa (elementti ja sille luokka). Mutta liittämällä nämä muihin elementtityyppivalitsimiin, saadaan monimutkaisempia tunnistettavia hahmoja seuraavien esimerkkien tapaan ([M][S][Pw] - mukana on myös edellisen esimerkin mallit):

ul.class li {
list-style-type: disc;
list-style-image: url(pallo-vaalea.gif);
list-style-position: inside;
margin-left: -10px;}

table.erityinen td p {color:green;} /* tämän säännön mukaan taulukkosolun sisällä oleva kappale saa värin vihreä, vain mikäli se on taulukossa, jolla on luokka erityinen. Huomaa, että luokkaa ei tarvitse määritellä, sillä se on tässä tapauksessa epäolennaista, sillä selain etsii määrittelyä taulukkosolun sisällä olevalle kappaleelle! */

Uudempi CSS määrittely tuo vielä tarkempia sovitussääntöjä. Seuraava kaavio kuvannee asiaa - (OL ja UL ovat listatyyppejä; LI tarkoittaa yksittäisiä listaelementtejä; olen yrittänyt selittää muutamin kommentein systeemiä - mieti sitä joskus kaikessa rauhassa):

 
1) li ol li /* sovitetaan seuraavassa esimerkissä kohtaan, jotka on merkitty class="a"; tämä kuuluu jo CSS1 määrittelyihin ja suosittelen toistaiseksi vain tämän tyyppisten määrittelyjen käyttämistä */
2) li ol > li /* sovitetaan seuraavassa esimerkissä kohtaan, joka on merkitty class="b" */
3) li ol > li:first-child /* sovitetaan seuraavassa esimerkissä kohtaan, joka on merkitty class="b+" */
4) li ol + ul /* sovitetaan seuraavassa esimerkissä kohtaan, joka on merkitty class="c" */
<UL>
<LI>
<OL>
<LI class="b+"></LI>
/* class="b+" on elementin OL "lapsitason" ensimmäinen lapsielementti (kyseessä on ns. first-child selector tarkennettuna :first-child pseudo-class näennäisluokalla): tälle elementille määritellyt ominaisuudet eivät koske seuraavan tason listaelementtejä eikä edes seuraavia samalla tasolla olevia listaelementtejä */
<LI class="b"></LI> /* class="b" on elementin OL toinen lapsielementti (kyseessä on ns. first-child selector): mitkään tämän tason lapsielementeille määritellyt ominaisuudet eivät koske seuraavan tason listaelementtejä */
<UL>
<LI class="a"></LI>
/* class="a"; tämä saa arvon ensimmäisen säännön mukaan, vaikka ei olekaan elementin OL ensimmäisen tason lapsi vaan vasta seuraavan tason lapsi eli "lapsenlapsi"; mikäli tällä elementillä olisi edelleen lapsia, ne saisivat tämän elementin määrittelyt */
</UL>
</LI></OL>
<UL class="c"> /* kyseessä on elementin OL jälkeen seuraavaksi löytyvä elementti UL eli saman tason sisarelementti, (kyseessähän on adjacent sibling selector) , joka määrittelee myös sitten yksittäisten lista-elementtien ulkonäön */
<LI></LI>
</UL>
</LI>
</UL>

On kuitenkin on muistettava, että tunnistettavan hahmon pituus ei yksistään ratkaise. Minulle kävi listatestiä tehdessäni virhe, kun en huomannut kaikkia sääntöjä ja niiden keskinäisiä vuorovaikutussuhteita. Seuraava esimerkki hahmottaa niitä sinulle:

li ol+ul {list-style-type: disc; /* tämän säännön tulisi muuttaa listakuva punaiseksi testatessani sitä eräällä Netscape 6.x esiversiolla */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}

ul li {list-style-type: disc; /* sääntö ei jää voimaan, koska lyhyempi hahmo UL LI kumoaa sen, sillä se jatkaa edellistä määrittelyä siitä, mihin se päättyi! */
list-style-image: url(./Css/Kuvat/pallo.gif);
list-style-position: outside;}

li ol+ul li {list-style-type: disc; /* jotta ensimmäinen sääntö saadaan voimaan ja lyhyempi kumottua, ensimmäistä patteria tulee pidentää yhdellä elementillä - nyt Netscape näyttää suunnitellun kuvan! */
list-style-image: url(./Css/Kuvat/pallo-punainen.gif);
list-style-position: outside;}

Kaikista tarkimmat tunnistettavat hahmot voisi luoda yhdistämällä elementtityyppi- ja attribuuttivalitsimia[S][Pw].

Selainkohtaisia huomautuksia:

  1. MS IE ei tue mitään CSS2-tason tuomaa uutta tunnistettavaa hahmoa.

  2. Vain Mozilla Gecko ja Opera 7.x+ -selaimet tukevat kaikkia tällä sivulla mainittuja tunnistettavia hahmoja mukaan luettuna :first-child näennäisluokan ja attribuuttivalitsimet (voit katsa virhesivulta mallilistan[S][Pw] siitä, miten valitsinten tulisi toimia).

  3. Opera 3.6x eli tue .class p {...}. kaltaisia sääntöjä.

  4. Opera 3.6x+ tukee OL > LI {...} kaltaisia sääntöjä.

  5. Opera 5.x-6.x -selaimet tukevat myäs osittain tai täysin OL + UL {...} kaltaisia sääntöjä.

  6. Opera 4.x+ -selaimet tukevat attribuuttivalitsimia.

[Alku]

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]

6. Miten CSS:n annetaan teksteille ja CSS:n kohdentaminen eri medioille

Yleistä

Kuten sivulla Mikä on HTML ja XML asiakirjojen perusrakenne tuli esille, fontin määrittely on CSS:n kanssa yhteensopivuuden näkökulmasta ongelmallinen. Perusnäkökulma on se, että mitä enemmän halutaan helposti ja joustavasti toteutettavia CSS-määrittelyjä, sitä vähemmän dokumentit ovat ulkonäön suhteen HTML 3.2 yhteensopivia.

Elementti FONT vai CSS?

Mikäli halutaan mahdollisimman suuri alaspäin yhteensopivuus, tulee käyttää elementtiä FONT, vaikka CSS spesifikaatio ei sitä mainitse kuin ohimennen. Kun annat kuvauksen luokalle font-style1, voit jälkikäteen määritellä fontin ominaisuudet uusiksi, mutta vanhemmat selaimet näyttävät HTML 3.2 tasoiset vaihtoehtoiset attribuutit. Tee seuraavan tapainen määrittely dokumentin runko-osaan ([M][S][Pw] - mallisivulla on kaikki tämän jakson mallit):

<FONT class="font-style1" face="Arial" color="#3f3f3f">

Tällainen on kuitenkin aika vaivalloista ja HTML 3.2 attribuutit ovat aika vaatimattomia verrattuna CSS-ominaisuuksiin. Et koskaan saavuta kovin suurta alaspäin yhteensopivuutta. Tavallaan jonkinasteinen alaspäin yhteensopivuus toteuttaa CSS-mediapäämääriä - eri laitteille voidaan tarjota yksilöllisiä sivuja.

Tosin attribuuttivalitsimia käyttäen CSS luokka- tai id-valitsimia ei tarvita lainkaan vaan ominaisuuksien sovitussäännöissä voidaan hyödyntää olemassa olevia attribuutteja. Alla on kaksi esimerkkiä elementin FONT värin muutostavoista attribuuttivalitsinten avulla ([M][S][Pw]):

font[color="#660033"]{color:blue} /* elementti FONT, jolla on attribuuttina color="#660033", saavat värin blue - muista välilyöntisääntö; jos laitat välilyönnin elementtityypin perään, säännössä sanotaan: fontti-elementti, jonka perässä on elementti, jolla on attribuutti color="#660033" saavat värin blue */
*[color="#660033"]{color:blue} /* värin muutoksen voi esittää myös yleisesti; tässä sanotaan vain, että mikä tahansa elementti, jolla on attribuuttina color="#660033", saavat värin blue */

Selainkohtaisia huomautuksia:

  1. älä määrittele fonttikokoa HTML 3.2 tyyliin, esim.:

    <FONT class="font-style1" face="Arial" size="3" color="#3f3f3f">

    MS IE osaa CSS:n avulla ohittaa font-size attribuutin, mutta Opera 3.x ja Netscape 4.x eivät. Koska koon ohittaminen ei toimi kaikissa CSS:ää tukevissa selaimissa, suosittelen välttämään fonttikoon määrittävän attribuutin käyttämistä. Mikäli haluat muuttaa fontin kokoa, laita mieluummin ympärille elementti BIG (voit määritellä CSS:llä myös sen) seuraavan esimerkin tapaan ([M][S][Pw]):

    <BIG><FONT class="font-style1" face="Arial" color="#3f3f3f"></FONT></BIG>
  2. Attribuuttivalitsinten käyttö FONT elementin kanssa toimii täysin vain uusissa Mozilla Gecko ja Opera 7.x+ -selaimissa. Opera 5.x-6.x selaimissa color attribuutin arvoa ei voi tällä tavoin muuttaa, vaikka ne yleisesti ottaen tukevat attribuuttivalitsimia.

HTML 3.2 -tyypisen ajattelun perusongelma on kuitenkin se, että siinä ulkoasu on kaikissa tilanteissa sama eikä sitä voi tilannekohtaisesti kohdistaa. Elementti FONT (mikäli sitä ei CSS:llä varta vasten muuteta) tuo kokoeroa lukuun ottamatta kaikissa tilanteissa saman lopputuloksen. CSS2:n perusideoita on CSS:n kohdennettavuus käyttötarkoitusten ja -kohteiden mukaan.

Ennen kaikkea tämä koskee sitä, miltä asiakirja näyttää sitä näytöltä katsottaessa ja miltä se näyttää tulostettaessa. Mutta yhä enemmän on kyse myös erityyppisistä näyttölaitteista ja niille suunnatusta CSS:stä. Myös käyttäjän kieli ja omat mieltymykset voidaan ottaa huomioon.

Tekstin koko ja valittu fonttityyppi tulisi optimoida käyttökohteen mukaan. Jotta näin voidaan tehdä, käsittelen ensin tekstin ulkoasuun liittyviä ominaisuuksia ja sitten keinoja, millä CSS:n kohdennetaan eri käyttäjille.

[Alku]

Tekstin perusmäärittelyt

Elementille BODY laitetaan yleensä fonttityyppi ja sen koko, esim. ([M][S][Pw]):

body
{font-family: Algerian, "Times New Roman",serif;
/* huomaa lainausmerkit, jos fontin nimessä on tyhjää tilaa - ilman niitä selain ei välttämättä osaa etsiä haluttua fonttityyppiä */
font-size:small;}
/* perusfontiksi suositellaan relatiivista fonttikokoa */

Selain etsii tärkeysjärjestyksessä fontit. Kaksi ensimmäistä on tiettyjä asennettuja fonttityyppejä. Kolmas (serif) on ns. yleinen fonttiperhe (generic font family ja yleiset fonttiperheet ovat serif, sans-serif, cursive, fantasy ja monospace. Selaimet voivat päättää tietyin kriteerein, mitä fonttia käyttävät ja saattavat tarjota eri fontteja.

W3C: CSS2: 15 Fonts, 15.2.6 Generic font families[Pw].

Erityisesti otsikoissa voi käyttää hyvinkin monenlaisia ominaisuuksia. Olen seuraavaan esimerkkiin koonnut suuren joukon ominaisuuksia ja mainitsen, mitkä niistä kuuluvat vain CSS2:een ([M][S][Pw]):

h2
{color: #660033;
/* tekstin väri ns. keyword-arvona */
font-family: Algerian, "Times New Roman",serif;
font-weight: bold; /* miten paksua fonttia käytetään - tässä ns. keyword-arvona */
font-size: 18pt; /* absoluuttisella yksiköllä määritelty fonttikoko */
font-style:oblique; /* standardin mukaan tekee normaali fontin tietokoneella viistoksi (slant) - melkein sama kuin italic (oletuksena normal) */
font-variant:small-caps; /* kaikki kirjaimet ovat isoja kirjaimia, mutta pienet kirjaimet näytetään vähän matalampina */
text-transform:capitalize; /* hieman edellisen kaltainen - sanan ensimmäinen kirjain on aina iso kirjain (muut arvot ovat lowercase ja uppercase); huomaa, että lowercase (pienet kirjaimet) kumoaa edellisen määrittelyn */
text-decoration: overline; /* muut mahdolliset arvot: none, underline, line-through, blink; ominaisuus ei automaattisesti periydy */ font-stretch:wider; /* em. arvon pitäisi leventää fonttityyppiä (CSS2) */
text-shadow: 5px 5px red; /* tekstin varjostus (CSS2) */ }

Selainkohtaisia huomautuksia:

  1. font-variant:small-caps toimii MS IE Windows -selaimissa oikein vasta 6.0:ssa.

  2. text-decoration: blink toimii vain Netsape, Mozilla Gecko ja Opera 5.x+ -selaimissa.

  3. font-stretch ja text-shadow ominaisuudet eivät toimi missään testaamassani selaimessa.

Fonttimääreiden kohdalla huomionarvoista on font-weight. Periaatteessa fonttiperheeseen voi kuulua yhdeksän eri fontinpaksuutta ja ne merkitään 100-900 (esim. font-weight:600). Millään tuntemallani fontilla näin ei ole kuitenkaan asianlaita ja mikä arvo puuttuu otetaan lähin sopiva arvo (lisäksi on huomattava, että normal=400 ja bold=700). Väliaikaiseen koon muuttamiseen voi käyttää myös avainsanoja lighter ja bolder, joita en suosittele perusmääreiksi.

Fontin ominaisuudet voidaan määritellä myös ns. pikakirjoitteena, jossa mukana on myös line-height ominaisuus ([M][S][Pw]):

... {font: normal small-caps 120%/120% fantasy;} /* malli fontin pikakirjoitemäärittelystä; ensimmäinen prosenttiluku tarkoittaa fontin korkeutta ja toinen rivikorkeutta (line-height ominaisuus voidaan määrittää muista vastaavan kaltaisista ominaisuuksista poiketen ilman mittayksikköä: 1.2 = 1.2em); erillismäärittelyjä on kuitenkin mielestäni tässä tapauksessa helpompi hallita */

Selainkohtaisia huomautuksia:

  1. Ominaisuuksilla line-height:1.2em ja line-height:120% on Mozilla Gecko -selaimissa ero silloin, kun fonttia skaalataan. Prosenttiarvo skaalautuu, mutta em-arvo ei.

  2. Eräät tekstiin vaikuttavat ominaisuudet eivät toimi juuri millään selaimella. Mielestäni näitä ei kannata käyttää, vaikka uusimmat selaimet hallitsevat ne kaikki: word-spacing, letter-spacing, white-space, word-wrap. Letter-spacing on näistä käyttökelpoisin, sillä sitä tukee monet selaimet ([M][S][Pw]).

[Alku]

Mediatyypit ja -ryhmät sekä tulostus

Aiheet

Mediasääntö ja -tyypit

CSS2 tarjoaa monenlaisia mahdollisuuksia räätälöidä sivusto eri esityslaitteita varten. Yleisimmin tuettuja ovat normaali näyttöesitys ja tulostus. Niille voi antaa @media at-säännön avulla toisistaan poikkeavan esitysasun.

Alla on W3C organisaation spesifikaation pohjalta muokattu esimerkki:

@media print {/* toimii ainakin MS IE 5.x, uusilla Netscape/ Mozilla ja Opera4.+ selaimilla */
body {font-size: 10pt}
}
@media screen {
body {font-size: 12pt }
}
@media screen, print {/* muut mahdolliset mediatyypit: aural, braille, embossed, handheld, projection, tty, tv - huomaa, että laitteen täytyy tunnistaa itsensä eli tietyt laitteet tarvitsevat erityisselaimen eikä toimivuutta voi testata ennen kuin kyseinen selain on valmistettu! */
body {line-height: 1.2}
} /* huomaa, että kaarisulut ympäröivät tavanomaiset määrittelyt */
W3C: CSS2: 7 Media types; 7.2.1 The @media rule[Pw].

Kun mediasääntö liitetään samaan tyylisivuin, sääntöjen merkitystasoja kuvaa jo aiemmin käyttämäni kaavio, johon olen lisännyt yhden tason (mediasääntölohko voi sisältää useita sääntöjä aivan kuten kuvauslohko voi sisältää useita kuvauksia):

mediasääntölohko (media rule block)
sääntö (rule)
kuvauslohko (declaration-block)
kuvaus (declaration)
valitsin (selector) ominaisuus (property) arvo (value)
@media print { body { font-family : Verdana, Arial, sans-serif; } }

Edellä olleessa kaaviossa print on ns. mediatyyppi (media type). Mediatyyppitiedon voi liittää myös STYLE tai LINK-elementteihin (<LINK rel="stylesheet" type="text/css" media="print">) ja @import -sääntöön (esim. @import url(printti.css) print; - tämä tiedosto haetaan vain tulostettaessa).

Selainkohtaisia huomautuksia:

  1. Yleisimmin tuettu arvo on screen, joka toimii ainakin joissakin MS IE 4.x, Netscape 4.x ja Opera 3.51+ versioissa. Opera 3.51-3.6x tukee myös arvoa all ja Opera 4.x+ sen lisäksi arvoa projection. MS IE 4.x+ tukee myös all ja print. Jälkimmäinen toimii myös Netscape 4.x -selaimissa. Vastaavat arvot toimivat monessa selaimessa myös at-säännön @media kanssa. Mediatyyppien käyttämisessä on kuitenkin seuraavia ongelmia:

  2. Attribuutti media toimii oikein STYLE elementin kanssa testaamistani selaimissa vain Mozilla 0.7+:ssa. Muut selaimet lukevat normaalille näyttöesitykselle osan seuraavasta CSS:stä vaikka niiden ei pitäisi niin tehdä:

    <style type="text/css" media="projection">
    <!--
    @import url(../Css/CssSiteProjection.css); /* tämä pitäisi ohittaa */
    body.CssSite div.docSlide p {color:red !important} /* MS IE 5.5+ ja Opera 5.x+ osaavat ohittaa tämän, joten attribuutti media osittain toimii */
    -->

    </style>
  3. Operalla on vastaava ongelma myös LINK elementtiä käytettäessä, mikäli tuontisääntöä ei tarkenneta (esim. @import url(...) screen;) tai käytetä tuoduissa tiedostoissa medialohkoja.

  1. @import url(...) screen; tms. toimii testaamistani selaimista vain Mozilla 0.7+:ssa ja Opera 5.1x+:ssa.

  2. MS IE 4.x Windows ja Opera 3.x lukevat @media print {...} myös näytölle (tosin MS IE:llä jää ensimmäinen sääntö lukematta). @media screen {...} täytyy kirjoittaa viimeiseksi ja on katsottava, että kaikki tarvittava CSS on määritelty uudestaan. Mahdollisesti sama ongelma media attribuuttien kanssa.

  3. Netscape 4.x ei lue LINK ja STYLE elementtejä, mikäli attribuutilla media on useampi arvo, esim. media="screen,print". Netscapella on myös eräs toinen seikka, johon viittaan tällä edempänä.

  4. MS IE 5.0 Mac ja Netscape 4.x eivät lue medialohkojen sisällä olevia sääntöjä. Koska tuontisääntö tuottaa ongelmia Operalle, @media ja @import at-sääntöjä ei tule lainkaan käyttää, mikäli halutaan yleistoimivasti hyödyntää mediatyyppejä.

  1. Operassa on useiden mediatyyppien antamisen kanssa ongelmia (käsittelen niitä tarkemmin sivulla[S]).

  2. Kun Opera 4.x+:ssa käynnistää ns. full screen mode -tilan, Opera on ns. esitysmuodossa (presentation mode), jolloin @media screen (koskee myös @media print) or vastaavat media-attribuutit eivät toimi, mutta on mahdollista käyttää mediatyyppiä @media projection. Olen huomioinut tällä sivulla myös tämän mediatyypin (olen optimoinut sen 800x600 näytölle - käytön ohjeet[S]). Kokeile, jos sinulla on sangen uusi Opera - paina F11 näppäintä!

    Opera Software: XML in Opera.

Mediaryhmät

Normaali näyttöesitysmedia, kuten eräät muutkin mediatyypit ovat ns. jatkuvaa media (continous media). Mediatyypit print ja projection ovat osa CSS2:n sivutettua mediaa (paged media), joka on yksi mediaryhmä (media group).

Sivutetussa tulostus- ja näyttömediassa pyritään hallitsemaan sivutkatkot.

Tavanomainen paperitulostus, normaali näyttöesistys ja projektioesitys ovat kaikki osa visuaalista muotoilumallia (visual formatting model). CSS2:n kuuluu myös ei-visuaalisia muotoilumalleja (formatting models) ja erityismedioita näkövammaisia varten, joita ovat kuulomuotoilumalli (aural rendering model) ja kosketeltava media tactile media).

Lisäksi on otettava huomioon esityslaitteen ominaisuudet, joihin kuuluu mm. se, voiko käyttää lainkaan grafiikkaa. tai voiko käyttäjä vaikuttaa esityksen lopputulokseen vai ei.

Seuraava lista esittelee mediaryhmät, muotoilumallit sekä niihin liittyvät mediatyypit, mikäli niitä on vain yksi tai kaksi:

  • Visuaalinen muotoilumalli
  • Kuulomuotoilumalli - mediatyyppi aural
  • Kosketeltava media - mediatyypit braille ja emboss
  • Sivutettu media - jatkuva media (kyse on siitä, että käytetäänkö sivunkatkosääntöjä vai ei)
  • Interaktiivinen media - staattinen media (interactive - static; voiko käyttäjä muuttaa sivun esitysasua vai ei)
  • Kehikko - rasteri (grid - bitmap; edellisessä näyttö käyttää ns. kiinteävälistä kirjasinkehikkoa (fixed-pitch character grid), joka ei tue grafiikkaa; jälkimmäisessä näyttö toimii rasterina, jolloin voidaan käyttää myös suhteutettuja merkkejä ja esittää grafiikkaa)

Muotoilumallien, mediatyyppien ja -ryhmien välistä suhdetta kuvaa W3C spesifikaatiosta lainattu taulukko (kohta ei sovellu, merkitään englanniksi N/A (= not applicable), joka merkitsee sitä, että kyseistä vaihtoehtoa ei voi soveltaa tiettyyn tilanteeseen; ks. mediatyyppien suomennosehdotuksia[S][Pw]:

Mediatyypit Mediaryhmät
jatkuva/ sivutettu visuaalinen/ kuulo/ kosketeltava kehikko/ rasteri interaktiivinen/ staattinen
aural jatkuva kuulo ei sovellu molemmat
braille jatkuva kosketeltava kehikko molemmat
emboss sivutettu kosketeltava kehikko molemmat
handheld molemmat visuaalinen molemmat molemmat
print sivutettu visuaalinen rasteri staattinen
projection sivutettu visuaalinen rasteri staattinen
screen jatkuva visuaalinen rasteri molemmat
tty jatkuva visuaalinen kehikko molemmat
tv molemmat visuaalinen, kuulo rasteri molemmat
Media

Yleisiä huomautuksia:

  1. Eräät ryhmittelyt ovat lähinnä suosituksia. Mediatyyppi projection voi olla myös interarktiivinen. Mediatyypin aural voidaan pause-toiminnoilla luoda tavallaan sivutettua mediaa.

  2. Taulukon ongelmallinen kohta on mediatyyppi handheld. Ryhmä tarkoittaa käsipuhelimia ja kämmenmikroja (kuten esim. palm pilot -laitteet). Niiden grafiikan käsittelykyky vaihtelee. WAP-puhelimet ovat vasta tulossa markkinoille ja niissä voi käyttää jonkin tason grafiikkaa käsittely, mutta ei kuitenkaan kämmenmikrojen tasoa. Kummat tulisi huomioida ensisijaisesti? Ryhmä tty tarkoittaa vain tekstiä näyttäviä laitteita, joten se ei tule kysymykseen. Pitäisikö olla oma ryhmä mobile_phones? Tein WAP-ongelmista liitesivun[S][Pw].

Fonttityyppien at-sääntö

Eri visuaalisten esitystapojen tueksi on myös mahdollista ladata fontteja @font-face säännön avulla. Seuraavassa kuitenkin yksi W3C sivuilta ottamani esimerkki:

@font-face {
src: local("Helvetica Medium"), /* selain yrittää ensin etsiä asennetun fontin */
url(http://www.fonts.org/sans/Helvetica_family) format("truedoc"); /* mikä selain ei löydä sellaista, se lataa fontin; mikäli ladattua fonttia ei löydy käytetään vaihtoehtoista fonttia */
font-family: "Helvetica";
font-style: normal}
h3 {font-family: "Helvetica Medium", sans-serif }

W3C: CSS2: 15 Fonts, 15.3.1 Font Descriptions and @font-face[Pw].

Koska nimelliskooltaan samankokoinen fontti saattaa näyttää kovinkin erikokoiselta, CSS2 tuo laskentakaavoja (font matching algorithm), joilla korvaavien fonttien koko tuottaisi mahdollisimman samankaltaisen lopputuloksen (font-size-adjust).

W3C: CSS2: 15 Fonts[Pw], 15.2.4 Font size[Pw], 15.5 Font matching algorithm[Pw].
Microsoft: @font-face Rule; Netscape: Dynamic HTML in Netscape Communicator Part 3. Downloadable Fonts.

Selainkohtaisia huomautuksia:

  1. font-size-adjust sekä eräät muut fonttien käsittelyyn liittyvät erityispiirteet eivät ole toimineet testaamissani selaimissa.

  2. Microsoftin ilmoituksen @font-face at-rule toimii MS IE -selaimissa alkaen MS IE 4.0 Windowsista (todensin versiolla 6.0), mutta viitatun fonttitiedoston tiedostomuoto täytyy olla joko .eot tai .ote, ei tavanomainen fonttitiedosto (esim. TT028M_.TTF). Koska @font-face toimii MS IE -selaimissa vain tietyillä tiedostomuodoilla, toteutus on tavallaan selainkohtainen.

  3. Netscape 4.x tukee epästandardia @fontdef at-sääntöä, joka tukee .pfr-tiedostoja (esim. @fontdef url("http://www.example.com/sample.pfr");). Ladattavat fontit toimivat myös epästandardin linkkisuhteen avulla (<LINK rel="fontdef"...). Mozilla org. saamani erittäin luotettavan s-postin (21.07.200) mukaan @font-face ei ole vielä tuettu.

[Alku]

Erityinen at-sääntö tulostukselle ja tulostuksen erityispiirteet

Lisäksi ainakin mediatyypille print on mahdollista määrittää mm. sivukoko, tulostusmarginaalit ja sivun suunta (orientation) käyttämällä sivusääntöä (@page). Alla esimerkki niiden käyttämisestä:

@page {size: 210mm 297mm;}

@page :first {size: 210mm 210mm; margin-left: 4cm; margin-right: 4cm;}

@page :right {margin-left: 3cm; margin-right: 4cm;}

@page :left {margin-left: 4cm; margin-right: 3cm;} /* Sivumarginaalien laskeminen ei ala aivan paperin reunasta, sillä tulostin jättää hieman pelivaraa (yleensä vajaa puoli senttiä). Lisäksi margin-ominaisuus BODY tai juurielementille lisätään sivumarginaalien päälle.

@media print {
blockquote, table {page-break-inside:avoid} /* vältä lohkositaatin jakaminen eri sivuille; myös alle sivun mittaisten taulukoiden katkeamisen kahdelle sivulle voidaan estää tällä tavoin */
...
}

Alla on taulukko, joka kuvastaa mielestäni olennaisimpia selainten tulostuksessa hyödyllisiä piirteitä (käsittelen ominaisuutta content sivulla Listat[S]):

Kaikki käytt./ Windows (MS IE): media="print" @media print @import url() print; @page page-break-after/before page-break-inside content
Opera 5.1x+ [OK!] [OK!] [OK!] [OK!] [OK!] [OK!] [OK!]
Opera 4.x-5.0x [OK!] [OK!]   [OK!] [OK!] [OK!] [OK!]
Mozilla 1.0+, Netscape 7.x [OK!] [OK!] [OK!]   [OK!]   [OK!]
MS IE 5.5+ [OK!] [OK!]     [OK!]    
Mozilla 0.7-0.9x, Netscape 6.1-6.2x [OK!] [OK!] [OK!]       [OK!]
Mozilla 0.6, Netscape 6.0x [OK!] [OK!]         [OK!]
MS IE 5.0 [OK!] [OK!]          
Netscape 4.x, MS IE 4.0 [OK!]            
Mac:
MS IE 5.0 [OK!]            

Selainkohtaisia huomautuksia:

  1. Tulostuspiirteet toimivat parhaiten Opera 6.x -sarjan selaimilla. Opera 7.0x -sarjan selaimet tulostavat toisinaan erittäin virheellisesti (7.10 hieman virheettömämmin, mutta ei 6.x sarjan tasoisesti).

  2. Vaikka @page ei ole varsinaisesti tuettu MS IE selaimissa Microsoft ilmoittaa, että sitä voidaan käyttää tulostuspohjissa ohjelmissa, jotka isännöivät MSHTML:ää, jossa on lisäksi joitakin tulostukseen liittyviä epstandardeja CSS-ominaisuuksia (MSHTML[S]:ää ymmrtää MS Office 2000+). En laske tätä todelliseksi toteutukseksi, koska selain itsessään ei tätä at-sääntöä tue.


W3C: CSS2: 13 Paged media[Pw].
Muita sivustoja: Keijo Kortelainen: Mediakohtaisuus, Sivutettu media; Microsoft: @page Rule.

[Alku]

At-sääntölista

Yleisesti ottaen at-säännöt ovat yleisemmän tason sääntöjä kuin tavanomaiset säännöt. Siksi tiettyjä asioita ei voi ilmaista vain tavanomaisilla säännöillä. Useimmat at-säännöt liittyvät CSS:n kohdentamiseen erityistilanteisiin. Aiemmin mainittujen at-sääntöjen lisäksi myös kirjaimiston voi vaihtaa kirjaimistosäännöllä (@charset). Sääntöä voi käyttää vain ulkopuolisissa tyylisivuissa. Sen käyttö näyttää vaikka tältä:

@charset "ISO-8859-1";

Selainkohtaisia huomautuksia:

  1. DevGuru CSS2 mukaan Mozilla Gecko ja MS IE 5.x+ -selaimet tukevat @charset at-sääntöä. Erään hyvin luotettavan Mozilla org. saamani s-postiviestin mukaan se toimii Netscape/Mozilla -selaimissa 4/2000 lähtien. Koska en tiedä, miten testaisin asian, en voi varmistaa tätä asiaa MS IE:n suhten.

    DevGuru CSS2: @rules: charset; Microsoft @charset Rule.
  2. Opera Software ei ilmoita, että Opera 7.x ei @charset tukisi, joten Opera saattaa tukea sitä.

CSS3:een on ehdotettu lisättäväksi uusia at-sääntöjä, kuten @namespace. Selostan @namespace käyttöä sivuilla CSS notes 1[S] ja Valitsimet[S]. Se on sääntö, joka tulee sijoittaa tyylisivun alkuun kuten @charset at-sääntökin.

W3C: CSS2-CSS3: 4 CSS2 syntax and basic data types, 4.4 CSS document representation[Pw], CSS Namespace Enhancements (CSS3:een tehty ehdotus).
Muita sivustoja: John Allsop: Basic concepts.

At-säännöt (sanan selitys[S][Pw]) ovat kahdenlaisia käskyjä (statements; sanan selitys[S][Pw]). Ensiksi yksinkertaisia rivikäskyjä, jotka päättyvät ;-merkkiin. Toiseksi on käskyjä, joita voimme nimittää lohkokäskyiksi (tai käskylohkoiksi), sillä niissä rajoittimina toimivat kaarisulut ({}). Tällä sivulla käsitelly at-säännöt ovat seuraavat:

  • Yksinkertaiset rivikäskyt (ne tulee sijoittaa tyylisivuen alkuun):
    • @charset (CSS2)
    • @namespace (CSS3)
    • @import (CSS1)
    • @import () [mediatyypinNimi]; (CSS2) (mediatyyppien mukaan kohdistettu CSS)
    • @fontdef (epästandardi)
  • Käskylohkot:
    • @page (CSS2)
    • @font-face (CSS2)
    • @media (CSS2)

Alla on taulukko tällä sivulla mainitsemieni at-sääntöjen tukemisesta:

Kaikki käytt./ Windows (MS IE): @import @import url() ...; @media @page @charset @namespace @font-face @fontdef
Opera 7.x+ [OK!] [OK!] [OK!] [OK!] [OK!] (?) [OK!]    
Opera 5.1x-6.x [OK!] [OK!] [OK!] [OK!]        
Opera 4.x-5.0x [OK!]   [OK!] [OK!]        
Mozilla 0.7+, Netscape 6.1+ [OK!] [OK!] [OK!]   [OK!] [OK!]    
Mozilla 0.6, Netscape 6.0x [OK!]   [OK!]   [OK!] [OK!]    
MS IE 5.5+ [OK!]   [OK!]   [OK!](?)   [OK!]  
MS IE 5.0 [OK!]   [OK!]   [OK!](?)   [OK!]  
MS IE 4.0 [OK!]           [OK!]  
Opera 3.51-3.6x [OK!]              
Netscape 4.x               [OK!]
Mac:
MS IE 5.0 [OK!]       ?   [OK!]  

[Alku]

Erityiskohdistuskeinot

Aiheet

Käyttöliittymä

Mediatyyppeihin verrattava asia on käyttäjän omien asetusten huomioiminen fontin väreissä jne. Tämän kappaleen tulisi näkyä käyttöjärjestelmän työpöydän teksti- ja taustavärillä. CSS2 (ei CSS1) tarjoaa mahdollisuuden käyttää systeemifontteja (caption, icon, menu, message-box, small-caption, status-bar) pikakirjoitteen osana (esim. p {font: status-bar ...}). En pidä niiden käyttämistä kovin mielekkäänä muuten kuin erikoiskäytössä, esim. tulevaisuudessa käsipuhelimille suunnitelluilla sivuilla. Esimerkin vuoksi tässä lauseessa on käyttöjärjestelmän fontti.

Käyttöliittymäominaisuuksiin kuuluvat myös outline ja cursor (tässä kappaleessa cursor:wait).

Selainkohtaisia huomautuksia:

  1. Systeemivärit toimivat ainakin Mozilla Gecko, MS IE 4.x+ ja Opera 5.1+ -selaimissa.

  2. ääriviiva eli ominaisuus outline on toiminut joissakin Netspace 6.0:n esiversioissa (viimeksi testaamissani Mozilla Gecko -selaimissa siitä on kätössä selaimen tyylisivuissa[S] epästandardi muunnelma -moz-outline, jota käsittelen englanninkielisissä CSS-kommenteissa[S]) ja se toimii moderneista selaimista vain Opera 7.x+:ssa, joskin ainakin Beta1:ssä hieman virheellisesti.

  3. Mozilla Gecko, MS MS IE:ssä ja Opera 7.x -selaimissa toimii osittain myös ominaisuus cursor (kaikki arvot eivät toimi paitsi Opera 7.x:ssä).

  4. Uudet Mozilla Gecko -selaimet tukevat myös epästandardeja systeemifontteja ja -värejä.


W3C: CSS2: 18 User interface[Pw].
Muita sivustoja: Opera Software: What's new in Opera 5.10.

[Alku]

Kansainvälisyys

Käyttäjän huomioimista on myös hänen kielensä mukaisesti tehdyt sivut. Tätä pyrkimystä kutsutaan W3C piirissä termillä internationalization (se lyhennetään usein muotoon i18n). On mahdollista luoda samaan dokumenttiin oikealta ja vasemmalta kirjoitettavaa tekstiä (kuten esim. hepreaa) käyttämällä ominaisuutta direction, jota käsitellään spesifikaation luvussa 9. Tämä on kuitenkin itselleni äärimmäisen harvoin tarvittava piirre enkä ole sitä testannut.

Muut i18n piirteet käsitellään CSS2 spesifikaation luvussa 12. Siinä tuodaan esille, että on mahdollista tehdä kielikohtaisia sitaatteja käyttäen elementtiä Q (= quote = sitaatti. Myös erityisten listatyyppien käyttö on mahdollista (käsittelen listoja omalla sivulla[S]).

W3C: CSS2: 9 Visual formatting model, 9.10 Text direction: the 'direction' and 'unicode-bidi' properties[Pw], 12 Generated content, automatic numbering, and lists [Pw].

CSS3:n uudet kohdistuspiirteet

CSS3 menee pidemmälle kansainvälisyysperiaatteen suhteen. Siinä on mm. ominaisuus layout-grid.

Viittasin aiemmin yhteen uuteen at-sääntöön. CSS3:een on lisätty myös käyttöliittymäominaisuuksia. Merkittävimmät uudistukset koskeva sivutettua mediaa. Myös Håkon Wium Lien ehdotus tekstin palstoituksesta (multi-column layout) olisi hyödyllinen. Käsitteleen viimeisellä sivulla[S] joitakin CSS3:een liittyviä piirteitä. Seuraavaksi tutkimme kuitenkin hieman ankkureita ja linkkejä.

Selainkohtaisia huomautuksia:

  1. Erityissitaatit toimivat Mozilla Gecko ja Opera 4.x+ -selaimissa - katso erästä mallia[S][Pw]).

  2. CSS3:een lisätyt listatyypit toimivat Mozilla Gecko -selaimissa.

  3. MS IE 5.5+ Windows tukee eräitä CSS3:een ehdotettuja i18n-piirteitä, joita käsittelen englanninkielisissä CSS-kommenteissa[S].


W3C: CSS3:n working draft -sivut: CSS Namespace Enhancements (W3C Working Draft 25 June 1999), International Layout (W3C Working Draft 10-September-1999), Multi-column layout in CSS (W3C Working Draft 22 June 1999), Paged Media Properties for CSS3 (W3C Working Draft 28 September 1999), User Interface for CSS3 (W3C Working Draft 16 Feb 2000).

[Alku]

7. Miten CSS liitetään ankkureille ja linkeille

Aiheet

Yleistä

Ankkurit ja linkit

Että ankkurit toimisivat asianmukaisesti, edellyttää tiettyä järjestystä. Esim. väärässä paikassa määritelty :hover toimii vain kerran ja lopettaa välittömästi toiminnan, kun linkki tulee vierailluksi. Mikäli laitat esim. a:active saman taustavärin kuin sinulla on a:hover tekstiväri, teksti sulautuu taustaväriin! Oikea järjestys on seuraava:

a {text-decoration: none; color:black !important} /* ankkurielementti (A) on eräiden selainten tähden syytä määritellä */
a[name] {color: ... !important; background-color: transparent !important} /* CSS2:n mukaan toimivat selaimet toteuttavat a:hover myös nimetyille ankkureille; jotta a:hover ei muuttaisi ankkurin ominaisuuksia ne täytyy määritellä erityisen tärkeiksi; tässä ratkaisussa a:hover ei saa käyttää !important sääntöä */
a:link {color: #3f3f3f; text-decoration: underline;} /* vierailematon linkki */
a:visited {color: green; text-decoration: underline;} /* vierailtu linkki */
a:hover {color: red; text-decoration: none} /* hiiri kulkee linkin ylitse */
a:active {color: green; text-decoration: none; background-color: yellow;} /* CSS2-spesifikaation mukaan :active pitäisi toimi vain hiiren alas painamisen ja ylösnostamisen välisenä aikana, mutta CSS1:ssä tila on voimassa siihen asti kun jotain muuta kohtaa klikataan */
a:focus {color: green; text-decoration: none; background-color: yellow;} /* :focus on eri asia kuin :active; vasta :focus jää voimaan seuraavan linkin valitsemiseen asti (toiminto on ensisijaisesti suunniteltu näppäimistönavigointiin ja lomakekontrollielementeille; selaimet eivät ole velvollisia toteuttamaan sitä elementille A) */

Jos haluat, että selain huomioi linkin ympäröivälle (esi-isä)elementille tai BODY elementille antamasi luokan (esim. <BODY class="oma">), toteuta sääntö hahmonsovitus-periaatteella [S][Pw]:

.oma a:hover {color: #dcd2d3; text-decoration: none; background-color: #706a6a;} /* määrittelyä sovelletaan ensin ikään kuin mille tahansa elementille, mutta sille annetaankin tarkennettu ehto; linkin ominaisuuksien muutos tapahtuu vain sillä ehdolla, että linkin esi-isäelementillä on luokka oma */
.oma table a:hover {color: #dcd2d3; text-decoration: none; background-color: #706a6a;} /* määrittelyä sovelletaan edellistä esimerkkiä tarkemmin - sääntö toteutuu vain sillä ehdolla, että linkki on sellaisen taulukon sisällä, jonka esi-isäelementillä on luokka oma */

Selainkohtaisia huomautuksia:

  1. Opera 3.x ja Netscape 4.x-selaimet laittavat alleviivauksen ankkureihin, joissa on mainittu vain ankkurin nimi (esim. name="ankkuri"), mutta ei linkkiä, vaikka niin ei pitäisi tehdä. A on yksinään käytettynä normaali tyyppivalitsin, mutta :link ja :visited ovat näennäisluokkavalitsimia, joiden tulisi toimia vain siinä tapauksessa, että ankkurielementti sisältää linkin ilmaiseman attribuutin href.

  2. Yhdistelmänäennäisluokat toimivat oikein vain Mozilla Gecko ja Opera 7.x+ -selaimissa. Periaatteessa se, että a:hover ei toimisi linkeille voitaisiin toteuttaa a:link:hover ja a:visited:hover yhdistelmillä, mutta ne eivät toimi Opera 4.x-6.x -selaimissa. MS IE -selaimet lukevat vain yhdistelmän jälkimmäisen puolen (testi, jossa sekä tekstin ja taustan värin pitäisi muuttua).


  1. Linkkeihin liittyvien näennäisluokkien toimivuus on selostettu pääpiirteissään sivulla 4[S][Pw]. Lisäksi on syytä huomauttaa, että MS IE toteuttaa a:active CSS1:n mukaisesti toisin kuin uudet Opera ja Mozilla Gecko -selaimet, jotka noudattavat CSS2 spesifikaatiota.

  2. Mozilla Gecko ja Opera 7.x -selaimet soveltavat dynaamisia näennäisluokkia useille elementille. Seurauksena on se, että ne toteuttavat a:hover myös nimetyille ankkureille ja mm. eräille lomake-elementeille (Model23b.html[S][Pw]). Teksti voi ajelehtia, mikäli :hover on määritelty jokin sellainen ominaisuus (esim. font-weight), joka jollakin tavoilla vaikuttaa elementtien asemointiin ja joka on eri kuin linkin osoittimen vieressä olevalla tekstillä.

[Alku]

Kuva- ja tekstilinkit

Periaatteessa kuva- ja tekstilinkit tulee käsitellä eri tavalla. Mikäli kuvalle ei ole määritelty omaa linkkejä koskevaa näennäisluokkaa[S][Pw], taustavärin or -kuvan pitäisi näkyä vain yhden rivin korkuisena.

W3C: CSS2: 10 Visual formatting model details, 10.6.1[Pw].

Mikäli a:hover, a:active ja a:focus kanssa käyttää taustamääreitä ja reunuksia, myös kuville tulee tehdä säännöt, esim.:

a.orange {display:display:block; border-width:0;} /* width ja height ominaisuudet voi olla tarpeen lisätä*/
a.orange:hover {color:red;background-color: #f85b07; border-width:0;}
a.orange:hover img {background:#f85b07 url(.gif);}
a.orange:active {color: #f85b07; background:#dcd2d3; border-width:0;}
a.orange:active img {background:#f85b07 url(.gif); border: #660033 1px solid;}
a.orange:focus {color: #f85b07; background:#dcd2d3; border-width:0}
a.orange:focus img {background:#f85b07 url(.gif); border: #660033 1px solid;}

Ks. suurin piirtein toimivia esimerkkinä entinen esittelysivuni[S][Pw], joissa olen määritellyt taustavärin CSS:llä linkkeinä käytetyissä kuvissa. Tein myös erillisen englanninkielisen testisivun[S].

Selainkohtaisia huomautuksia:

  1. Varo määrittelemästä a:hover siten, että tekstikoko muuttuu. Tekstikoon muutos saattaa johtaa siihen, että kaikki linkin rinnalla ja jälkeen oleva sisältö pitää muotoilla uudestaan. Jatkuva uudelleen muotoilemisen tarve tekee sivun käsittelyn hitaaksi, se voi luoda selaimen käytökseen epävakautta ja jopa kaataa selaimen. Opera 5.12-6.x ei lisää tekstikoon muutoksen vuoksi tekstille varattua kokoa. Tästä on lopputuloksena ruma efekti (testi), mutta tällä estetään uudelleen lataamisen tarve, sillä autetaan selainta säilymään vakaana ja sivun rullaus ei pääse hidastumaan (tämä voi olla myös syynä siihen, että Opera 4.x-6.x ei salli dynaamisia display-arvon muutoksia).

    Jos halutaan käyttää suurentuvaa tekstiä, seuraavia ohjeita olisi mielekästä noudattaa:

    • Linkki on lohkon sisällä ja lohkolle on määritetty riittävä korkeus ja leveys, että kasvava teksti mahtuu lohkoon ilman, että muiden elementtien paikka muuttuu, jotta ympäröivä sisältö ei vello.
    • Linkki määritellään lohkoksi ja sille annetaan width ja height ominaisuudet siten, että teksti ei kasvaessaankaan katkea Opera 5.x-6.x selaimissa.
  1. Asettamalla tekstilinkille display:block se näyttää uusilla selaimilla ikään kuin kuvalta. Uusilla Opera ja Netscape -selaimilla koko elementti toimii aina linkkinä, mutta MS IE kohdalla toisinaan koko elementti on aktiivinen ja toisinaan ei; jälkimmäisessä tapauksessa display:block saa aikaan vain visuaalisen efektin, mutta vain teksti toimii linkkinä. Jos MS IE:llä ominaisuuden width arvo on jokin muu kuin auto, linkit ovat aktiivisia koko käytettävissä olevalta leveydeltään lukuun ottamatta tilanteita, joissa linkit käyttävät ominaisuutta float eivätkä kaikki linkit mahdu samalle riville.

  2. Display:block ei toimi oikein Netscape 4.x ja MS IE 4.x (Windows) selaimissa.

  3. MS IE -selaimissa taustaväri näkyy koko kuvalle ilman display:block määritystä mutta ei Opera 4.x+ ja Netscape 6.x+ -selaimissa. Tosin oikea määrittely olisi display:inline-block (huomautan tästä asiasta CSS2 spesifikaation ongelmia[S]). Opera 4.x+ hyväksyy myös display:inline-table, joka luo rivisisäislaatikon; ja useimmissa tapauksissa ainakin suurin piirtein tavoitellun lopputuloksen.

  1. Opera ei tue taustakuvia linkki- ja dynaamisille näennäisluokille (korjattu Opera 7.0 Beta 2:ssa, mutta taustat eivät toimi moitteetta Opera 7.01:ssä). (Testi.)

  2. Joissakin Opera-selaimissa border:none ei poista Operan kanssa kuvilta reunuksia.

  3. Joissakin vanhoissa[S] CSS:ää tukevissa selaimissa reunukset eivät toimi linkeillä. Mikäli haluat niitä käyttää a:hover kanssa, laita myös elementeille A taustavärin mukaiset reunukset. Näin näkyvän reunuksen ilmestyminen linkille ei aiheuta dokumentin minkään osan uudelleen muotoilun tarvetta. Systeemi toimii Operassa hyvin myös a:active kanssa. MS IE ja Mozilla Gecko -selaimet pistävät tilassa a:active selaimen oletusääriviivat sivujen tekijän määrittelemien reunusten päälle. Reunukset tai oletusääriviivat toimivat Mozilla Gecko -selaimissa :active ja :focus näennäisluokille vain satunnaisesti. Ensimmäiset Opera 7.x -sarjan selaimet eivät tue elementille A :focus lainkaan. Huomasin sattumalta, että se on tuettuna ainakin Opera 7.23:ssa (en tiedä tarkalleen mistä versiosta asti piirre on tuettuna). Elementti A ei pidä käyttäjää tietyssä fokuksessa, joten fukuksen toimimattomuus ei ole mielestäni suoranainen virhe. Mutta nyt käyttäjä voi maalata linkin ja pitää sitä jonkin aikaa fokuksessa.

  1. Olen havainnut, että jos muuttaa text-decoration ja background-color ominaisuuksia, muutokset eivät aina toteudu kaikissa selaimissa. Näennäisluokkien toimivuus täytyy testata mahdollisimman monessa selaimessa. Olen havainnut erityisesti background-color:transparent muuttamisen ongelmallisiksi.

  2. Opera 7.x vanhemmat versiot eivät tue a.luokka:näennäisluokka elementti {...} tyyppisiä sääntöjä (esim. a.luokka:hover img {border:1px solid black} - toimii jos otetaan pois img).

  3. Käsittelen linkkejä myös sivulla, joka koskee dynaamisia valikoita[S].

[Alku]

Attribuuttivalitsimet

CSS2 tarjoaa myös attribuuttivalitsimiin perustuvan määrittelytavan. Otan esille muutaman tämän tavan käyttömahdollisuuksista:

a[href] {color:blue} /* vastaa samaa kuin a:link */
a[id] {color:blue} /* samalle sivulle viittaavat linkit merkitään erilailla kuin sivulta pois vievät linkit */
a[id="ankkurin_nimi"] {color:blue} /* ankkuri merkitään vain siinä tapauksessa, että sillä on tarkka tunniste eli tietty nimi */
a[href] img {background-color:yellow} /* elementteihin ja attribuutteihin perustuvia tunnistettavia hahmoja voidaan myös yhdistellä */
a[href="http://www.server.fi/~joku/"] {color:blue} /* vain tietty linkki merkitään */
a[target="new"], a[target="_blank"] {color:olive; background-color:yellow} /* omien sivujen ulkopuolelle uuteen ikkunaan ohjaavat linkit merkitään erilailla kuin omiin sivuihini viittaavat linkit */
 

Selainkohtaisia huomautuksia:

  1. Mikäli haluat testata attribuuttivalitsinten toimivuutta, sinun tulee välttämättä ladata uusi Opera tai Mozilla Gecko -selain. Näet vaikutuksen tällä sivustolla. Löydät muut attribuuttivalitsimia koskevat huomautukset sivulta 4[S][Pw]

Linkkielementeille kuten muillekin elementeille voidaan laittaa taustoja ja reunoja, joita käsittelen seuraavaksi.

8. Miten CSS annetaan elementtien taustoille ja reunoille

Aiheet

Tämä sivu on jaettu jaksoihin, jotka sisältävät seuraavia aiheita:

Sisältö yhtenä isona sivuna

Yleistä

Taustamäärittelyt eivät periydy automaattisesti lapsielementeille kuten eivät myöskään yleiset reunusmäärittelyt. Toisin kuin HTML 3.2 asiakirjoille koko asiakirjaa koskeva taustamäärittely voidaan HTML 4.0 dokumenteille antaa kahdelle elementille, nimittäin HTML ja BODY. Toteutuksissa on suuria ongelmia, joita käsittelen edempänä.

[Alku]

Taustaominaisuudet

Koko dokumenttia koskevat varsin yksinkertaiset taustamäärittelyt eivät ole ongelmallisia ja ne voidaan HTML 3.2 -dokumenttien tavoin BODY elementille. Useimmin käytetyt taustaominaisuudet näkyvät alla olevassa esimerkissä ([M][S][Pw] - ne määritellään useimmiten pikakirjoitteina[S][Pw], mutta esitän ne tällä kertaa yksittäisinä ominaisuuksina ja selitän lyhyesti, mitä kukin ominaisuus merkitsee):

body
{background-color: white;
background-image: url(./Taulut/kierrevihko.gif); /* tämä vastaa HTML 3.2 -tason taustakuvamäärittelyä */
background-repeat: repeat-y; /* määrittelee sen, toistuuko kuva ja jos toistuu niin millä tavoin */
background-attachment:fixed; /* määrittelee sen, rullautuuko taustakuva sivun mukana vai ei */
background-position: 2px 0px;} /* määrittelee taustakuvan sijainnin */

Taustaväri (background-color) voi saada myös arvon transparent, jolloin emoelementin väri kuultaa lävitse. Vaikka jotkut testiohjelmat ehdottavat asettamaan aina background-color ominaisuuden, jos väri on määritetty, menettely ei ole aina järkevää. Riittää, että BODY-elemtin taustaväri toimii hyvin tekstivärin kanssa.

Toiston arvot ovat background-repeat: repeat (oletusarvo eli että taustakuva toistuu joka suuntaan), no-repeat (ei toistu lainkaan), repeat-x, repeat-y (y=toistuu pystysuunnassa; x=toistuu vaakasuunnassa).
Background-attachment:fixed tai scroll (taustakuva ei liiku/ liikkuu sivun rullauksen mukana (oletusarvo)).

Background-position: %, numero- tai avainsana-arvo. Arvo lasketaan elementin reunoista käsin lukuun ottamatta background-attachment:fixed, jolloin arvo lasketaan näyttöportin mukaan (viewport = ikkuna (window), jossa dokumentti sijaitsee). Prosentti- ja numeroarvoissa ensin annetaan etäisyys vasemmalta ja sitten ylhäältä. Seuraavassa taulukossa avainsana-arvot ja niiden vastaavat prosenttiarvot (olen korostanut arvot, jotka on merkitty samalla logiikalla kuin prosenttiarvot):

top left tai left top
top, top center ja center top
right top or top right
left, left center ja center left
center tai center center
right, right center ja center right
bottom left ja left bottom
bottom, bottom center ja center bottom
bottom right ja right bottom
0% 0%
50% 0%
100% 0%
0% 50%
50% 50%
100% 50%
0% 100%
50% 100%
100% 100%

Taustaominaisuudet voi antaa mille elementille tahansa - erityisesti a:hover, a:active ja a:focus voi olla hyvin havainnolliset taustaominaisuudet. lue lisää seuraavilta sivuilta (kaikilla sivuilla ei ole paluulinkkiä tälle sivulle - käytä vaihtoehtoisia ikkunoita):

W3C: CSS1: CSS1 Test Suite; CSS2: 14 Colors ja Backgrounds; 14.2.1 Background properties[Pw].

Suositukseni:

  1. Suosittelen määrittelemään koko dokumentille tarkoitetut taustaominaisuudet sekä HTML että BODY elementeille. Varmista, että elementeillä ei ole reunuksia, marginaaleja tai täytteitä. Vähiten ongelmia syntyy käytettäessä JPG-kuvia.

  2. Kuvien tulee olla hyvälaatuisia. Ne pitää testata useilla sovelluksilla. Jos jokin sovellus ei pysty lukemaan kuvia ne tulee hylätä.

  3. Jos määrittelet taustakuville asemoinnin anna aina kaksi arvoa. Suosittelen pikseli- tai prosenttiarvojen käyttämistä. Älä käytä 10px center kaltaisia yhdistelmämäärittelyjä.

  4. Älä määrittele taustoja :first-letter ja :first-line pseudo-elementeille.

  5. En suosittele taustojen käyttöä :hover näennäisluokalle.

Selainkohtaisia huomautuksia:

  1. background-color: transparent ei toimi aina oikein kaikilla selaimilla, sillä jotkut selaimet määrittävän taustavärin BODY-elementin perusteella tilanteissa, joissa niin ei tule toimia. Jotkut selaimet saattavat tarvita näennäisluokkia käytettäessä tämän arvon kuvalinkeille (a:link img, a:visited img {background-color:transparent}) vaikka alla olevan elementin taustavärin pitäisi ilman muuta kuultaa lävitse. Määrittämällä toisinaan tietyn taustavärin ja toisinaan läpinäkyvän taustan syntyy ongelmia eikä background-color toimi aina halutulla tavalla.

  2. HTML ja BODY elementeille annetut taustaominaisuudet eivät aina toimi, jos sivut ovat kehysten sisällä. MS IE 4.x Windows kanssa läpinäkyvä GIF-kuva + the combination transparent GIF + taustaväri ei toimi koskaa oikein HTML elementin kanssa.

  3. Opera ei hyväksy takakenoviivaa (\) taustakuvien nimien poluissa (esim. .\kuvat\kuva1.gif).

  4. Sekä beeta että viralliset Opera 7.x -selaimet eivät hyväksy kaikkia GIF-kuvia taustakuviksi (myös eräät muut sovellukset, kuten esim. MS Windows XP on ongelmia niiden kanssa ja kuva, jonka kanssa Operalla on ongelmia ei toimi Windows XP:ssä pienoiskuvana (thumbnail)). Joskus, mutta hyvin harvoin Operalla ongelmia myös taustavärien kanssa. Käsittelen Operan erityisongelmia Operan ongelmia käsittelevällä lisäsivulla[S].

  5. background-position: 10px center kaltaiset yhdistelmät eivät toimi Mozilla Gecko -selaimissa.

  1. Jotkut background-position-ominaisuuden avainsana- ja prosenttiarvot (esim. center ja 50% 50%) eivät aina toimi Opera 5.12:ssa. Vaakatason prosenttiarvot toimivat ja niitä voi käyttää yhdessä pystytason pikseliarvojen kanssa, esim. 50% 200px (vika on korjattu Opera 6.x -sarjassa). Tosin CSS1 Test suite kaikki arvot toimivat P-elementin kanssa. Tämä asia tuntuu riippuvan elementistä ja Operalla on vaikeuksia nimenomaisesti elementin BODY kanssa. Suosittelen käyttämään seuraavan kaltaisia määrittelyjä:

    <style type="text/css" media="screen">
    <!--
    div#first {background: white url("../Kuvat/Css/Tree.gif) no-repeat 100px 65px;} /* mediatyypeille print ja projection on omat määrittelynsä */
    -->
    </style>
  2. Opera 6.x ei tue taustakuvia linkki- ja dynaamisille näennäisluokille[S] (korjattu Opera 7.0 Beta 2:ssa).

  3. Jos taulukoilla ja taulukkosoluilla on läpinäkyvä taustaväri ja taulukon taustaelementillä on taustakuva Opera näyttää vain taustalla olevan elementin taustavärin, ei taustakuvaa.

  4. Taustaominaisuudet eivät toimi Opera 7.x:ssä :first-letter näennäiselementille.

  5. :first-line näennäiselementille annetut taustaominaisuudet kaatavat MS IE 5.5 Windows -selaimen.

  1. Taustakuvien asemointi saattaa johtaa MS IE 4.x Windows -selaimissa siihen, että taustakuva menee muiden elementtien päälle.

  2. Jos taustakuva on GIF-animaatio, Opera 5.x ja vanhemmat selaimet näyttävät vain ensimmäisen kuvan (asia on korjattu uudemmissa versioissa ja olen testannut tämän asian Opera 6.04:lla).

  3. MS IE, Opera, Mozilla Gecko, Safari (Mac) ja Konqueror (Linux) tukevat PNG-kuvia mutta MS IE 4.x-6.x ja Opera 4.x-5.x eivät tue PNG-kuvien läpinäkyvyyttä. Eräissä Mozilla Gecko Linux-selaimissa ainakin osittain läpinäkyvät PNG-kuvat toimivat taustakuvina erittän huonosti ja Konquerorissa jotkin kuvat toimivat huonosti.

  4. background-attachment:fixed toimii vain sangen uusissa selaimissa. Testieni mukaan se toimii MS IE:ssä vain elementeille HTML ja BODY. Opera 4.x+ ja Mozilla Gecko -selaimissa se toimii laaja-alaisemmin. Tosin sivun rullaus saattaa Operalla aiheuttaa katkonaista tekstiä. Lisäksi on huomattava, että Opera 6.x laskee asemoinnin virheellisesti elementin omasta asemoinnista käsin (korjattu Opera 7.0 Beta 2:ssa).

  5. Taustakuvan asemointi ei toimi Netscape 4.x -selaimissa.

  6. Netscape 4.x ymmärtää virheellisesti taustakuvien sijaintipolu. Jos haluat taustakuvien toimivan sille oikein lue vihjeeni[S][Pw] miten suhteelliset viittaukset tulee määritellä Netscape 4.x -selaimille (vihjeet on englanniksi).

[Alku]

Reunaominaisuudet

Reunukset ovat kivoja ja ne voivat olla joka sivulla (top, bottom, left ja right) erilaisia. Voit määritellä erilaisia paksuuksia (border-width), värejä (border-color) ja tyylejä (border-style). Värit ja paksuudet voi määritellä kuten missä tahansa elementissä. Paksuudelle on kolme keyword-arvoa: thin, medium (oletusarvo, joka on voimassa, mikäli paksuutta ei ole määritelty) ja thick.

CSS1:n reunustyylejä ovat dotted, dashed, solid, double, groove, ridge, inset, outset sekä arvo none (se antaa reunuksen paksuudelle arvon 0). CSS2:ssa on lisäksi arvo hidden, joka on muuten edellisen kaltainen, mutta ottaa määritellyn tilan (esim. border: hidden 5px;).

Mikäli halutaan näkyvät reunukset, reunusten paksuutta ja väriä ei ole pakko antaa. Jos väriä ei ole määritelty, sen pitäisi olla sama kuin reunuksellisen elementin tekstin värin. Selainten tulee kuitenkin saada reunustyyppi, sillä oletusarvona on none eli se, että ei ole lainkaan reunuksia.

W3C: CSS2: CSS2 8 Box model; 8.5.3 Border style[Pw].

Seuraavassa on malli lohkositaatille (BLOCKQUOTE) tehtävästä reunusmäärittelystä (mallin[S][Pw] määrittelyt eivät ole välttämättä mitenkään mielekkäitä, mutta ovat silti toimivia):

blockquote
{padding:10px; /* padding antaa täytearvon reunuksen sisään laitettaville elementeille ja tekstille - margin ja padding voidaan antaa kaikille reunoille pikakirjoitteena alempana olevien esimerkkien tapaan; negatiiviset margin-arvot ovat sallittuja, mutta padding ei voi saada negatiivia arvoja */
border: olive 5px solid; /* pikakirjoiteyleisarvot reunuksille, joka voidaan myöhemmin ohittaa - joka reunalle ei tämän kautta voi laittaa arvoja vaan täyttyy käyttää alimäärittelyitä */
border-style:inset; /* tässä kaikilla sivuilla sama reunus - tämä ohittaa edellisen määrittelyn arvon solid ja kukin seuraavista kolmesta ohittaa aina edellisen arvon */
border-style:inset outset ; /* tässä ensimmäinen koskee ylä- ja alareunaa ja toinen vasenta ja oikeaa reunaa */
border-style:inset outset inset; /* tässä ensimmäinen koskee yläreunaa ja toinen vasenta ja oikeaa reunaa ja kolmas alareunaa */
border-style:inset outset inset outset; /* tässä ensimmäinen koskee yläreunaa, toinen oikeaa, kolmas alareunaa ja neljäs vasenta reunaa eli arvot menevät myötäpäivään */
border-width: 10px 5px 10px; /* toimivat samalla logiikalla kuin border-style -arvot ja viimeksi mainittu ohittaa ensiksi annetun arvon */ }

Voit katsoa myös sivun Miten CSS liitetään Web-sivuihin[S][Pw] malleja.

Yleisiä huomautuksia:

  1. Reunukset ovat ikään kuin elementin ulkoreunaan piirtyviä kehyksiä, joiden ainoa ominaisulottuvuus on niiden paksuus. Se, miten reunukset huomioidaan elementtien dimensioita laskettaessa riippuu width attribuutista or ominaisuudesta.

  2. Reunukset voi teoriassa antaa käyttäen myös ominaisuutta outline (esim. outline:#660033 1px solid;). Kaikilla reunoilla on aina samanlaiset reunukset. Ominaisuudella outline määriteltyjen reunusten periaatteellinen ero border nähden on siinä, että outline ei saa muuttaa toisten elementtien sijoitusta eikä sitä oteta mukaan elementtien dimensioita laskettaessa. Se saa siis mennä dokumentin kaiken sisällön päälle.

  3. Koska kaikenlaiset reunukset ovat elementtien esitysasua koskevia piirteitä, CSS2:n perustehtäviin kuuluu, että se joko pystyy poistamaan kaikki mahdolliset reunukset tai muuttamaan minkä tahansa reunuksen esitystapaa. Kuvien reunusten kohdalla (<IMG border=""...>) ei ole mitään periaatteellisia ongelmia. Koska selaimet käyttävät HTML:llä annettuja reunuksia ikään kuin oletusominaisuuksina, reunusten tyyppiä ei tarvitse määrittää CSS:llä. <TABLE border> kohdalla tilanne on monimutkaisempi. CSS2:ssa on määritelty erityissäännöt, miten reunuksia käsitellään taulukoissa (käsittelen taulukoiden reunuskysymyksiä sivulla 10[S]).

  4. Teoriatasolla CSS:n pitäisi pystyä muuttamaan myös kaikkien lomake-elementtien reunuksia, mutta CSS2:ssa ei ole riittävästi ominaisuuksia määrittelemään, miten niiden kanssa tulisi menetellä (käsittelen lomake-elementtejä edempänä).

Selainkohtaisia huomautuksia:

  1. MS IE tulkitsee arvot suhteelliset arvot paksumpina kuin Opera ja Netscape (niille ei ole annettu ohjearvoja eikä MS IE toimi spesifikaation vastaisesti). Täsmälleen saman paksuuden määrittäminen edellyttää numeeristen arvojen käyttämistä.

  2. Tyylit dotted ja dashed eivät toimi MS IE 5.5 Windows -selainta vanhemmissa versioissa.

  3. Opera 3.51+. tukee kaikkia näkyviä reunustyylejä. Uudemmat selaimet tukevat myös arvoa hidden kuten myös Mozilla Gecko -selaimet.

  4. Mikäli reunusväriä ei ole määritelty MS IE käyttää taulukoissa reunusvärinä vaalean harmaata, joka on toinen elementille TABLE border-attribuutin antamista reunusväreistä.

  5. Outset and inset eivät toimi värin black kanssa MS IE 5.x -selaimissa. Lopputulos on aina erilainen, sillä MS IE käyttää useampia sävyä Operalla ja Netscape. Syynä on todennäköisesti se, että MS IE käyttää elementille TABLE epästandardeja attribuutteja, esim. bordercolorlight="#eeeeee" bordercolordark="#1111111".

  6. Ominaisuus outline on toiminut vain joissakin Netscape 6.0:n esiversioissa ja Opera 7.x:ssä. Viittaan ominaisuuteen myös sivulla 6[S] ja englanninkielisissä CSS-kommenteissa[S].

[Alku]

Taustat ja reunat lomakkeille ja kehyksille

Kokoavat lomake-elementit (FORM, FIELDSET) ovat ongelmattomia, koska niiden käsittelyyn voi soveltaa CSS2:n laatikkomalleja (box models) - ne ovat selkeitä lohkoelementtejä.

Sen sijaan CSS:n sovittaminen lomakekontrollielementteihin (BUTTON, ISINDEX, LABEL, LEGEND INPUT, OPTION, OPTGROUP (tuettu vain uusissa Netscape/Mozilla-selaimissa), SELECT ja TEXTAREA) on ongelmallista. Olen keskustellut niistä erään Mozilla org. suunnittelijan kanssa, joka on ollut yhteydessä W3C:hen. Tämän keskustelun pohjalta on tullut esille, että on ylipäätänsä kyseenalaista sovittaa CSS:ää lomakekontrollielementeille, koska niiden käytös ei vastaa CSS:n nykyistä laatikkomallia. Niitä ei siten voi kuvata CSS:llä (mikä näyttötyyppi (display type) olisi esim. lomakenapilla), joten niille ei ole olemassa mitään standardia. Kaikki yritykset sovittaa tyylejä lomakekontrollielementeille ovat usein ongelmallisia.

Henkilökohtainen mielipiteeni on se, että selainten tulisi pystyä soveltamaan lomakekontrollielementteihin kaikkia sellaisia ominaisuuksia, jotka eivät ole riippuvaisia laatikkomallista. Tällaisia ominaisuuksia ovat ainakin tekstityyliin ja fontteihin liittyvät ominaisuudet. Kaikki uudet selaimet toimivat tässä suhteessa hyvin.

Ongelman ydin on oikeastaan siinä, mitä luonnostaan reunukselliset lomakekontrollielementit, kuten SELECT itse asiassa ovat. Niiden luonne on poikkeuksellinen. Ne voidaan ymmätää ikään kuin upotetuiksi objekteiksi, elementin IFRAME tapaan, jolla on oletuksena kehysreunukset. Selaimet eivät korvaa em. elementin kehysreunuksia CSS:llä. Ne saa pois vain määrittämällä frameborder="0". Elementtien SELECT ja IFRAME reunukset ovat saman tyylisiä, joten esim. elementin SELECT reunuksia voidaan periaatteessa tulkita niin, että sillä olisi ikään kuin frameborder="1", jota ei voi määritellä toiseksi. Tällöin CSS-reunukset tulevat näiden olemassa olevien reunusten ulkopuolelle ja elementti saa tuplareunukset. Koska useimmilla lomakekontrollielementeillä on HTML:ssä luonnostaan reunukset toisin kuin TABLE ja IMG elementeillä, joille voi lisäattribuuttina ne määritellä, ne ovat lomake-elementeissä hieman erikoisasemassa.

Elementtien FRAME ja FRAMESET tulisi saada reunukset samaan tapaan kuten IFRAME.

CSS voi kuitenkin poistaa tai korvata TABLE ja IMG elementeille määritellyt HTML-reunukset, myös korvausperiaate on looginen, mutta se rinnastaa lomakekontrollielementit eri tavalla muihin elementteihin - niitä käsitellään enemmän tavanomaisina elementteinä eikä ikään kuin upotettuina erikoisobjekteina. Näin myös sivulla 1b[S] mainitsemani CSS:n yleisperiaate pääse toteutumaan paremmin.

Eräs W3C:n CSS-työryhmän jäsen sanoi, että selaimille pitää antaa oikeus käyttää ns. widget-kirjastoja (widget libraries, jotka määrittävät lomakekontrollielementtien ulkoasun, koska niiden käyttö on selaimelle nopeampaa. Lomakekontrollielementit voidaan lainata käyttöjärjestelmästä, jolloin niiden reunustyyppeihin ei voi vaikuttaa. On kuitenkin mielekästä antaa Web-suunnittelijoille mahdollisuus muuttaa reunuksia, jolloin lomakekontrollielementtejä ei voida enää lainata käyttöjärjestelmältä. Koska CSS joissakin tapauksissa kasvattaa sivujen latausaikoja, sivujen tekijän vastuulle pitää ylipäätänsä jättää se, haluaako hän kasvattaa CSS:n avulla sivujen latausaikoja vai ei. Selaimen ei pidä tehdä tätä päätöstä sivujen tekijän puolesta! Puuttuvat piirteet lisätään CSS3[S] spesifikaatioon, jolloin lomakekontrollielementit voidaan toteuttaa standardilla tavalla. Sitten kuin CSS3 tulee valmiiksi, selainvalmistajat tulee velvoittaa sitä noudattamaan.

W3C: User Interface for CSS3.

Suositukseni:

  1. Suositan, että määritä lomakekontrollielementeille vain tekstiin ja leveyteen liittyvät ominaisuudet.

  2. Jos INPUT elementtiä käytetään painikkeena, älä määrittele sille reunus- ja taustaominaisuuksia. Pidän reunusten määrittelemistä n lomakekontrollielementeille ylipäätänsä kyseenalaisena.

  3. Älä määrittele INPUT-elementille korkeutta CSS:n avulla. Myös padding-ominaisuuden käyttöä olisi syytä välttää.

  4. Älä yritä muuttaa tavanomaisten kehysten esitysasua CSS:llä.

Selainkohtaisia huomautuksia:

  1. Vanhemmat Opera (4.x ja vanhemmat) ja Netscape 4.x -selaimet eivät tue kaikille lomake-elementeille perus tekstiominaisuuksia.

  2. Lomakekontrollielementtien toteutukset ovat saamani s-postin mukaan nämä ovat Mac-selaimissa täysin erilaisia. Esim. Mac IE 5.0:ssa SELECT on nappulamainen eikä laatikkomainen.

  3. Lomakepainikkeet näyttävät monissa selaimissa paremmilta, jos niille ei anna CSS:llä tausta- ja reunusominaisuuksia. MS IE Windows XP, MS IE Mac käyttävät pyöristettyjä lomakepainikkeita. Myös Opera 7.x:n eräät pinnat (engl. skin) käyttävät pyöristettyjä tyylikkäitä painikkeita.

  4. Taustaominaisuudet eivät toimi Opera-selaimissa (6.x -sarjaan asti).

  5. Reunusten toimivuus on lomake-elementtien suhteen on erityisen huono Netscape 4.x -selaimissa, joissa reunusten liittäminen elementille SELECT estää lomakekontrollin toimimisen.

  1. Opera lisää versioon 6.x asti reunukset elementeille INPUT, SELECT ja TEXTAREA vakioreunuksen ulkopuolelle. Opera tulkitsee elementit ikään kuin upotettuina objekteina lainaten ne käyttöjärjestelmältä. Opera 7.x lähtien Opera näyttää lomakkeet radionappia ja OPTION-elementtiä lukuun ottamatta samaan tapaan kuin Mozilla Gecko selaimet. Elementille OPTION ei voi antaa SELECT-elementistä poikkeavia väri- ja taustaominaisuuksia eivätkä taustakuvat toimi OPTION-elementille.

  2. MS IE Windows, Mozilla Gecko ja Opera 7.x+ -selainten kohdalla CSS korvaa alkuperäiset reunukset elementin INPUT suhteen tietyissä tilanteissa (<INPUT type="text">) ja elementin TEXTAREA suhteen (Mozillan ja Opera 7.x+:n kohdalla myös elementin SELECT suhteen, joka ei tule reunuksia tälle elementille).

  3. Dynaamiset näennäisluokat toimivat lomakekontrollielementeille vain Opera 7.x+ ja Mozilla Gecko -selaimissa.

  4. Opera 7.0 Beta 1 on ainoa selain, joka näyttää elementin BUTTON kaikissa tilanteissa täysin oikein. Uudemmissa Opera-selaimissa ei toimi em. elementille display:block. Mozilla Gecko -selaimissa ei puolestaan toimi text-align ominaisuus.

  5. Mozilla Gecko selaimissa lomake-elementien dimensioiden määrittelytapa vaihtelee. Jotta dimensioit olisivat mahdollisimman samalaisia, tulisi niille lisätä joko -moz-box-sizing:border-box tai -moz-box-sizing:content-box (CSS3:een on lisätty on omainaisuus box-sizing, jota käsittelen eräällä lisäsivulla[S]).

  1. Mozilla Gecko -selaimet antavat ehdotuksen siitä, miten CSS3:n mukaan toimiva selain voisi esittää lomakekontrollielementit. Otin Mozilla 0.7:stä kuvakaappauksen[S]. Jos voit, kokeile alla olevaa testilomaketta Opera 5.x+, MS IE 5.x+ ja Netscape 6.x+ -selaimissa ([M][S][Pw]):

    *{font-family:Verdana, Arial, sans-serif; font-size:14px}
    form {border:1px solid black; background-color:aqua; padding:10px;}
    fieldset, isindex {border:1px solid black; padding:2px; margin:2px; width:100%}
    fieldset#first {background-color:white}
    fieldset#second {background-color:olive;}
    fieldset#third {background-color:lime;}
    legend, label {font-weight:bold; color:red; border:1px solid red; background-color:white}
    select, input, textarea {border:2px outset red; background-color:#ffc; width:200px; font-weight:bold}
    optgroup#two {background:aqua url(./Css/Kuvat/pallo.gif) no-repeat; padding-left:16px;}
    option, textarea, input {background:#ffc url(./Css/Kuvat/pallo.gif) no-repeat; padding-left:16px}
    button {background-color:#ccc; border:3px outset gray; padding:10px; width:200px} input[type="radio"]{height:15px;}

    CSS:n päämääränä on korvata HTML:n esitysasullisia piirteitä mahdollisimman paljon. <INPUT type="radio"> kohdalla CSS3:n pohjalta on toistaiseksi avoin kysymys, pitäisikö radionapille laittaa ylimääräiset reunukset vai pitäisikö alkuperäinen kokonaan korvata.

  1. Vaikka Netscape 6.x+ pystyy muuttamaan kaikkien lomake-elementtien esitysasua, jos lomakkeita käytetään XML-documenteissa, edes Netscape 6.x ei pysty CSS2:n puitteissa määrittelemään tarpeeksi sääntöjä ja ominaisuuksia kaikkien lomake-elementtien luonnollisten ominaisuuksien esittämiseksi. Tosin Netscape/Mozilla määrittelee esitysasulliset piirteet selainkohtaisella CSS:llä tiedostossa /res/forms.css, jolloin periaatteessa jo nykyisin se voisi toteuttaa esitysasulliset XML-dokumenteille vaadittavat lomakepiirteet. Mainitsen Mozillan selainkohtaisista piirteistä CSS-taulukoissa (form-related pseudo-classes[S] ja outline[S] kohdalla).

  2. Opera 7.x+ tukee outline ominaisuutta, mutta se ei toimi kunnolla lomakekontrollielementeille.

  3. Lomakekontrollielementtien korkeus- ja leveysominaisuudet ovat MS IE 6.0:ssa DTD-riippuvaisia[S]. Korkeuden määrittely saattaa aiheuttaa huomattavasti erilaisia lopputuloksia eri selaimissa.

  4. CSS toimii FRAME ja FRAMESET elementeillä vain MS IE selaimissa tilanteissa, joissa kehyksissä on todellista sisältöä. Mozilla Gecko -selaimet piilottavat yleensä määritellyn CSS:n todellisen tai kuvitellun kehysasiakirjan taakse. Jos ilmoitettua dokumenttia ei löydy Mozilla 1.1a:lle CSS:llä voi määritellä taustaominaisuudet ja reunukset FRAME ja FRAMESET elementeille (eräille vanhemmille versioille voi vain saada näkyviin vain elementille FRAMESET määritellyt reunukset).

[Alku]

Taustat ja reunat HTML ja BODY elementeille

Erityisesti kehyksiä käytettäessä on usein mielekästä reunustaa Web-sivun asiasisältö kuten olen tehnyt. Tämä voidaan periaatteessa toteuttaa elementeille BODY avulla seuraavaan tapaan:

body {border: 1px #603 solid;}

Käytettäessä reunuksia koko asiakirjalle, on lisäksi muistettava laittaa marginaali- ja sisennysarvot seuraavalla tavalla, mikäli niiden halutaan toimivan kaikilla selaimilla saman tapaisesti:

body {border: 1px #603 solid; padding: 10px; margin: 0px;}

CSS:n näkökulmasta katsoen BODY-elementti ei poikkea mitenkään DIV elementistä. Taustaominaisuuksien suhteen HTML 3.2:ssa bgcolor ja background on tarkoitettu koko käytettävissä olevalle näyttöpinnalle, mutta CSS:ssä HTML edustaa koko näyttöpintaa. Vaikka koko näyttöpinta (canvas) ei olisi käytössä, HTML-elementille (tai mille tahansa muulle juurielementille) annetut taustaominaisuudet koskevat koko käytettävissä olevaa näyttöpintaa. Selaimet ovat kuitenkin vapaita asettamaan BODY-elementit oletusdimensiot siten, että BODY koskee koko näyttöpintaa.

Reunusten ja taustaominaisuuksien määrittely BODY-elementille tuottaa ongelmia lyhyillä sivuilla. Ongelma on siinä, että ilman korkeusmäärittelyä standardin mukaan toimivilla selaimilla reunus- ja taustaominaisuudet saattavat päättyä välittömästi päätöskoodin </BODY> jälkeen!. Jos on lyhyitä sivuja, reunuksen alareunan paikka saattaa jollakin selaimella muuttua koko ajan. Taustakuvia käytettäessä pahinta on se, että taustamäärittely voi jatkua reunuksen alapuolella. Lopputulos on ikävän näköinen. HTML-elementille määriteltynä lopputulos on reunusten osalta siistimpi kun elementille on määritelty myös height:100%. Toisaalta pitkillä sivuilla reunus ei ole aina asiakirjan joka reunassa, sillä reunus rullautuu CSS-spesifikaatioita noudattavilla selaimilla asiakirjan mukana.

Lyhyille sivuille voi olla tarvetta määritellä lisäksi ylimääräinen DIV-elementti ja sille prosentteina määritelty korkeusarvo (esim. height: 97%), jotta edellä käsitellystä korkeusongelmasta päästään (vaihtoehtoisesti korkeusarvo voidaan antaa BODY elementille). Kun määrittelee tälle elementille reunukset, saa nekin toimimaan mahdollisimman monessa selaimessa. Jos reunusten ylä- ja alapuolella on marginaalia, reunusten rullautuminen ei ole suuri visuaalinen haittatekijä.

Selainkohtaisia huomautuksia:

  1. Ilman BODY-elementille annettavia padding-arvoja ainakin Opera 3.6x+ "liimaa" reunukset kiinni tekstiin (tai sisemmän lohkolaatikon reunaan). Menettely on sinänsä spesifikaation mukaista, sillä CSS ei määrittele BODY elementille oletuskäyttäytymistä (selaimen tyyliarkit saattavat sen tehdä). Oletuksena oleva ns. selainsiirtymä voi (browser offset) voi olla joko ikään kuin marginaali tai täyte.

  2. Jotkut Opera ja Mozilla Gecko -selaimet saattavat lyhyillä sivulla asettaa alareunuksen välittömästi </BODY> jälkeen, mutta eivät katkaise taustakuvia samasta kohtaa. Tämä on virheellistä toimintaa, sillä taustat eivät juurielementtiä lukuun ottamatta saisi mennä elementin reunusten ulkopuolelle.

  3. Reunusten määrittely elementille HTML ei toimi MS IE 4.x -selaimissa (MS IE 5.0+ Windows, Opera 3.6x+ ja Mozilla Gecko -selaimissa määrittely toimii). Eräillä tempuilla CSS:n voi määritellä siten, että MS IE 4.x Windows lukee reunat elementille BODY mutta muut samaa tyyliarkkia käyttävät selaimet elementille HTML (selostan tempun periaatteen sivulla, joka käsittelee MS IE ongelmia[S]).

  4. Mikään MS IE -selain ei laita HTML elementille annettuja marginaaleja reunusten ulkopuolelle kuten uudet Opera ja Mozilla Gecko -selaimet. Vanhemmat selaimet hylkäävät marginaalin ja reunuksen kokonaan ja uudemmat laittavat marginaalin reunusten sisäpuolelle (mallisivu[S]).

  5. Netscape 4.0x on niin huono, että sille ei voi laittaa koko dokumenttia koskevia reunuksia vaan se täytyy ohittaa tuontisäännöllä, ettei se kaadu.

  1. MS IE 4.x-5.5 Windows -selaimet "ratkaisevat" kaikki reunusongelmat toimimalla CSS2 standardin vastaisesti (MS IE 6.0 Windows käyttäytyy samoin, mikäli se ei ole standard-compliant -moodissa[S]). Se määrittelee reunuksen katselukanavasta (eli ikkunasta) käsin olkoon ne sitten määritelty HTML tai BODY elementille. Vaikuttaa siltä, että MS IE käsittelee yksittäisiä sivuja elementin FRAME tavoin ja asettaa sen vuoksi background ja border ominaisuudet HTML ja BODY elementeille katselukanavan mukaisesti (MS IE ei kuitenkaan käsittele elementtejä BODY tai HTML elementtinä FRAME, sillä myös kehykset ja kehyssetit voivat saada oman CSS:n).

    Lopputulos on kyllä sinänsä siisti, sillä reunus on aina dokumentin joka reunassa, mikäli ne on joka reunalle määritetty eivätkä ne rullaudu asiakirjan mukana kuten uusissa Opera ja Mozilla Gecko -selaimissa. Itse asiassa Microsoftin ratkaisu on paljon ongelmattomampi kuin CSS2-spesifikaation mukainen toteutus.

    Mozilla Gecko -selaimille voidaan määritellä näyttöportille reunukset käyttämällä epästandardia nännäiselementtiä :-moz-canvas/ :canvas. ::canvas ja ::viewport näennäiselementit olisi hyvä saada virallisen CSS3 spesifikaation valitsinmoduuliin ja lähetin ehdotuksen asiasta.

  1. MS IE:n spesifikaation vastaisesta menettelystä seuraa taustamäärittelyongelmia. MS IE laskee mahdollisen kiinteän taustakuvan reunojen ääriviivoista lähtien eikä katselukanavan eli ikkunan reunasta, kuten pitäisi. Tästä seuraa taustakuvan asemointiero Opera 3.62+ ja Mozilla Gecko -selainten kanssa. Jos sivuilla on paksut reunukset, virhe voi olla merkittävä. Tein testisivun[S] (jos vierailet sivulla, ikkunan leveys täytyy olla iso) ja otin katseluikkunoiden yläosasta kuvaruutukaappauskuvia. Näin sain seuraavat testitulokset:

    • Opera 5.01[S] - asemoinnit ovat kohdallaan. Saamani sähköpostiviestin mukaan myös Mac IE 5.0 toteuttaa testin oikein.
    • Mozilla 0.6[S] - kaikki tarkasti määritellyt asettelut ovat kohdallaan, mutta "kelluvat" lohkot (käsittelen niitä sivulla 11[S]) aiheuttavat valkoisen "nauhan" (tämä asia on korjattu Mozilla 0.9:ssä). Ne voisivat mielestäni olla samalla rivillä.
    • MS IE 5.5[S] - taustakuvan ja kiinteiden lohkojen (position:fixed; käsittelen määrittelyä sivulla 11[S]) asemointi ei ole oikea.
    • MS IE 6.0 preview[S] - kiinteiden lohkojen asemointi ei ole oikea mutta taustakuva on asemoitu oikein.
  2. BODY-elementin käytös on korjattu 6.0-versiossa ja se käyttäytyy DIV elementin tavoin. Elementit HTML ja BODY voivat luoda varsinaiselle sisällölle kaksitasoisen taustan.

Koko sivulle tarkoitettuja reunuksia (ja joskus myös taustakuvia) juuri nyt on mahdoton saada näyttämään samanlaisilta kaikille CSS-ominaisuuksia tukeville selaimille.

Olen tehnyt erään ehdotuksen, joka on sivulla CSS and HTML in the future[S][Pw]. Sillä voitaisiin standardilla tavalla ratkaista BODY elementille määriteltyihin reunuksiin liittyvät ongelmat. Ratkaisu ei ole kuitenkaan yleispätevä eikä sitä voida aina käyttää seuraavista syistä:

  1. Tausta ei voi olla kaksitasoinen. Tämä sivusto käyttää kaksitasoista taustamäärittelyistä, jossa on eri taustaominaisuudet HTML ja BODY elementeille (kuvakaappaus kaksitasoisesta taustaväreistä[S]).

  2. On mahdotonta määrittää useamman XML-pohjaisen kielen juurielementti samalla CSS:llä, esim. XHTML and SMIL (Syncronized Multimedia Integration Language): html, smil {width:500px; margin:auto; border:10px solid black; background: #603 (someBackgroundImage.gif) center center no-repeat fixed;}.

[Alku]

Erityisongelmia

Aiheet

Lohko- ja rivinsisäiselementit

CSS2 tarjoaa sangen monimutkaiset säännöt erilaisten elementtityyppien käsittelylle, mistä johtuu monia ongelmia.

Tavanomaiset ei-korvattavat rivinsisäiselementit (esim. STRONG) ei tulisi ottaa width jaheight ominaisuuksia. Sen sijaan korvattavat elementit (replaced elements) , esim.IMG, voivat ne saada. Ei-korvattavat tekstielementit voivat saada line-height ominaisuuden ja ne voivat vaikuttaa rivikorkeuteen myös font-size ominaisuuden avulla, koska pystytason margin ja padding-arvojen ei tule vaikuttaa rivikorkeuteen siten, että elementit aina mahtuisivat riville. Asemoinnin ja rivikorkeuden suhteen korvattavien rivinsisäiselementtien tulee käyttäytyä kuten ei-korvattavien elementtien.

Mahdolliset border ja background ominaisuudet voivat aiheuttaa sen, että ei-korvattavat rivinsisäiselementit menevät osittain päällekkäin. Korvattavilla elementeillä positiiviset margin, padding jaborder arvojen tulee kasvattaa rivikorkeuksia niin, että elementit aina mahtuvat riville.

Pystytason marginaalit menevät normaalisti kasaan (käsittelen poikkeuksia myöhemmin), jolloin esim. kahdelle perättäisille lohkoelementeille annetut samat ylä-ja alamarginaalit tuottavat yksinkertaisen, ei kaksinkertaista marginaalia.

W3C: CSS1 Test Suite: sec42.htm and sec44.htm; CSS2: 8.3.1 Collapsing margins.

HTML 3.2-koodauksessa rivinsisäis- ja lohkoelementtien asemoinnit on määritelty puutteellisesti align ja valign attribuuttien avulla. Ne määrittävät toisinaan lohkoelementtien sisällä olevien rivinsisäiselementtien ja muun sisällön asemointia. Toisinaan ne määrittävät lohkojen itsensä asemointia suhteessa ympäröivään emoelementtiin.

Vaaka-asemoinnin kohdalla nämä kaksi asiaa on täysin erotettu toisistaan. Ominaisuus text-align koskee kaikkea lohkoelementin sisällä olevaa rivinsisäistason sisältöä. Täten text-align:center keskittää rivinsisäiselementin ja muun rivinsisäistason sisällön. Ominaisuus ei saisi vaikuttaa millään tavoin lohkoelementin itsensä asemointiin eikä sillä ole mitään vaikutusta rivinsisäiselementteihin.

Määrittelyn margin:auto pitää aiheuttaa lohkoelementtien (tai lohkoelementeiksi määriteltyjen elementtien) vaakakeskityksen mutta ei pystykeskitystä.

Pystykeskitykselle on ominaisuus vertical-align (mahdolliset arvot ovat: baseline, top, bottom, middle, sub, super, text-top, text-bottom + positiiviset ja negatiiviset prosentti- tai pikseliarvot (jälkimmäiset eivät kuulu CSS1:n arvoihin). Se vaikuttaa normaalisti vain lohkojen sisällä oleviin rivinsisäiselementteihin. Taulukkosoluissa sillä on sama tehtävä kuin valign attribuutilla (vain arvot top, middle jabottom ovat käytettävissä). Antamalla koko taulukolle tai yksittäiselle solulle korkeus ja yksittäisille solulle valign attribuutti tai vertical-align ominaisuus on mahdollista keskittää elementtejä pystytasossa. Jos BODY ja TABLE elementeille on määritelty korkeudeksi100% tai hieman vähemmän elementti voidaan suurin piirtein keskittää sivun keskelle. Tosine CSS2-spesifikaatio itsessäänf[S] sisältää sen ongelman, että mille tahansa lohkoelementille ei saa pystykeskitystä.

Alla on esimerkki lohkoelementistä muutamin kommentein höystettynä ([M][S][Pw]):

p.special
{border:1p solid blue;
text-indent: 3em; /* ensimmäisen rivin sisennys */
margin:10px; /* tämä suhteutetaan säilytinlohkoon (normaalisti säilytinlohko on elementin emoelementti, mutta ei tapauksissa, jossa elementti on absoluuttisesti tai kiinteaästi asemoitu (käsittelen absoluuttisesti tai kiinteästi asemoituja elementtejä sivulla 11[S])), jossa kappale on; negatiiviset arvot ovat sallittuja; muista myös marginaalien ja täytteiden pikakirjoitemäärittelyt! */
padding:10px; /* sisennys tekstille, joka on kappaleen sisällä; negatiiviset arvot eivät ole sallittuja */
text-align:justify; /* tekstin vaaka-asemointi; muut arvot ovat: left; center and right */
vertical-align: top;
/* arvo ei periydy ja se vaikuttaa lohkon sisällä olevan tekstin ja muiden elementtien keskinäiseen pystyasemointiin */
font: normal small-caps 120%/120% fantasy;

Sivujen tekijät voivat käyttää lohko- ja rivinsisäiselementtejä virheellisesti ja panna rivinsisäiselementin sisälle lohkkoelementitejä. Ole huolellinen rivinsisäiselementtien käytössä. Älä laita lohkoelementtejä rivinsisäiselementtien sisälle (käsittelen elementtien käyttöämyös erläällä the usage of elements also in lisäsivulla[S]).

Ainoat elementit, jota voi käyttää sekä rivinsisäis- että lohkoelementtinä ovat INS jaDEL. Mutta niitä ei tule käyttää samanaikaisesti sekä rivinsisäis- että lohkoelementteinä.

Selainkohtaisia huomautuksia:

  1. Jos rivinsisäiselementtejä on käytetty lohkoelementtien ulkopuolela MS IE näyttää tällaisille elementeille määritellyn CSS:n useimmissa tapauksissa kuten lohkoelementeille. But käytettäessä CSS:ää uusien Netscape/ Mozilla Gecko -selainten kanssa pitää olla tarkka. Olen huomannut, että virheellinen rivinsisäiselementtien käyttö aiheuttaa ylimääräisiä rivikatkoja eivätkä CSS-ominaisuudet toimi suunnitellulla tavalla.

  2. Ominaisuuden vertical-align toteus vaihtelee hyvin suuresti. Suosittelen testaamaan erityisesti ominaisuuden vertical-align mahdollisimman monessa selaimessa CSS1 Test Suite. Se toimii sangen hyvin ainakin Mozilla Gecko, Opera 4.x+ and MS IE 5.5+ Windows -selaimissa.

  3. En suosittele käyttämään TD elementille vertical-align:middle koska se tuottaa eräille selaimille ongelmia. Taulukkoja apuna käyttävä pystykeskitys ei toimi Opera 7.2x -selaimissa.

  1. Koska Mozilla Gecko -selaimet antavat kuville (IMG) standard -moodissa[S] CSS2-spesifikaation mukaisesti vertical-aling:baseline, yksinäiset taulukkosolujen sisällä oleville kuvien ympärille tulee tyhjää tilaa. Sen poistamiseksi täytyy määrittää joissakin tilanteissa kuville vertical-aling:bottom. Koska muut selaimet käyttävät muuta oletusarvoa niissä ei ole tätä ongelmaa.

  2. MS IE 4.x-5.0 -selaimissa on vakava toteutusvirhem sillä reunukset eivät toimi ei-korvattaville rivinsisäiselementeille. Jos sivujen tekijä on määrittänyt height -ominaisuuden, selaimet näyttävät reunukset, mutta virheellisesti (katso joitakin esimerkkejä virhesivulta[S][Pw]; voit katsoa joitakin esimerkkejä myös englanninkieliseltä sivulta, joka käsittelee virheellisiä määrtiyksiä[S][Pw] - ei paluulinkkiä tälle sivulle).

    MS IE 5.5+ toimii oikein, jos ominaisuutta height ei ole määritelty. Ominaisuus height works toimii tavanomaisille rivinsisäiselementeille standard-compliant -moodissa[S] vain jos niille on määritelty display:inline-block, jolloin selain toimii CSS3:n mukaisesti (käsittelen ominaisuutta display sivulla 11[S]).

  1. Netscape 4.x näyttää reunukset samalla lailla virheellisesti kuin MS IE ominaisuuden height kanssa..

  2. text-align vaikuttaa MS IE 4.x Windows -selaimissa taulukon itsensä asemointiin. text-indent saattaa aiheuttaa MS IE 5.0 -selaimessa ylimääräistä vasenta marginaalia. Text-align:justify toimii testaamistani selaimista oikein vain MS IE 5.x+ Windows ja uusissa Mozilla Gecko -selaimissa (Opera tekee virheitä, jos lohko sisältää rivinsisäiselementtejä, jotka eivät sovi samalle riville, mutta normaalisti selain toimii hienosti). Netscape 4.x voi näyttää vain hyvin yksinkertaisia dokumentteja.

  3. Selaimet toteuttavat kasaan menevät marginaalit vaihtelevassa määrin virheellisesti. Minulla on tähän tarkoitukseen testisivut[S].

  4. margin:auto toimii testaamissani selaimissa oikein vain Opera 4.x+, uusissa Mozilla Gecko, MS IE 6.0 Windows ja Konqueror (Linux) -selaimissa (ja erään kuvakaappauksen perusteella myös Safari-selaimissa (Mac-selain)). Jotta elementit saisi keskitetty vaakatasossa vanhemmissa MS IE -selaimissa on järkevää asettaa yksi CENTER elementti haluttujen elementtien ympärillä. Koska jotkut Opera ja Mozilla Gecko -selaimet saattavat jättää huomioimatta CENTER elementin vaikutuksen myös margin-left:auto; margin-right:auto on välttämätön.
[Alku]

Lohkojen dimensiot

Monesti on mielekästä määritellä reunustettavalle elementille width ja height ominaisuudet. Niiden määrittelyssä on kuitenkin eräitä ongelmia.

Perussyy ongelmiin lienee siinä, että HTML spesifikaatioissa width ja height attribuutit lasketaan toisinaan eri lailla kuin CSS:ssä. CSS2:ssa em. ominaisuudet ovat aina sisällön dimensioita ilman että mukaan lasketaan padding, border tai margin arvoja. HTML:ssä width ja height attribuutit sisältävät joskus reunukset ja täytteet eli koko lohkolaatikon (block box) dimensiot.

Sisältöleveys (content width) merkitsee konkreettiselle sisällölle annettavaa varauslaatikkoa, esim. tilaa kuvalle, jolla on tietyt dimensiot. Esim. lohkoon, jolla on width:200px pitää mahtua seuraavat sisällöt:

<IMG src="..." alt="..." width="200" border="0">
<DIV style="width:200px; border-width:0; padding:0; margin:0">...<DIV>
W3C: CSS2: 8 Box model, 8.1 Box dimensions[Pw], 10.2 Content width: the 'width' property[Pw].
Muita sivustoja: Keijo Kortelainen: CSS:n lohkot ja laatikot; Web Design group: CSS Properties[Pw].

Tästä dimensio-ongelmasta voi osittain päästä sillä, että käyttää ylimääräistä tai ylimääräisiä elementtikerroksia. Ulompi elementtikerros määrittää kokonaisdimension ja sisemmälle annetaan margin, padding ja border -ominaisuudet. Näin ainakin lohkon leveys on sama yleisesti käytetyissä uusissa selaimissa. Taulukoissa tämän voi hoitaa siten, että taulukkosoluille laitetaan täytearvoja vaan taulukkosoluissa sisältö on aina jonkin lohkon sisällä. Vanhoja selaimia ajatellen voi antaa täytearvon cellpadding-attribuutilla, joka sitten ohitetaan CSS:n avulla.

Alla koodiesimerkki molemmista tapauksista ([M][S][Pw] - mallin lopussa on uusi testilohko):

td, th, div.sailytinLohko {padding:0; margin:0; border-width:0; width:220px} /* padding:0 eliminoi cellspacing="10" vaikutuksen */
div.sailytinLohko div, th div, td div {margin:10px; padding:10px; border:10px solid black}

<div class="sailytinLohko"><div>
Sisältö. </div></div>...

<table summary="Sisältöesimerkki" cellspadding="10">
<tr><td><div>
Sisältö.</div></td></tr>
</table>

CSS3 tarjoaa mahdollisuuden valita paras laskentatapa (käsittelen tätä asiaa sivulla, joka käsittelee spesifikaation ongelmia[S].

Toinen eteen tuleva ongelma on se, että kuinka tiukasti dimensiot on tulkittava. HTML-attribuutein määritellyissä taulukoissa dimensiot ovat vain minimiarvo. Näin CSS:ssä ei voida tavanomaisille lohkoille menetellä. Jos sisältö ei sovi annettuun arvoon, loppusisältö menee elementin ulkopuolelle - pahimmassa tapauksessa muun sisällön päälle.

CSS2:ssa tämä ongelma on ratkaistu antamalla mahdollisuus määritellä korkeudelle ja leveydelle raja-arvot (min-height, max-height, min-width ja max-width). Vaihtoehtoinen tapa on määrittää overflow:scroll tai overflow:auto, jolloin sitä osaa, joka ei mahdu lohkon sisälle voidaan skrollata.

Sen sijaan, että laittaa suuren määrän kerroksia, on yksinkertaisempaa määritellä perus CSS useimmille selaimille siten, että sivut toimivat suhteellisen hyvin ilman JavaScript tukea. Selainkohtainen CSS määritellään niille selaimille, jotka sitä todella tarvitsevat (katso malliksi lukemasi sivun lähdekoodi). Erityisen CSS:n tarve vaihtelee, sillä jokaisella selaimella on erilaiset viat.

Edellä esitettyjen asioiden lisäksi on otettava huomioon se, että selainten käyttäjät voivat pitää vasemmalla ja oikealla sivustalla työkalurivejä. Jos heillä on käytössä 800x600 pikselin monitori, käytettävissä olevan katselukanavan (viewport) eli ikkunan leveys on noin 730 pikseliä.

Suositukseni:
  1. Älä anna ainakaan padding eikä mielellään myöskään border ominaisuuksia elementeille, joille haluat tarkat leveysarvot (yhden pikselin reunukset eivät useimmissa tapauksissa ole haitallisia).

  2. Jos käytät DIV-elementtiä perusrakennuselementtinä anna lapsielementeille vaakatason marginaalit (taulukoille on syytä määritellä luokat, jotta useampikerroksisisia taulukoita käytettäessä marginaalit koskisivat vain ulointa kerrosta).

  3. Jos haluat, että asiasisältö näkyy kaikilla selaimilla keskellä sivua, määritä asiasisällön kokoavalle elementille margin-left:auto; margin-right:auto ja laita asiasisällön kokoavan elementin ympärille vielä CENTER elementti ilman mitään mittasuhteita.

  4. Vältä korkeusarvoissa tarkkoja mittasuhteita. Jos haluat antaa elementeille minimikorkeuden, tee se seuraavalla tavalla:

    div.jokinLuokka {height:...px} /* selaimille, jotka tulkitsevat korkeuden minimikorkeudeksi */
    div[class="jokinLuokka"] {height:auto !important; min-height:...px} /* selaimille, joille height ja min-height ovat kaksi eri asiaa */
  5. Määrittele leveydet niin, että sisältö mahtuu 800x600 näytölle. Alla olevassa esimerkissä leveys on määritelty DIV elementille:

    body, html {padding:0; margin:0}
    div.perusLohkolaatikko {margin:10px; width:710px} /* laskentakaava on 730 pikseliä - perussisältölohkon marginaalit */
    p, h1, h2, ... {margin-left:20px; margin-right:20px}
    /* muiden lohkojen dimensioita ei tarvitse välttämättä määritellä lainkaan, pelkät marginaalit riittävät */

Selainkohtaisia huomautuksia:

  1. MS IE Windows -selaimet laskevat width ja height ominaisuudet väärin (em. ominaisuuksiin lasketaan useimmiten mukaan täytteet ja reunukset) aina MS IE 6.0 Windows asti, mikäli selain ei toimi ns. standard-compliant moodissa[S]. Siinä kuten on MS IE 5.x Mac -selaimissa on ns. "DTD-kytkin". MS IE 6.0 toimii suhteellisen oikein lukuunottamatta elementtiä TABLE sekä arvoa 100%, joka ei toimi, sillä esim. body.CssSite {width:100%; border-width:0; margin:0; padding:0} aiheutti toisinaan vaakavierityspalkin, vaikka sen ei pitäisi sitä tehdä. MS IE 5.x Mac -selaimessa kytkin toimii kunnolla myös taulukoissa (käsittelen taulukoiden dimensio-ongelmia sivulla 10[S]).

  2. Dimensioihin tulee selainten välille suurempi ero, jos käytetään lohkoille ja niiden marginaaleille prosenttiarvoja (testasin margin:33%; width:67% vaikutusta). MS IE 5.x Windows laskee prosentin jäljellä olevan tilan mukaan kun vasen marginaali on ensin otettu pois laskuista, ei emoelementin sisällön leveydestä käsin. Tämä laskentatapa aiheuttaa sen, että Opera ja Netscape -selaimille saattaa tulee vaakavierityspalkit, mikäli sivut optimoidaan MS IE 5.x Windows-versioiden mukaan. Otin kaksi kuvaruutukaappausta:

  1. Dimensio-ongelmia voi yrittää ratkaista käyttämällä attribuuttivalitsimia, joita MS IE ei ymmärrä, esim. (vertaa lohkojen dimensioita sivustoilla oleviin "mittakeppeihin", jotka osoittavat oikeat dimensiot ([M][S][Pw])):

    div.nav, div.nav2 {padding:10px; border:10px solid black} /* reunojen ja sisennysten tulisi kasvattaa laatikon kokonaiskorkeutta */
    div.nav {height:180px; width:180px} /* height toimii koko lohkolaatikon minimikorkeutena MS IE:lle vaikka ei pitäisi; mikäli selain ei tue attribuuttivalitsimia, lohkon dimensioiden tulisi olla 220x220 pikseliä */
    div[class="nav"] {height:auto; min-height:160x; max-width: 160px;} /* koska sisältö ei välttämättä mahdu edellä annettuun kiinteään korkeusarvoon, Opera 4.x+:lle ja Netscape 6.x+:lle on annettu attribuuttivalitsinta käyttäen uudet ominaisuudet, joita MS IE ei ymmärrä - height:auto eliminoi height:180px merkityksen; huomaat että olen vähentänyt sisennysarvot korkeus- ja leveysominaisuuksien dimensioista */
    div.nav2 {height:160px; width:160px}
    /* vertailulohko, jolla tulisi olla samat dimensiot */

    Sain seuraavat testitulokset, jotka esitän kuvaruutukaappauksilla:

    • Mozilla 0.6[S] - täysin oikein.
    • Opera 5.01[S] - muuten oikein, mutta min-height on sama kuin lohkon kokonaiskorkeuden minimiarvo; se käyttäytyy tavallisesti samalla lailla kuin MS IE 5.x Windows -selaimella ominaisuus height.
    • MS IE 5.5[S] - molempien lohkojen kokonaismittasuhteet ovat liian pieniä. Käytetyllä DTD:llä MS IE 5.0 Mac - ja MS IE 6.0 Windows -selainten pitäisi näyttää päätestilohkojen oikealla puolella olevat vertailulohkot oikein.
  1. Prosenttiarvoiset korkeus ja leveysarvot eivät toimi oikein myöskään asemoiduilla elementeillä (käsittelen asemoitujen elementtien ongelmia sivulla 11[S]).

  2. MS IE tulkitsee height ja width väljästi ja sille ne merkitsevät minimiarvoa, jotka voi ylittyä, jos sisältö ei sovi annettuihin arvoihin. Opera ja Mozilla Gecko -selaimet tulkitsevat arvot tavanomaisissa lohkoissa tiukasti.

  3. Ominaisuudet min-height, max-height, min-width ja max-width toimivat yleisillä lohkoelementeillä vain Opera 4.x+, Mozilla Gecko, Konqueror (Linux) ja Safari (Mac - arvio tehty erään kuvakaappauksen perusteella) selaimissa. Koska haluan tämän sivuston kaventuvan käyttäjän tarpeiden mukaan, en ole asettanut kiinteää sivunleveyttä. Toivon, että MS voisi joskus tukea max-width jne. ominaisuuksia, sillä ne ovat ihanteellinen tapa hallita sivujen perusrakenteiden dimensioita.

  4. overflow:scroll ja overflow:auto eivät toimi Opera 6.x -selaimissa. Ne toimivat ainakin MS IE 4.x+, Mozilla Gecko ja Opera 7.x+ -selaimissa.

  5. Ominaisuudella height on myös ongelma, jota käsittelin lohko- ja rivinsisäiselementit yhteydessä.

  6. Mozilla Gecko -selaimet aiheuttavat erään ongelman, jota käsittelen sivulla Listat[S].

  7. MS IE -selaimille saa JavaScript-koodauksen avulla luotua max-width kaltaisen toiminnallisuuden, minkä selostan eräällä sivulla[S]).

  1. Kun kokeilin tätä prosettiarvolla (div.doc {width:99%}), MS IE 5.0 ei näyttänyt kaikkia elementtejä, jos kuville ei oltu annettu pikseliarvoja.

  2. Koska leveysarvot elementeille BODY ja HTML eivät toimi kaikissa selaimissa, on suositeltavaa käyttää elementtiä DIV (tai TABLE) peruslohkona.

  3. Koska eri selaimilla elementillä BODY voi olla oletusarvona joitakin sisennyksiä tai marginaaleja, sisennykset ja marginaalit tulee määritellä.

  4. .

Seuraava sivu käsittelee listoja, joissa myös on hyvä tietää, miten niille määrittelee eri ominaisuuksia, jotta ongelmilta vältyttäisiin.

[Alku]

9. Miten CSS annetaan listaelementeille

Aiheet

Yleistä

Omien listakuvien käyttäminen eräs hauskimmista CSS-määrittelyjen tuomista mahdollisuuksista - ne ovat eräitä suosikki CSS-määrittelyjäni!

Lista elementtejä

CSS1 esimerkkejä

Alla on esimerkkejä CSS1:n mukaisten ominaisuuksien käytöstä ([M][S][Pw]):

ul li /* ei-järjestetyn listan listaelementit - koskee myös alilistoja, mikäli niitä ei ole erikseen määritelty */
{ list-style-type: disc; /* näille tarkoitetut CSS1-tason tyypit ovat disc, circle, square ja none; listatyyppi tulee aina määritellä sitä ajatellen, että listakuva ei ole käytettävissä */
list-style-image: url(pallo.gif);
list-style-position: outside; /* oletusarvo, joka aiheuttaa sisennyksen: arvo inside aiheuttaa sen, että seuraava mahdollinen rivi alkaa samalta tasolta kuin listan merkitsevät kuva tai kirjain */
ul li li /* edellisen listan sisään sijoittuvan seuraavan tason listan listaelementti - määrittely periytyy myös alilistoille, mikäli niitä ei ole erikseen määritelty */
{ list-style-type: disc;
list-style-image: url(pallo-vihrea.gif);
list-style-position: inside;
margin-left: -10px; }

ol li /* järjestetty lista - muista määritellä myös mahdolliset alilistat! */
{ list-style-type: upper-roman; /* näille tarkoitetut CSS1-tason tyypit ovat decimal, lower-alpha, upper-alpha, lower-roman, upper-roman; decimal on oletusarvo ja lower-alpha ja upper-alpha ovat aakkosia */
list-style-image: url(.gif); /*joskus voi käydä niin, että listaelementti saa listakuvan muuta kautta; jotta niin ei kävisi, on syytä määritellä olematon listakuva */
list-style-position: outside;}

Voit katsoa myös seuraavia esimerkkejä:

Listojen avulla voi luoda myös taulukkomaisia esityksiä, jollaisen näet sivulla Millaista terminologiaa olen käyttänyt [S][Pw] sekä eräässä aiemmin esillä olleessa mallissa ([M][S][Pw]).

Selainkohtaisia huomautuksia:

  1. Netscape 4.x:lle margin-arvot tulee antaa vain elementeille OL ja UL, ei elementille LI.

  2. Listakuvat eivät toimi Netscape 4.x -selaimissa.

  3. Netscape 4.x selaimissa text-align:justify ei toimi hyvin listoissa.

  4. Taulukkomaiset esitykset eivät toimi Netscape 4.x -selaimissa. Listojen sisällä oleva teksti on kuitenkin luettavissa, vaikka esitysten rakenne on totaalisen virheellinen.

  5. Jos list-style-position:inside alkaa lohkona, listamerkin tulee jäädä eri riviltä, sillä sen tulisi muodostaa oma elementtilaatikko. MS IE ja Opera eivät kuitenkaan seuraa tässä CSS-spesifikaatioita.

  6. Ominaisuuden list-style-position uudelleen määrittely alilistoille ei toimi MS IE 4.x Windows -selaimessa.

  1. MS IE -selaimet tekevät ainakin kehysten kanssa turhia vaakavierityspalkkeja, mikäli listaelementeillä on paljon asiasisältöä. Mikäli laitat ongelmallisen listaelementin (esim. UL) ulkopuolelle elementillä DIV (esim. div.kavennus {width:97%}) kavennuksen, ongelma voi hävitä.

  2. MS IE ei pysty käsittelemään oikein hyvin pitkiä ja monitasoisia listoja (esimerkkinä CSS-termilista[S] - jaoin se jaksoihin, mutta silti MS IE:llä on vaikeuksia vasemman reunan sisennysarvojen kanssa).

  3. Mozilla Gecko -selaimet määrittelevät listaelementtien välisen sisennyksen oletusarvon padding-ominaisuutta käyttäen kun Opera ja MS IE käyttävät margin-ominaisuutta. Jotta ongelmilta vältyttäisiin oletusarvoja muutettaessa sekä margin että padding ominaisuudet tulee määritellä. Jos vain margin ominaisuus muutetaan, se aiheuttaa erilaisen esitystavan, minkä voi nähdä testisivusta[S] ja siitä ottamistani kuvakaappauksista:

[Alku]

CSS2-CSS3 uutuuksia

CSS2:ssa on uusia listatyyppejä (esim. list-style-type:decimal-leading-zero ja list-style-type:lower-greek).

CSS2 tuo mahdollisuuden laittaa listoihin lisäkirjaimia sekä luoda niille laskimia (counters) näennäiselementtien (:before, :after) ja ominaisuuden content avulla. Käytän ominaisuutta content ennen kaikkea tämän sivuston tulostusversiossa.

CSS3 tulee lisäämään uusia arvoja (esim. radio) ominaisuudelle list-style-type, koska CSS3 tarjoaa paremman tuen HTML 4.0 lomake-elementeille. Myös joitakin uusia sisältöfunktioita (content functions) lisätään.

CSS:n tarkoituksena ei ole upottaa dokumenttiin satunnaisia merkkijonoa tai sisältöä. Ominaisuuden content idea on antaa mahdollisuus somistaa elementti pieniä kuvia or erikoismerkkejä (esim. *) käyttäen. Ominaisuus antaa myös mahdollisuuden näyttää normaalisti piiloon jäävän attribuutin arvo (content:attr()):

blockquote:before {content:"*"; float:left; width:1.0em; height:1.0em} /* * on käytetty ikään kuin listamerkkinä. */
blockquote:before {content:"*********************"; display:block; text-align:center} /* * on käytetty ikään kuin yläreunuksena. */
a[target="_blank"]:after {content: " <" attr(href) "> "} /* Sellaisten linkkien osoite näytetään, jotka vievät Web-sivuston ulkopuolelle. Osoitteen ympärille lisätään hieman tyhjää tilaa ja lisämerkkejä. */
W3C: CSS2: 12 Generated content, automatic numbering, and lists; 12.6 Markers and lists[Pw].

En käy lävitse tällä sivulla perusteellisemmin CSS2-C223 erikoisuuksia. Listaan niitä viimeisellä sivulla[S]. Seuraavaksi tarkastelemme taulukoita.

Selainkohtaisia huomautuksia:

  1. Mozilla Gecko -selaimet tukevat myös CSS2-tason listamäärittelyjä.

  2. Uudet näennäiselementit, tuotettu sisältö ja sitaatit toimivat Opera 4.x+:ssa ja Mozilla Gecko -selaimissa ([M][S][Pw]). Tosin Opera 5.1x-6.x uudet näennäiselementit eivät toimi taulukoiden alielementeille. Mozilla Gecko - ja Opera 7.x+ -selaimet tukevat content:url(); mutta vain kuvia voidaan käyttää. Syynä on se, että selainten suunnittelijat haluavat pitäytyä yllä CSS:n alkuperäistä henkeä - CSS ei ole tarkoitettu satunnaisen sisällön upottamiseen dokumenttiin.

  3. Jos sääntöjä ryhmitetään, content ominaisuus ei toimi Opera-selaimissa.

  4. Opera 4.+:ssa toimii myös automaattinen numerointi, joten Opera on paras selain viimeisimmän esimerkin tarkasteluun. Operassa on kuitenkin joitakin luotuun sisältöön liittyviä vikoja, jotka mainitsen CSS-kommenteissa[S]. Minulla on myös niistä testisivu[S].

10. Miten CSS annetaan taulukkoelementeille

Aiheet

Tämä sivu on jaettu jaksoihin, jotka sisältävät seuraavia aiheita:

Sisältö yhtenä isona sivuna

Yleistä

Taulukoita käytetään usein dokumenttien perusstruktuurin luomiseen, mihin ne eivät ole alun perin tarkoitettu. CSS toimii ylipäätänsä paremmin, jos taulukoita ei käytetä perusstruktuurin luomiseen. CSS:n kanssa on paljon helpompi luoda toimivia kehyksiin perustuvia ratkaisuja, jotka toimivat sangen hyvin vanhemmillakin (kuten esim. Netscape 2.x ja MS IE 3.02) selaimilla.

Kelluvat elementit vai taulukot?

Mikäli et halua käyttää kehyksiä ja katsot, että vanhojen selainten osuus on sangen pieni, peruselementtinä kannattaa käyttää yleistä lohkoelementtiä DIV. Sille voi antaa helposti CSS-kuvauksen. Käsittelen taulukon korvaamista CSS-muotoilukeinoilla sivulla Muotoilut[S][Pw]. Selaimilla on joitakin perusongelmia CSS:n soveltamisessa taulukoihin.

Selainkohtaisia huomautuksia:

  1. Tekstin muotoilu on taulukoissa ongelmallista, sillä tekstin vaaka-asemointiin tarkoitetut CSS-ominaisuudet, kuten esim. text-align:justify vaikuttavat MS IE 4.0 Windows-selaimessa virheellisesti myös taulukon paikkaan. Määrittelyt table {text-align:justify;} ja table {text-align:left;} siirtävät taulukon sivun vasempaan reunaan, vaikka taulukko olisi keskitetty käyttäen elementtiä CENTER tai vastaavaa attribuuttia elementin TABLE sisällä. Jos määrität text-align lapsielementeille (esim. table.right td {text-align:right}), taulukon käyttäytyminen on kunnossa.

  2. Netscape 4.x ei osaa periä tekstiin liittyviä ominaisuuksia emoelementeiltä taulukoihin. Jopa MS IE 5.x:llä ja ainakin joillakin Opera 5x -selaimilla on osittain sama ongelma. Ongelmasta selviää siten, että määrittelee tekstin elementille TD. Koska Opera 3.6x ei tue elementtiä TD, taulukkomääreet on tarpeellista määritellä myös elementille TABLE, mikäli ne poikkeavat BODY elementin ominaisuuksista.

  1. Helpoimmalla pääset, kun toimit seuraavan esimerkin mukaisesti:

    body, table, th, td, p, ol, li, blockquote/* määrittelemällä nämä yhtenä ryhmänä selvitään Netscape 4.x ja MS IE 4.0/5.0 perintäongelmista; sinun täytyy ehkä lisätä myös joitakin muita elementtejä tähän ryhmään, sillä en ole käyttänyt asiakirjoissani läheskään kaikkia mahdollisia elementtejä */
    {font-size: small;
    font-family: Verdana, Arial, Helvetica; /* Opera perii sen muille elementeille; määrittele jotkin näistä uudelleen, mikäli tarvitset joillekin elementeille poikkeavia arvoja */}

    body {background: #dcd2d3 url(taustakuva.gif); /* vain body elementtiä koskevat määreet */
    text-align:justify;} /* text-align annetaan BODY-elementeille ja tarvittaessa eräille alielementeille */
[Alku]

HTML 4.01 taulukkoelementit

Taulukkoelementteihin voi soveltaa kaikkia aikaisemmin esille tulleita ominaisuuksia kuten erilaisia reunuksia, taustamääreitä ja tekstimääreitä - katso vaikka aiemmin esittämäni esimerkki[S][Pw]. Periaatteessa CSS-ominaisuudet voi sovittaa kaikille HTML 4.0 taulukkoelementeille (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH, TR ja TD). Suosittelen vain elementtien TABLE, TH ja TD määrittämistä, sillä yleisesti ottaen selaimet tukevat vain osittain HTML 4.0:n taulukkomallia.

Tosin mitä useampaa elementtiä käytetään, sen useampitasoisia taustoja voi luoda (seuraavan mallin[S][Pw] vasemmassa alalaidassa on pieni esimerkki myös tästä).

W3C: CSS2: 17 Tables, 17.5.1 Table layers and transparency[Pw].

Taulukon otsikossa (CAPTION) toimivat useimmat ominaisuudet. CSS2 tarjoaa mahdollisuuden myös vaihtaa sen sijaintipaikkaa caption-side ominaisuuden avulla ([M][S][Pw]).

Taulukoissa solut ovat taulukkorivien jälkeläisiä, mutta CSS2 tarjoaa mahdollisuuden vaikuttaa myös taulukkosarakkeiden sisältöön ns. sarakevalitsimien (column selectors) avulla. Ne liitetään elementtiin COL, joka tulee välittömästi elementin TABLE perään. Alla yksi esimerkki niiden käyttämisestä ([M][S][Pw] - oikealla alimpana oleva malli koskee sarakevalitsimien toimintaa):

*#col1 { border: 3px solid black;}
*#col2 { border: 3px solid red;}
*#col3 { border: 3px solid olive;}...
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">...

On myös rivivalitsimia (row selectors). Niihin voi liittää first-child-näennäisluokan. Seuraavassa on esimerkki, jonka mukaan taulukkorivit saavat eri värisiä reunuksia ja taustavärejä ([M][S][Pw]):

tr:first-child {background-color: white; border-top: solid black 3px;}
tr {background-color: aqua; color:black;border:yellow 3px solid;}
*#row1 {border: 3px green solid; background-color:aqua;}
*#row2 {border: 3px solid green; background-color:white;}
*#row3 {border: 3px solid blue; background-color:lime;}
*#row4 {border: 3px solid blue; background-color:yellow;}
*#row5 {border: 3px solid blue; background-color:green;}

Selainkohtaisia huomautuksia:

  1. Opera 3.x ja Netscape 4.x tukevat rajoitetusti perustaulukkoelementtejä (TABLE, TH ja TD). Esim. CSS-reunukset eivät toimi em. elementeille.

  2. Elementti CAPTION on toteutettu HTML 4.0 spesifikaation mukaisesti Operassa ja Netscapessa. MS IE toteuttaa sen ikään kuin erityisenä taulukkosoluna. Erilaiset toteutukset tekevät sen käytön ongelmalliseksi.

  3. Elementin CAPTION paikan muuttaminen toimii vain Opera 4.x+ ja Mozilla Gecko -selaimissa ([M][S][Pw]). Jos käytetään TFOOT elementtiä, Opera 4.x-6.x eivät toimi oikein ja lopputulos on sekava (korjattu Opera 7.x:ssä).

  1. Elementin COL tuki on sangen rajoittunutta. Aiemmin esittämäni mallisivu ([M][S][Pw]), jossa oikealla alimpana oleva malli koskee sarakevalitsimia toimii Operassa ja Mozilla Gecko -selaimissa, mutta ei MS IE:ssä.

  2. Testeissäni kävi ilmi, että padding ei toimi Operassa elementille COL, mutta MS IE 5.5+:ssa toimii.

  3. Elementti COLGROUP on heikoimmin tuettu. Testeissäni MS IE 5.x osaa keskittää mallidokumentin[S][Pw] tekstin ja Mozilla 1.1 osaa antaa sille reunusominaisuudet.

  4. Opera 4.x+ toteuttaa erään mallisivun[S][Pw] reunusvärit oikein. MS IE näyttää taustavärit oikein ensimmäistä riviä lukuun ottamatta.

  5. Vain Mozilla Gecko ja Opera 7.x+ -selaimet toteuttavat :first-child edellisessä listakohdassa mainitun mallisivun näennäisluokan. Täten nämä selaimet osaavat parhaiten taulukoihin liittyvät säännöt.

[Alku]

Taulukoiden reunusmallit ja tyhjät solut

CSS2 tarjoaa taulukkosolujen reunojen määrittelemiseen kaksi mallia, joissa annetut arvot periytyviä taulukon lapsielementeille. Seuraavassa kaksi esimerkkiä näistä ([M][S][Pw]):

table {border-collapse: separate; border-spacing: 15pt} /* reunukset eivät mene päällekkäin; border-spacing (vastaa HTML-attribuuttia cellspacing) */
table {border-collapse: collapse;} /* reunukset menevät päällekkäin; CSS2:ssa on tietyt säännöt konfliktien sattuessa, mitkä ominaisuudet valitaan eli näilläkin ominaisuuksilla on porrastettu valintajärjestys */
W3C: CSS2: 17 Tables, 17.6 Borders[Pw].

Taulukkosolut erottavassa reunusmallissa (border-collapse:separate) voi kontrolloida myös tyhjien solujen käyttäytymistä ominaisuudella empty-cells (mahdolliset erityisarvot ovat show (CSS2:n mukaan oletusarvo) ja hide). Jos käytetään border-collapse:separate, elementtiä TR ei huomioida, koska tämä malli toimii vain elementeille TABLE ja TD/ TH.

Elementti TR kuten moni muukin elementti toimii vain border-collapse:collapse mallin kanssa. CSS2-spesifikaation mukaan selainten, jotka toteuttavat reunusmallit, oletusarvona (initial value) tulisi olla border-collapse:collapse.

Selainkohtaisia huomautuksia:

  1. Erillisten reunojen malli toimii ainakin Opera 4.x+ ja Mozilla Gecko -selaimissa. Opera piilottaa oletusarvoisesti tyhjät solut. Mozilla Gecko -selaimissa tämä asia on DTD-riippuvainen[S].

  2. MS IE 5.x+ ei tue border-spacing ja empty-cells ominaisuuksia. Border-collapse:separate toimii vain vastakohtana border-collapse:collapse määrittelylle, mutta erottava reunusmalli ei ole kokonaisuudessaan tuettu. Soluvälit täytyy määritellä cellspacing HTML-attribuutilla.

  3. Yhdistävä reunusmalli toimii ainakin MS IE 5.x+, Opera 4.x+ ja erään s-postin mukaan Mozilla 0.9.9+ -selaimissa. Netscape-selaimista sitä tukevat ensimmäisenä Netscape 7.0. Uusimmat Mozilla Gecko -selaimet eivät aina näytä kaikkia reunuksia ainakaan taulukoissa, joissa solun jokaiselle sivulla ei ole määritelty reunuksia. Myös Operalla ja MS IE:llä on toisinaan samoja ongelmia. Opera 4.x-6.x on ongelmana myös se, että taulukkosolujen välit tulisi keskittää ([M][S][Pw]). MS IE ja Opera 7.x toteuttavat yhdistävän reunusmallin monimutkaisissa tapauksissa siisteimmin.

  4. Mozilla Gecko -selaimet käyttävät oletusarvonaan border-collapse:separate; border-spacing:2px. Se on sama lähtöarvo kuin yleisesti ottaen kaikilla selaimilla, kun CSS:ää ei ole käytetty. Se vastaa samaa kuin oletusarvo cellspacing="2". Mikään selain ei käytä oletusarvona border-collapse:collapse koska selaimet, jotka eivät ymmärrä mitään CSS2:n taulukoiden reunusmalleista käyttäytyvät samoin kuin taulukot, joilla on border-collapse:separate.

  1. CSS-reunukset eivät toimi taulukoissa Opera 3.6x ja Netscape 4.x -selaimilla.

  2. MS IE 4.0 Windows ei tue reunusmalleja, mutta reunusten ominaisuudet voi muuten määritellä CSS:llä.

  3. Elementin TABLE attribuuttia border käsitellään ikään kuin joukkona esimääriteltyjä CSS-ominaisuuksia. Tämä on reunusten käsittelyn yleisperiaatteen[S] johdonmukaista toteuttamista. Esim. <TABLE border="10"> -määritystä vastaa seuraavaa CSS:

    table {border-collapse:separate} /* ei välttämätön, koska selaimet käyttävät tätä oletuksena */
    table {border:10px solid; border-color: #bbb #7e7e7e #7e7e7e #bbb} /* HTML:llä määriteltyjen reunusten väri vaihtelee selainkohtaisesti. Tämä vastaa MS IE -selaimissa HTML-attribuutin värejä. Kokeilemalla voi löytää vastineen HTML:llä määritellyn reunuksen värille muissa selaimissa. Ks. enemmän reunustyyleistä sivulta 8[S] */
    th, td {border:1px solid; border-color: #7e7e7e #bbb #bbb #7e7e7e}
    /* Elementin TABLE attribuutti border määrittää soluille aina yhden pikselin levyisen reunuksen ja vain ulkoreunalla voi olla paksu reunus */
  1. Mikäli haluat yhden pikselin tai reunuksettomat taulukkosolut, jotkut selaimet vaativat border="0" ja cellspacing="0" attribuutit. Yritä laatia reunukset systemaattisesti ja siten ettei vanhemmillakaan CSS:ää tukevilla selaimilla tule kaksinkertaisia reunuksia.

    th, td {border: solid black;} /* yhteiset ominaisuudet */
    td.left,th.left {border-width: 1px 1px 0px 1px;} /* vasemmanpuoleisimmat solut */
    td.right, th.right {border-width: 1px 1px 0px 0px;} /* muut */
    .leftLast {border-width: 1px 1px 1px 1px;} /* viimeinen solu vasemmalla */
    .rightLast{border-width: 1px 1px 1px 0px;} /* muut viimeisen rivin solut */
    ...
    <table cellspacing="0"...>
    <tr>
    <td class="left">...</td><td class="right">...</td>...
    ...
    <td class="leftLast">...</td>...<td class="rightLast"></td>
    </tr>
    </table>

    Tällä tavoin saat paremman ulkoasun Netscape 4.x -selaimille ja yhtäläisen reunusten esitystavan MS IE 4.x+ Windows -selaimille. Uusimmat selaimet (esim. Opera 6.x+) eivät tarvitse yhtään HTML-attribuuttia taulukon esitysasun määrittelemiseen, mutta vielä toistaiseksi ei ole mielekästä toteuttaa taulukoiden laatimista niiden ehdoilla.

[Alku]

Taulukoiden peruskäsittelytapa

Raunusmallien lisäksi CSS2 antaa mahdollisuuden muuttaa table-layout:fixed sitä, millä perusperiaatteella selain käsittelee taulukoita. (Oletusarvona on auto. Mikäli käytät ryhmitettyjä sääntöjä, voit kumota muutoksen joltakin tietyltä taulukolta tekemällä lisäsäännön. Ominaisuus ei automaattisesti periydy lapsitaulukoille.)

Selain ei etukäteen lue koko taulukkoa, mutta se tarvitsee välttämättä taulukon kokonaisleveysarvon, jonka se voi saada joko elementin TABLE avulla or sitten yksittäisten taulukkosolujen kautta. Taataksesi ongelmattoman toiminnan, sinun voi tarvita joissakin tilanteissa määritellä leveys sekä taulukolle että elementeille TH ja TD. Selain laskee niin pian kuin mahdollista taulukkosarakkeiden lukumäärän ja määrittelee sitten sarakeleveyden. Sarakkeiden leveys ei riipu lainkaan solujen sisällöstä vaan yksinomaan annetuista leveysarvoista sekä mahdollisista reunoista ja soluväleistä. Alla on yksinkertainen määrittelyesimerkki:

table.someClass {width:600px; table-layout:fixed;}
table.someClass th, table.someClass td {width:150px}
/* mikäli taulukolle annettu arvo on pienempi kuin soluleveyksien kautta saatu kokonaisarvo, taulukon leveyttä kasvatetaan */

Tämä menetelmä vähentää modeemiyhteyksillä merkittävästi sitä aikaa, jolloin selain ei näytä tietokoneen näyttöruudulla yhtään mitään. Sivun kokonaislatausaika ei juuri muutu, mutta sivujen selaajan ei tarvitse odotella sitä, että selain lukee ensin koko taulukon ja vasta sen jälkeen näyttää sen. Selain pyrkii näyttämään mahdollisimman pian ensimmäisen ikkuna-alan. Menetelmä on hyvin käyttökelpoinen paljon tekstiä sisältävissä isoissa taulukoissa (esimerkkitaulukko[S]).

Jos haluat leveän taulukkosolun muiden solujen yläpuolelle, määrittele ennen pitkää riviä piilorivi:

.piiloA {width:200px; font-size:0px; line-height:0}
.piiloB {width:250px; font-size:0px; line-height:0}
.piiloC {width:100px; font-size:0px; line-height:0}

...
<table>
<tr>
<td class="piiloA"> </td>
<td class="piiloB"> </td>
<td class="piiloC"> </td>
</tr>
<tr>
<td colspan="3">
Pitkä rivi</td>
</tr>

...
</table>

Nopealla taulukonlaskentamenetelmällä on eräitä haittapuolia. Jos taulukon lopussa on enemmän taulukkosarakkeita ja siten myös soluja kuin taulukon alussa, näitä ylimääräisiä soluja ei huomioida. Jos taulukossa on leveitä kuvia, ne eivät välttämättä mahdu taulukkosoluun.

Nopean taulukonkasaamismenetelmän käyttäminen on perustavalaatuinen suunnittelukysymys. Jokaisen projektin alussa pitää miettiä, käytetäänkö sitä vai ei. Jotta sivut latautuisivat nopeasti, on syytä välttää sisäkkäisiä taulukoita.

Nopean taulukkoluontimallin toimivuus kannattaa kuitenkin testata mahdollisimman monessa selaimessa. Periaatteessa mitä tarkemmat ohjeet selain saa, sitä paremmin systeemi toimii. Niiden sijasta tulisi käyttää DIV-elementtejä. Tämän mallin vaihtoehtona on rakentaa sivujen perusrakenne vain DIV-elementtien varaan. Käsittelen tätä mallia seuraavalla sivulla.

Selainkohtaisia huomautuksia:

  1. Table-layout:fixed toimii hyvin MS IE 5.5+, Opera 4.x+ ja Mozilla Gecko -selaimissa. Yleistoimivuus on paras Opera 4.x+ -selaimissa, sillä ne antavat mahdollisuuden rullata vain osittain luettua taulukkoa. MS IE 5.5+:ssa selaimen täytyy ensin kokonaan lukea taulukko ennen kuin sitä voi rullata.

  2. Operassa 4.x:ssä on pieni bugi. Vaikka periaatteessa on tarpeetonta määritellä ensimmäisten solujen (elementit TH or TD) leveys, Opera tarvitsee niille toisinaan width ominaisuuden, vaikka taulukon kokonaisleveys on annettu.

  3. Opera 4.x-6.x -selaimet leikkaavat ylimääräisen solun pois, jos jatkoriveillä on enemmän sarakkeita kuin mitä on ensimmäisellä taulukkorivillä. MS IE tekee niin pitkissä taulukoissa. Opera 7.x ja Mozilla Gecko -selaimet näyttävät aina kaikki taulukkosolut.

  1. MS IE leikkaa liian leveät kuvat. Opera 4.x+ ja Mozilla Gecko -selaimet näyttää kuvan loppuosat viereisissä soluissa. Tosin määrittelemällä overflow:hidden, Opera ja Mozilla käyttäytyvät samoin kuin MS IE.

  2. MS IE 5.5:ssä, Mozilla Gecko ja Opera 7.x+ -selaimissa tilannetta voi auttaa laittamalla jonkun kuvan ympärille elementti DIV ja sille esim. overflow:auto; width:150px. Jos kuvan leveys on tätä suurempi, kuvaa voidaan rullata. Haittana on se, että esillä on aina vähintään yksi vierityspalkki.

  3. Mozilla Gecko -selaimet vaativat matalille taulukkoriveille line-height ominaisuuden (Operalle riittäisi pieni fonttikoko).

[Alku]

Sisällön dimensioihin liittyviä ongelmia

CSS2 on jättänyt avoimeksi, miten ominaisuus height tulisi tulkita taulukoissa, joten selaimet voivat tulkita sen haluamallaan tavalla. Mielestäni se merkitsee taulukoissakin sisällön korkeutta (se on myös Opera Softwaren tulkinta).

Periaatteessa omainaisuus width tarkoittaa myös taulukoissa sisällön leveyttä (content width; width-ominaisuus on leveys, joka tulee varata konkreettiselle sisällölle, esim. tietyn levyiselle kuvalle). Koska elementillä TABLE ei ole välitöntä asiasisältöä (varsinaisen asiasisällön välissä on vähintään elementti TR), normaalisti vain mahdolliset reunukset kasvattavat taulukon muodostaman lohkolaatikon kokonaisleveyttä.

Ongelmia tuottaa kuitenkin se tosiasia, että elementin TABLE HTML-attribuutin width arvon laskemisessa ei noudateta samaa laskentakaavaa kuin CSS-ominaisuuden width laskennassa. HTML 4.01 spesifikaatiossa sanotaan attribuutista width seuraavaa:

This attribute specifies the desired width of the entire table...

Tuon pohjalta siihen lasketaan reunukset eikä kyse ole sisältöleveydestä kuten CSS:ssä.

Suorittaessaan taulukoiden dimensioiden laskentaa selainten on otettava huomioon seuraavat seikat:

  1. Koska sekä HTML:n border-attribuutti että CSS:n border-omaisuudet vaikuttavat taulukon sisältö- ja kokonaisleveyteen, selaimen joka ymmärtää CSS:ää, tulee huomioda molemmat reunusten määrittelytavat sekä kaikki mahdolliset täytteet, jotta width attribuutti tai ominaisuus voitaisiin laskea oikein. Tämän asian ei pitäisi olla ongelma moderneille selaimille, sillä niiden tulisi pystyä käsittelemään border-attribuuttia ikään kuin joukkona esimääriteltyjä CSS-ominaisuuksia.
  2. Selaimen tulee huomioida HTML:n ja CSS:n erilaiset leveyden laskentakaavat ja pyrkiä toteuttamaan laskentakaavat sen mukaan kuin spesifikaatiot edellyttävät.
  3. Koska CSS pitää pystyä määrittelemään muualta käsin, CSS-omainaisuuksille ja CSS:n mukaiselle laskentakaavoille pitää olla etusija. Jos sekä width-attribuutti että width-ominaisuus on määritelty, seurataan width-ominaisuuden antamia arvoja ja laskentatapaa.
Selainkohtaisia huomautuksia:
  1. Opera 5.1x - ja MS IE Windows -selaimet tulkitsevat reunuksellisten taulukkoelementtien leveyden lähes aina eri lailla - jopa HTML-attribuutteja käytettäessä:

    • border="2" width="600" tai border="2" style="width:600px" tai style="border:2px solid black; width:600px;" = 604 pikseliä Operalla.
    • border="2" width="600" tai border="2" style="width:600px" tai style="border:2px solid black; width:600px;" = 600 pikseliä MS IE Windowsilla.

    Esimerkkitapauksessa Opera toimii väärin HTML:n ja MS IE CSS:n suhteen.

  2. Mozilla Gecko - sekä MS IE 6.0 Windows -selaimet seuraavat ns. standard-compliant -moodissa[S] elementin TABLE suhteen MS IE 5.x Windowsia, kun ne yleensä toimivat width-ominaisuuden suhteen samoin kuin Opera.

  3. Myös MS IE 5.0 Mac käytös on DTD-riippuvainen[S]. Toimintamuodolla on suurempi merkitys taulukkoelementtien leveysarvojen tulkintaan kuin MS IE 6.0 Windowsissa.

  1. Tein Mozilla Gecko -selainten toteutuseroja käsittelevän sivuparin, jossa on käytetty kahta eri DTD:tä (HTML 4.0 Transitional[S] ja HTML 4.01 Strict[S]). Mozilla Gecko -selainten käyttäytymisen DTD-riippuvuus vaikuttaa siinä hieman yhden taulukon leveyteen, mutta enemmän siihen, miten taustaväri näytetään. Sivupari antaa seuraavat tulokset (linkit viittaavat kuvakaappauksiin):

    • Ei DTD-ilmoitusta, HTML 4.0 Transitional[S]: cellspacing luo Mozilla 0.9:ssä BODY-elementin värisiä alueita. Vrt. Opera 5.12[S]. Huomautus. TABLE C leveys on HTML 4.01 spesifikaation pohjalta eri, mitä Opera näyttää. TABLE G on täysin oikein, sillä jos taulukko ei mahdu DIV-elementin laatikkoon, sen tulee mennä sen ylitse eikä DIV-elementin tule kasvaa taulukon leveyteen (vain elementin TABLE kohdalla sisällön leveyden tulee kasvattaa elementille annettua kokonaisleveyttä).
    • HTML 4.01 Transitional, HTML 4.0/ 4.01 Strict[S] + uudemmat spesifikaatiot: background-color tulee Mozilla 0.9:ssä koko taulukkoon aivan kuten Operalla ja MS IE:llä. Taulukoiden leveys toimii saman kaltaisesti kuin IE 6.0:sta otetussa editoidussa kuvakaappauksessa[S].
    • Netscape 4.x ei tue width-ominaisuutta taulukolle. Mikäli cellspacing attribuutin arvo on suurempi kuin 0 (oletusarvo on 2), sille saa siistin lopputuloksen vain määrittelemällä taulukon ulkopuolelle DIV or CENTER elementti, jonka reunuksella on sama väri kuin taulukon emoelementin taustalla sekä itse lohkolla on sama taustaväri kuin taulukolla. Tästä tilannetta demonstroi mallidokumentissa TABLE F.

Tein HTML 4.01 Strict dokumenttityyppiä käyttävän testisarjan[S]. Sain siihen liittyen s-postia selainten Mac-versioiden toteutuksesta. Tein taulukon, jossa [OK!] tarkoittaa oikeata toteutusta ja [EI OK!] tarkoittaa virheellistä toteutusta silloin, kun toteutuksia arvioidaan HTML 4.01 ja CSS2 spesifikaatioiden pohjalta:

Testit Windows Mac
MicrosoftNetscapeOpera MicrosoftNetscapeOpera
5.56.06.25.12, 6.x7.0 Beta15.06.05.0 Beta 4
Test 0a[S][OK!] [OK!] [OK!] [OK!] [EI OK!] [EI OK!] [OK!] [EI OK!]
Test 0b[S][OK!] [OK!] [OK!] [EI OK!] [EI OK!] [EI OK!] [OK!] [EI OK!]
Test 0c[S] [OK!] [OK!] [OK!] [OK!] [EI OK!] [EI OK!] [OK!] [EI OK!]
Test 0d[S] [OK!] [OK!] [OK!] [EI OK!] [EI OK!] [EI OK!] [OK!] [EI OK!]
Test 1[S] [EI OK!] [EI OK!] [EI OK!] [EI OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 1
Fixed
[S]
[EI OK!] [OK!] [EI OK!] [OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 2[S] [EI OK!] [EI OK!] [EI OK!] [EI OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 3[S] [EI OK!] [EI OK!] [EI OK!] [OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 4[S] [EI OK!] [EI OK!] [EI OK!] [OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 4
Fixed
[S]
[OK!] [OK!] [OK!] [OK!] [OK!] [OK!] [OK!] [OK!]
Oikein5/106/105/106/106/106/105/ 106/10
 

Selainkohtaisia huomautuksia:

  1. MS IE 6.0 Windows-version toteutus tulisi olla DTD-riippuvainen ja annetulla DTD:llä sen tulisi esittää Test 1-4 samalla lailla kuin Mac-versio.

  2. MS IE:n Mac-versiossa annetut [OK!] / [EI OK!] kääntyvät viimeistä testiä lukuun ottamatta päinvastaisiksi, mikäli DTD poistetaan. Jos Mac-versio toteuttaisi Test 0-0d DTD-riippumattomasti, se toimisi sangen johdonmukaisesti.

  3. Käymieni keskustelujen pohjalta eräs Mozilla org. työntekijä sanoi, että Mozilla Gecko -selainten tulisi toimia annetulla DTD:llä sillä tavoin kuin olen esittänyt. Tulevissa Mozilla Gecko -selaimissa saattaa olla erilainen käytös. Periaatteessa uuden Mozillan pitäisi käyttäytyä määrittämälläni DTD:llä Test 1-4 suhteen samalla tavalla kuin MS IE 5.0 Mac.

  1. Opera 5.0:n Mac-versio toimii johdonmukaisemmin kuin 5.x-6.x Windows-versiot. Se toimii samalla lailla kuin MS IE 5.0:n Mac-versio kun käytetään testissä mainittua DTD:tä. Jos HTML width-attribuutti toimisi HTML 4.01 spesifikaation mukaisesti, selaimen käytöksessä ei olisi moitittavaa. Operan käytös ei ole DTD-riippuvainen. Mielestäni Operan Mac-versio ja Opera 7.x Windows ovat testin johdonmukaisimmin toimivia selaimia.

  2. Operan 5.x-6.x Windows-versiot toimivat kaikista epäjohdonmukaisimmin, sillä selainten käytös on riippuvainen annetusta width-attribuutin/ ominaisuuden arvosta. Opera käyttää outoa "width-kytkintä", joka on riippuvainen siitä, mikä on todellisen ja laskennallisen sisällön välinen suhde, kun noudatetaan width-attribuutin mukaista laskentakaavaa. HTML:n laskentakaava on päällä silloin, kun todellinen sisältö on suurempi kuin laskennallinen sisältö. CSS:n laskentakaava kytkeytyy tilanteessa, jossa todellinen sisältö on yhtä suuri tai pienempi kuin laskennallinen sisältö. Lopputulos on joko HTML 4.01 tai CSS2 spesifikaation mukaisesti.

  3. CSS3 antaa järkevämmän tavan muuttaa leveyden laskentakaavaa kuin "DTD-kytkimen", jota käsittelen spesifikaation ongelmissa[S].

  4. Kun määritellään leveys taulukkosoluille, saadaan helpommin sama lopputulos eri selaimilla (Test 4 Fixed[S]).

Periaatteessa dokumenttien perusrakenteita olisi helpompi luoda ilman taulukoita. Käsittelen vaihtoehtoisia sivurakennustapoja seuraavalla sivulla. Taulukoita tarvitaan kuitenkin aina sellaisen datan kanssa, jonka esittäminen vaatii taulukoita. Siksi mahdolliset ongelmatilanteet on syytä tuntea.

Sivujen tekijä voi määritellä CSS:n siten, että syntyy konfliktitilanteita, jotka selaimet selvittävät eri lailla. Sivujen tekijä on voinut vahingossa aiheuttaa konfliktitilanteen koko taulukkoleveyden ja yksittäisten solujen muodostaman kokonaisleveyden välille.

Hän on voinut myös määritellä ominaisuuksia, jotka eivät sovellu tietyille taulukkoelementeille, esim. table {padding:...} ja tr {margin:...; padding:...}.

Selaimissa on myös erinäisiä pikku virheitä, jotka aiheuttavat ongelmia. Muutamia tällaisia ongelmamahdollisuuksia on vielä syytä vielä luetella.

Selainkohtaisia huomautuksia:

  1. Opera 5.x+ ja MS IE ratkaisevat joissakin tilanteissa taulukon kokonaisleveyden ja yksittäisten solujen leveysristiriidan eri tavalla. Opera laskee taulukon kokonaisleveyden aina soluille määriteltyjen width ominaisuuksien perusteella, mutta MS IE normaalitapauksissa (table-layout:auto) elementille TABLE annetun width ominaisuuden mukaan. Esim. seuraava määrittely saattaa luoda vakavan ongelman:

    td {width:200px; border:2px solid black}
    table {width:400px; border:1px solid black}

    Eräissä internetiin tehdyissä taulukoissa oli kolme taulukkopalstaa. Opera esitti taulukon vähän yli 600 pikseliä leveänä ja MS IE noin 400 pikselin levyisenä. Mielestäni Opera toimii oikein, sillä taulukon tulee kasvaa soluille määriteltyjen leveyksien mukaisesti. Ominaisuudet width ja height luovat sisältölaatikon (content box) eli eräänlaisen kuvitteellisen lohkon tai pikemminkin varauslaatikon. Vaikka taulukolla olisi erityisen suuri prioriteetti (esim table#special {width:400px}) solujen kokonaisleveyttä ei tulisi pienentää. CSS2 spesifikaation antaa toki selaimille oikeuden näyttää taulukon sisältö parhaaksi katsomallaan tavalla kun normaali taululukonmuodostusalgoritmi on käytössä, mutta mielestäni MS IE ottaa "ylimääräisiä vapauksia". MS IE toimii kuitenkin kiinteällä taulukkoalgoritmilla (table-layout:fixed) yleensä samoin kuin Opera.

  1. Jos sivujen tekijä asettaa kiinteätä taulukkosommittelua käyttävän TABLE elementin width ominaisuuden arvon suuremmaksi kuin mitä saadaan laskemalla yhteen ensimmäisen taulukkorivin kokonaisleveyteen vaikuttavien ominaisuuksien yhteissumma, MS IE 6.0 Windows laskee parhaiten sekä koko taulukon että yksittäisten taulukkosolujen leveydet. Opera 6.04 ja Mozilla 1.1a virheistä saa käsityksen testisivulla[S], jota tulee verrata MS IE 6.0 Windows -selaimen käytökseen. Koska taulukoiden luomisessa on selainten välillä tulkintaeroja, leveysarvojen määrittelyssä kannattaa olla hyvin huolellinen ja välttää konflikteja niin paljon kuin mahdollista.

  2. Selaimet hyväksyvät vaihtelevassa määrin table {padding:...} jne. oudot määrittelyt, mutta osa tulkinnoista on todella outoja ja ne aiheuttavat ongelmia taulukoiden reunusmalleille. Kun määritellään ryhmiä, olisi oltava huolellinen ja varottava määrittelemästä edellä mainittuja sääntöjä (tämä koskee myös thead, tfoot, tbody {margin:...; padding:...}).

  1. Taulukkosolujen leveyksien laskennassa on muistettava yleiset dimensioiden määrittelyn ongelmat joita olen käsitelly sivulla 8[S]). Jotta dimensio-ongelmat vähenisivät, kannattaa noudattaa neuvoa[S], jonka olen antanut käsitellessäni yleisesti lohkojen dimensioihin liittyviä ongelmia.

  2. Havaitsin, että se ei aina toimi Opera-selaimissa (koskee ainakin versioon 6.01 asti) taulukkosoluissa. Olen siksi käyttänyt joissakin tilanteissa täytekuvia ja niille linkitettyjä leveysarvoja (Netscape 4.x -selaimet käyttäytyvät oudosti eräistä kuville annetuista CSS-ominaisuuksista). Asettamalla leveyden mille tahansa solujen sisällä olevalle elementille ajaisi saman asian.

[Alku]

11. Mikä on CSS2:n Visuaalinen muotoilumalli

Aiheet

Tämä sivu on jaettu jaksoihin, jotka sisältävät seuraavia aiheita:

Sisältö yhtenä isona sivuna

Yleistä

Tämä sivu käsittelee oikeastaan CSS2 visuaalisen muotoilumallin (Visual formatting model, CSS2 9-11) tehokkaimpia keinoja. CSS tarjoaa eräitä mahdollisuuksia vaikuttaa dokumenttien struktuuriin.

Visible vai hidden?

W3C: CSS2: 9 Visual formatting model[Pw], 10 Visual formatting model details[Pw].

Tosin XML dokumenteissa voi käyttää vaihtoehtoisesti tai CSS:n kanssa XSL kieltä. CSS:n osaaminen on silti perustavalaatuinen kysymys XML dokumenttien luomisessa. CSS2 sisältää itsessään kuitenkin eräitä puuttuvia piirteitä (viittaan niihin sivulla Erikoistyylisivut[S]).

[Alku]

Div + float

Ominaisuus float siirtää elementtejä joko vasemmalle tai oikealle - elementit ikään kuin "kelluvat" näihin suuntiin. Tällä tavoin määriteltyjen elementtien pitäisi olla samalla vaakatasolla kuin elementtien, joille ei ole määritelty ominaisuutta float. Kelluvien elementtien korkeuden ei saisi vaikuttaa emoelementin korkeuteen. Kaikkien kelluvien elementtien (mukaan luettuna normaalisti rivinsisäiselementit) tulee käyttäytyä lohkoina. Ominaisuuden float kanssa käytetään usein ominaisuutta clear. Alla mainitulla sivulla on joitakin esimerkkejä, jotka käyttävät näitä ominaisuuksia:

W3C: CSS1 Test Suite: 5.5.25 float[Pw].

Alla on esimerkki, jossa on käytetyt näitä ominaisuuksia: ([M][S][Pw]):

img.icon
{float: left; /* kuva kelluu vasemmalle - toinen arvo on right */
clear: left;} /* kuvan vasen puoli on "siivottu" muista elementeistä (vaikka tilaa olisi useille kelluville elementeille kaikki kelluvat elementit ovat nyt omilla riveillään) - muita arvoja ovato left ja all (sen paremmin oikealla kuin vasemmalla puolellakaan ei ole mitään) */

Kelluvana elementtinä on järkevä käyttää elementtiä DIV, jolloin voi luoda kehys- ja taulukkovapaan perusrakenteen. DIV-elementteihin voi tehdä kelluvat linkkilistat. Tekstin voisi kirjoittaa kelluvan elementin viereen eikä olisi mitään tarvetta käyttää kehysvapailla sivuilla dokumentin perusmuotoiluun taulukoita (tiukasti ottaen taulukoiden käyttö dokumenttien perusrakenteen luomiseen on taulukoiden väärinkäyttöä).

Taulukot vai kelluvat elementit?

Itse asiassa on mahdollista luoda dynaaminen perusrakeene jakamalla sisältö kelluviin jaksoihin. 640x480 ja 800x600 näytöillä sivuilla näkyisi vain yksi palsta, mutta 1024x768 tai suuremmilla näytöillä voisi olla kaksi tai useampi palsta (esimerkkisivu[S] - käytä niin leveää ikkunaa kuin pystyt).

Ideaa voi soveltaa navigaatiokehyksiin, joilla ei ole tarkkaa leveysarvoa. Jos ominaisuutta float käytetään elementin IFRAME kanssa, joka sisältää päänavigointilinkit.

CSS2 antaa mahdollisuuden asettaa lohkoelementtien korkeudelle ja leveydelle maksimi- ja miniarvot. Olen joskus käyttänyt kehyksiä, koska ne toteuttavat sama kuin max-width CSS-ominaisuuden. Kehyksillä on muutamia haittatekijöitä, joiden vuoksi en enää niitä käytä kuin poikkeustapauksissa.

Annan sinulle esimerkin, joka on tarkoitettu käytettäväksi sivulla, jonka BODY-elementin luokka on CssSite. Perus teksti on DIV-elementin sisällä:

body.CssSite div {max-width:500px; text-align:justify; font-family: Verdana, Arial, sans-serif; font-size: x-small; margin-left:auto; margin-right:auto; border:1px solid #660033; padding:10px;}

Sen jälkeen kuin perus layout on määritelty, sivujen tekijä määrittää kaksi sisäkkäistä lohkoa kuten alla olevassa esimerkissä ([M][S][Pw]):

body.CssSite div {max-width:500px; text-align:justify; font-family: Verdana, Arial, sans-serif; font-size: x-small; margin-left:auto; margin-right:auto; border:1px solid #660033;padding:10px;}
body.CssSite div div {border:1px solid #660033; margin:0 10px 0 0; float:left; width:70px; height:200px; clear:left;} /* tässä lohkossa, joka on edellisen lohkon sisällä on varattu paikka linkeille; seuraavat lohkot ovat yksinkertaisia kappaleiden kaltaisia lohkoja, sillä päälinkkejä ei ole mielekästä esittää kuin kerran */

Tällaiset lohkot olisivat monessa suhteessa parempia kuin taulukot, joilla on kiinteät leveysarvot. Kapeissakaan ikkunoissa ei tulisi vaakavierityksiä, mutta tekstin leveys olisi sivujen tekijän hallittavissa.

Selainkohtaisia huomautuksia:

  1. Ominaisuudet float ja clear on toteutettu huonosti Netscape 4.x -selaimissa. Jos useampi elementti on samalla riville selain pistää kaikki elementit samaan "pinoo". Käy lävitse W3C:n CSS1 test suite ominaisuuden float kohdalta.

    W3C: CSS1 Test Suite: 5.5.25 float[Pw].
  2. MS IE 4.x for Windows ei pysty panemaan suurta määrää kelluvia elementtejä usealle riville. Saattaa olla mielekkäämpää käyttä taulukoita, jos tarkoituksena ei ole luoda vapaasti skaalautuvaa tekstiä. Jos haluat joustavat leveysarvot käytä prosenttiarvoja.

  3. Jos perusrakenne perustuu kelluville elementeille jotkut selaimet laittavat satunnaisesti vaakavierityspalkin. Systeemi pelaa sangen hyvin ainakin Opera 4.x+, MS IE 5.5+ ja Mozilla Gecko Windows-selaimissa (todennäköisesti myös monissa Mac ja Linux -selaimissa).

  4. Jos normaalisti rivinsisäiselementteinä käyttäytyvät elementit määritellään kelluviksi ne tarvitsevat ainakin ominaisuuden width. Muutoin ne näyttävät totaalisen erilaisilta eri selaimissa.

  5. Kelluvien elementtien kokonaiskorkeus saattaa joissakin MS IE -selaimissa kasvattaa emoelementin korkeutta. Asia on korjattu ainakin MS IE 6.0 Windows -selaimessa.

  1. Joissakin selaimissa kelluvat elementit siirtyvät hieman alaspäin eivätkä mene suoraan joko vasemmalle tai oikealle. Kelluvat elementit eivät siten asemoidu kaikissa selaimissa aivan samalla lailla.

  2. Ominaisuus clear ei toimi oikein ainakaan MS IE 5.x Windows[S] ja Netscape 6.1 -selaimissa. MS IE 4.x Windows -selaimessa ominaisuus clear aiheuttaa ylimääräisiä rivikatkoj (myös ominaisuus float voi niitä satunnaisesti aiheuttaa).

  3. Netscape 4.x ja vanhemmat Netscape-selaimet eivät tue IFRAME elementtejä. Selaimille, jotka eivät tue IFRAME elementtiä tulisi olla vaihtoehtoiset linkit.

  4. Max-width toimii testieni mukaan vain Opera 4.x+, Mozilla Gecko, Konqueror (Linux) -selaimissa (erään kuvakaappauksen perusteella myös Safari-selaimessa (Mac) ).

  5. Koska MS IE ei tue display ominaisuutta (käsittelen sitä edempänä) XML-tasoiseti ainoa keino joustavien sivurakenteiden luomiseksi XML-dokumenteille on ominaisuuden float käyttö. On syytä muistuttaa, että DIV + float näyttää tyystin toisenlaisilta selaimissa, jotka eivät tue CSS:ää. Nopeasti lataantuvat taulukot[S] ovat tässä mielessä taaksepäin yhteensopivia, mutta ne toimivat MS IE:ssä vain (X)HTML-dokumenteille. Yleisesti ottaen toinen keino kehysten korvaamiseen on ominaisuuden position käyttö, mitä käsittelen seuraavaksi.

[Alku]

CSS2:n asemointimalli (position model)

Aiheet

Yleistä elementtien asemoinnista

CSS2:ssa on erityinen asemointimalli (position model). Tässä mallissa position:static merkitsee tavanomaista asemointia jos mitään varsinaiseen asemointiin liittyviä ominaisuuksia ei ole annettu. Aino järkevä käyttö tälle arvolle on poikkeustilanteissa ottaa pois käytöstä muut asemointiarvot. Muut asemointityypit (suhteellinen, absoluuttinen ja kiinteä - relative, absolute ja fixed) antavat mahdollisuuden kerrostettujen elementtien käytölle (layered elements). Asemoidut elementit luovat uuden säilytinlohkon (containing block) sisään jääville elementeille.

Jotta kerrostettujen elementtien pinotasoa (stack level) voitaisiin kontrolloida käytetään z-index ominaisuutta. Mitä suurempi numeerinen arvo, sitää korkeammalla tasolla elementti on suhteessa toisiin elementteihin, joilla on myös z-index ominaisuus tai ominaisuutta ei ole määritelty lainkaan (elementit, joilla on z-index:3 asemoidaan korkeammalle kuin elementit, joilla on z-index:1 jne.; jos asemoitu elementti on toisen asemoidun elementille sisällä arvot koskevat vain suhteessa toisiin saman elementin sisällä oleviin elementteihin; suhteessa muihin elementteihin niillä on sama arvo kuin emoelementillä).

W3C: CSS2: 9 Visual formatting model[Pw], 10 Visual formatting model details[Pw]

Kun elementeillä on position:relative asemoidut elementit sijoitetaan suhteessa normaaliin eli staattiseen asemointiin. Yleisimmin käytetty asemointitapa on position:absolute. Tällä tavalla asemoitujen elementtien sijainti lasketaan yleensä alkusäilytinlohkon (initial containing block) peruteella eli juurielementistä käsin. Suhteellisesti ja absoluuttisesti asemoitujen elementtien suhteen esi-isäelementtien asemoinneilla on vaikutusta koska laskeminen aloitetaan lähimmästä asemoidusta esi-isäelementistä käsin. Siksi absoluuttisesti asemoidut elementit eivät ole aina asemoitu juurielementin mukaant. Absoluuttisesti asemoitujen elementtien paikka tulisi laskea säilytinelementin täytenurkista (padding edges), jolloin säilytinelementin margin ja border ominaisuuksilla on vaikutus, mutta padding ominaisuudella ei.

Elementit, jotka asemoidaan position:fixed sijoitetaan suhteessa näyttöporttiin (viewport) eli selainikkunaan, jossa sivu sijaitsee. Koska kiinteästiasemoitujen elementtien laskemiskohdilla on aina samat sijainnin toisin kuin muissa asemointityypeissä muiden elementtien asemoinneilla ei ole vaikutusta kiinteästi asemoitujen elementtien sijainteihin. Kiinteästi asemoidut elementit, jotka ovat kiinteästi asemoitujen elementtien jälkeläiselementtejä aloittavat aina sisään sijoitettavien elementtien asemointipaikkojen laskemisen aivan alusta.

Absoluuttisesti ja kiinteästi asemoidut elementit ovat kokonaan pois elementtien normaalista asettelusta. Siksi tällä tavoin asemoitujen elementtien leveys ja korkeus ei millään tavoin vaikuta muiden elementtien sijainteihin tai mitoituksiin. Absoluuttisesti tai kiinteästi asemoitujen elementtien mitoituksia ei voi määritellä prosentuaalisesti suhteessa staattisesti asemoituihin emoelementteihin.

<body>
<div style="position:static"><div style="position:absolute; height:500px; width:500px; top:0; left:0"</div></div>

<!-- staattisesti asemoidun elementin korkeus on nolla --> <div style="position:static; height:500px; width:500px;"><div style="position:absolute; height:100%; width:100%; top:0; left:0"</div></div>
<!-- absoluuttisesti asemoidun elementin korkeus ja leveys tulisi laskea HTML elementin perusteella --> -->

Absoluuttisesti asemoidut elementit

Alla on esimerkki tyypillisestä absoluuttisesti asemoidun elementin käyttötavasta ([M][S][Pw]):

...
html, body {margin:0; padding:0; border-width:0}
...

<DIV style="position:absolute; top:10px; left:10px; z-index:5; width:400px;">

... </DIV>
<IMG src="./Taulut/koneet.gif" style="position:absolute; left:20px; top:50px; z-index:3">
<IMG src="../Kuvat/Css/omakuvaIso.gif" style="position:absolute; left:100px; top:20px;z-index:4">
<DIV style="position:absolute; top:290px; left:10px; z-index:5; width:400px;">
<DIV style="border:1px solid black; padding: 5px">...

...</DIV></DIV>

Suositukseni:

  1. Asemoinnit määritellään aina Web-sivun vasemmasta yläkulmasta left ja right ominaisuuksia käyttäen kuten edellä ollessa esimerkissä on toimittu.

  2. Asemoiduille elementeille on aina määritelty ominaisuus z-index ja tarvittaessa myös muille elementeille.

  3. Elementille BODY ja säilytinelementeille ominaisuudet margin-top, margin-left, padding-top, padding-left, border-left-width ja border-top-width on määritelty nollaksi. Käyttämällä padding-right jne. tulee dimensio-ongelmia[S]. Paras lopputulos saadaan, jos reunukset jne. määritellään ei-asemoiduille jälkeläiselementeille.

  4. Asemoduilla elementeillä on aina pikselimääräiset height ja width ominaisuudet. Samalla varmistetaan, että sisältö mahtuu annettujen arvojen sisään ilman overflow ominaisuuden antamista.

  5. Position:absolute toimii luotettavimmin oikein, jos asemoidut elementit ovat aina BODY-elementin lapsielementtejä. Jos elementtejä sijoitetaan sisäkkäin, sisemmän elementin olisi hyvä pysyä ulomman sisäpuolella.

  6. Absoluuttisesti asemoituja elementtejä ei pitäisi käyttää sivuilla, jotka ovat siten vaakatasossa skaalautuvia, että asemoidut elementit voivat peittää asiasisällön.

  7. Vältä asettamasta asemoituja elementtejä lomakekontrollielementtien ja upotettujen visuaalisten objektien yläpuolelle.

  8. Älä asemoi taulukkosoluja.

Absoluuttisesti asemoituja elementtejä koskevia selainkohtaisia huomautuksia:

  1. Opera Software mukaan sisäkkäiset ratkaisut (esim. <div style="position:absolute; top:50px;left:50px"> ... <div style="position:absolute; top:20px;left:20px"> ... </div></div>) toimivat MS IE 5.0:ssa virheellisesti.

    En voinut verifioida tätä Windows-selaimia koskevaa väitettä. Sen sijaan huomasin, että MS IE 5.x Mac ottaa virheellisesti huomioon ei-asemoitujen esi-isäelementtien marginaalit. Havaitsein, että Opera 4.x-5.x laskee joskus sisemmät asemoidut elementit virheellisesti ottamatta huomioon ulompien elementtien asemointeja. Opera 6.x:n kohdalla havaitsin, että position:absolute + sisäkkäin relativiisesti asemoiduista elementeistä asemointi ei toiminut sisimmille elementeille.

  2. Ominaisuus bottom toimii virheellisesti kaikissa selaimissa. Jos mitään säilytinelementtiä ei ole määritelty selaimet määrittelevät asemoinnin vierittämättömän selainikkunan alalaidan perusteella. right ei toimi kaikissa position:absolute tukevissa selaimissa.

  3. MS IE 4.x Windows sisäkkäisen elementin asemointi ei toimi, jos elementti on sijoitettu kokonaan asemoidun säilytinelementin ulkopuolelle.

  1. Selaimet määrittelevät leveyden ja korkeuden eri lailla mikäli niitä ei ole määritelty. Joillakin Opera 7.x -selaimilla leveys ja korkeus ovat nolla, jos niitä ei ole eksplisiittsesti määritelty. Valikot voivat mennä kasaan.

  2. MS IE 5.x Mac ja Mozilla Gecko -selaimet eivät osaa asemoida taulukkosoluja.

  3. Prosenttiarvoiset width ja height ominaisuudet eivät toimi oikein MS IE - ja Opera-selaimissa. MS IE laskee asemoidut elementit emoelementin perusteella vaikka emoelementti olisi staattisesti asemoitu. Jos emoelementillä ei ole tarkkaa korkeusarvo, arvo on yhden tekstirivin korkuinen. Opera ottaa height ominaisuuden staattisesti määritellyltä emoelementiltä (jos emoelementillä ei ole height ominaisuutta korkeus on näyttöportin korkeus vähennettynä vaakavierityspalkille varatun tilan verran). Opera 7.x laskee width oikein HTML elementistä käsin näyttöportin perusteellla tilanteissas, jotka muistuttavat alla olevaa esimerkkiä:

    html {width:400px; width:400px}...
    <body>
    <div style="position:static; height:500px; width:500px;"><div style="position:absolute; height:100%; width:100%; top:0; left:0; background-color:yellow"</div></div>
  1. Vain Mozilla Gecko -selaimet laskevat asemoinnit HTML-elementin täyttöreunojen perusteella. MS IE 5.x+ ja Opera 7.0 Beta 1 Windows browsers jättävät huomioimatta marginaalin. MS IE 5.x Mac -selain ottaa toisinaan huomioon HTML-elementille annetut täytteet. Vanhemmat Opera-selaimet hylkäävät sekä marginaalit että reunukset kuten myös MS IE 4.x Windows (jälimmäinen selain hylkää kaikki em. ominaisuudet). Tein asiasta testisarjan[S]. Tavanomaisissa tilanteissa Opera 4.x-6.x laskee asemoidut elementit reunusten kulmista (border edges) käsin.

  2. Erään s-postin mukaan MS IE 5.0 Mac aloittaa laskemisen toisinaan BODY elementistä käsin. Tapauksessa BODY-elementille oli annettu padding-left:100px absoluuttisesti asemoidut elementit siirtyivät 100px oikealle (testisarja[S], jossa valikon pitäisi olla aina sivun vasemmassa yläkulmassa).

  1. Opera tarvitsee asemoiduille elementeille sekä vaaka- että pystyarvot (MS IE käyttää asemoinnin oletuksena vasenta yläkulmaa).

  2. MS IE 5.x+ Windows (paitsi MS IE 6.0 standard-compliant -moodissa[S]) tarvitsee asemoitujen elementtien siäsällä oleville TD elementeille korkeusarvot. Mozilla Gecko -selaimet tarvitsevat toisinaan ominaisuutta height asemoiduille DIV elementeille. MS IE 4.x Windows näyttää tarvitsevan asemoiduille elementeille aina sekä height että width ominaisuudet.

  3. Asemointi ei aina toimi Netscape 4.x -selaimissa. Tällaisissa tilanteissa täytyy käyttää vastaavia HTML-attribuutteja LAYER tai ILAYER elementeille (ks. esimerkki sivulta, joka käsittelee dynaamisia valikoita[S]). Jos asemoidut elementit ovat täysleveän taulukon taulukkosolujen sisällä kaikki ominaisuudet eivät toimi oikein.

  1. Melkein kaikissa uusissa selaimissa on ongelmana se, että z-index ei toimi kunnolla upotettujen lisäosia vaativien objektien kanssa ja/tai lomakekontrollielementtien kanssa. Operan kohdalla (6.x-sarjaan asti) kyse on mollemista tapauksista ja Konqueror 3.1 kohdalla lomakekontrollielementeistä. MS IE:llä on ongelmaSELECT-elementin kanssa. Uusimissa Mozilla Gecko -selaimissa tätä ongelmaa ei ole. Tosin, jos kerroksilla, jotka on laitettu upotetun elementin päälle on background-color:transparent upotetun objetin emoelementin taustaväri kuultaa läpi ja kerrokset leikkaavat palan upotetusta objektista.

  2. Kaikki CSS2:ta tukevat selaimet eivät tue kaikkia overflow ominaisuuden arvoja. Käsittelen ongelmaa edempänä kun mainitsen position:fixed liittyviä ongelmia.


[Alku]

Kiinteästi asemoidut elementit

Navigointielementtien suhteen paras vaihtoehto voisi olla position:fixed, jolla voi emuloida kehysten käyttöä. Navigoinnin suhteen etuna on se, että pysyy paikoillaan, vaikka asiakirjan muuta sisältöä rullataan. Mikäli kaikki linkit eivät mahdu samaan lohkoon niille voi periaatteessa määritellä overflow:auto, jolloin loppuja linkkejä voi rullata.

Kun systeemin laittaa taulukkosolun (TD) sisälle, voidaan luoda hyvin taaksepäin yhteensopivia tiedostoja (esimerkkisivu[S]). Systeemille on aina syytä määrittää oma lohko elementtiä DIV käyttäen, esim. ([M][S][Pw]):

div.jokuLuokka {overflow:auto; width:100px; height:150px; position:fixed; left:10px; top:10px}

Jos ajattelemme sivustojen tekemistä idealistiselta näkökannalta, BODY-elementin kanssa ei ole vättämätöntä käyttää mitään lapsielementtiä dokumentin visuaalisen perusrakenteen luomiseksi. Sen sijaan että käytetään juurielementtiä HTML visuaalisena perus rakenne-elementtinä käytetään elementtiä BODY ja kiinteä navigointielementti muodostaa oman kerroksen (layer). Juurielementti HTML toimii visuaalisena pohjaelementtinä, kuten seuraavassa esimerkissä:

html {background-color:#603} /* dokumentilla on kaksitasoinen tausta */
body.Class {max-width:600px; margin:auto; background-color: white} /* BODY toimii visuaalisena perus rakenne-elementtinä */
#one, #one2, one3 {z-index:4; text-align:right; border:1px solid black; background-color:#ffc; font-size:11px; padding:1px 2px 1px 0px;} /* navigointielementtien eri variaatioden yhteiset ominaisuudet */
#one2 {position:fixed; bottom:0px; right:0px; width:102px; height:27px;} /* #one2 käyttää DIV elementtiä kiinteänä navigointielementtinä selaimet, jotka eivät osaa toteuttaa CSS:ää näyttävät sen sivun lopussa alavasemmalla */

Systeemi toimii periaatteessa jopa niin, että määrittää max-width ominaisuus elementille HTML, jolloin HTML toimii myös dokumentin perus rakenne-elementtinä (kuvakaappaus[S]):

html {padding:0; margin:auto; max-width:500px; background-color:red}

Ratkaisussa ei tarvita taulukoita, ei kehyksiä eikä sisäkkäisiä DIV elementtejä, mutta dokumentin näkyvä rakenne on silti kontrolloitu.

Ajatus käyttää kiinteää navigointielementtiä ei ole uusi. Dave Ragget ehdotti HTML 3.0 Draft:ssa (1995), että BODY elementin sisällä voitaisiin käyttää paikallaan pysyvää BANNER elementtiä (ks. myös HTML 3.0, elementti BODY[S]):

The BANNER element is used for a banner section which appears at the top of the window and doesn't scroll with window contents. This can be used for corporate logos, copyright statements and disclaimers, as well as customized navigation/search controls.
Suositukseni:
  1. Jos haluat antaa kaikille kiinteätä asemointia tukeville selaimille jonkin elementin pysyvän paikoillaan, määrittele vain suhteellisen yksinkertaisia kokonaisuuksia. Varmista, että elementit ovat sopivilla paikoilla selaimilla, jotka eivät tue kiinteätä asemointia.

  2. Jos asemoit kiinteiden elementtien sisällä muita elementtejä, käytä vain asemointityyppiä position:relative.

  3. Jos luot monimutkaisia dynaamisia ratkaisuja käytä niitä vain sellaisten selainten kanssa, jotka pystyvät toteuttamaan monimutkaiset rakenteet. Luo tarvittaessa selainkohtaisia tiedostoja.

  4. Määritä mahdolliset dynaamiset valikot vain vasempaan yläkulmaan suhteellisen kapealle alueelle siten, että päävalikko ei mene asiasisällön päälle.

Selainkohtaisia huomautuksia:

  1. Tuntemistani selaimista position:fixed että overflow:auto toimivat vain MS IE 5.0+ Mac, Mozilla 0.6+, Netscape 6.1+ ja Opera 7.x+ -selaimissa. Molemmat toimivat todennäköisesti myös Konqueror (Linux) ja Safari-selaimissa (Mac-selain; (en ole niissä testannut overflow-ominaisuutta; Konquerorissa olen testannut position:fixed ja Safari näyttäisi erään kuvakaappauksen perusteella sitä tukevan). MS IE Mac overflow:auto ei toimi kunnolla. Käsittelen toisessa yhteydessä visibility ominaisuutta koskevaa ongelmaa. On syytä tiedostaa, että position:fixed toimii lähes moitteitta vain sangen uusista Mozilla Gecko Opera 7.0 Beta 2 -selaimista lähtien.

  2. MS IE 5.5+ Windows ja Netscape 6.0x tukevat overflow:auto mutta eivät position:fixed. Sivulla 8[S] on tähän asiaan liittyvä linkki testisivulle ja toteutuksista annetut kommentit. Opera 4.x-6.x:ssä ei toimi overflow:auto. Operalla on myös eräitä pienempiä virheitä, joita käsittelen eräällä lisäsivulla[S].

  3. position:fixed ei toimi eräiden upotettujen objektien kanssa Opera 5.x ja MS IE 5.0 Mac -selaimissa (IFRAME rullautuu sivun mukana; sama asia koskee ainakin Operan kohdalla myös APPLET, EMBED ja OBJECT elementtien avulla upotettuja objekteja).

  1. Jos position:fixed asemoitujen elementtien jälkeläiset on määritelty position:absolute avulla jotkut Mozilla Gecko selaimet laskevat absoluuttisesti asemoitujen elementtien paikan ikään kuin ne eivät olisi kiinteästi määriteltyjen elementtien sisällä (käsittelen tätä asiaa tarkemmin eräällä sivulla[S]). Konqueror 3.1:llä ongelmana on se, että absoluuttisesti määritellyt elementit jäävät kiinteästi määriteltyjen elementtien alle (z-index ei toimi oikein).

  2. Jos käytetään ominaisuutta bottom on ehdottomasti määriteltävä ominaisuutta height, jotta position:fixed toimii Operalla kuten pitäisi.

  3. max-width toimii elementin HTML kanssa vain CSS2:ta tukevissa Opera-selaimissa. MS IE -selaimilla on koko dokumenttia ajatellen jonkinlainen width-ominaisuus, on välttämätöntä lisätä DIV elementti ja käyttää sitä dokumentin perusrakenteen luomiseen. MS IE:lle leveys voi olla kiinteä, mutta Opera 4.x+:lle, Mozilla Gecko, Konqueror ja Safari -selaimilla sen arvo voi olla joustava, kun määrittelee CSS:n seuraavalla tavalla:

    div.perusRakenne {width:550px;}
    div[class="perusRakenne"] {min-width:200px; max-width:550px; width:auto}
    /* MS IE ei lue tätä sääntöä; width:auto eliminoi width:550px vaikutuksen */
  1. Kiinteästi asemoitujen elementtien sijaan voi käyttää JavaScript-koodauksella toteutettuja "kelluvia" elementtejä, jotka pienellä viivellä asettuvat paikoilleen. Toimivuus on kuitenkin jossakin määrin huonompi kuin kiinteästi asemoiduilla elementeillä. Käsittelen tällaisia elementterjä eräällä lisäsivulla[S].

  2. Eräät Mozilla Gecko -selaimet tulkitsevat katselukanavan eri tavalla. Operassa vierityspalkkeja ei lasketa katselukanavaan, mutta joissakin Mozilla Gecko -selaimissa ne lasketaan. Tein asiasta myös erityisen mallisivun[S], josta minulla on muutamia kuvakaappauksia:

    • Opera 5.01[S] - ok.
    • Mozilla 0.7[S] - sivu on madalletussa ikkunassa, jolloin tulee vaakatason siirtymä (korjattu Mozilla 0.9:ssä).
  3. MS IE 5.0 Mac versiossa ei toimi edellisellä esimerkkisivulla margin:auto, mikä näkyy kuvakaappauksesta[S]. Mac IE:llä monimutkaiset dynaamiset valikot eivät toimi kiinteästi asemoituina.

  4. Mitä itse tiedän vain Opera 7.x, Mozilla 0.9-1.1 / Netscape 6.1-7.0 Konqueror + todennäköisesti Safari osaa käsitellä kunnolla monimutkaisia dynaamisia valikoita (tällöinkin muistettava, että position:fixed + position:fixed eikä position:fixed + position:absolute ei käytetä).

[Alku]

Muotoiluefektit

Aiheet

Display

Mahdolliset display-ominaisuuden erityisarvot ovat inline , block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption ja none.

W3C: CSS2: 9 Visual formatting Model, 9.2.5 The 'display' property[Pw].

Kyseessä on CSS:n voimakkain työkalu. Tämän omainaisuuden tarkoituksena on määritellä elementin peruskäyttäytymistapa, esim. käyttäytyykö elementti kuin rivinsisäis- tai lohkoelementti.

Juuri ominaisuus display on keino muuttaa HTML-dokumentin luonne XML:n kaltaiseksi merkintäkieleksi. Kaikkia arvoja ei ole kuitenkaan tarkoitettu käytettäväksi HTML-dokumenteissa, sillä eräiden taulukkoa koskevien ominaisuuksien idea on vain siinä, että CSS-ominaisuuksien avulla voisi luoda XML-asiakirjoille täydellinen HTML 4.0 taulukkomallin. Spesifikaatio varoittaa muuttamasta taulukoiden normaalia käyttäytymistä. Selaimien ei edes tarvitse hyväksyä HTML-taulukoiden rakenteen muutosyrityksiä.

Periaatteessa se mahdollistaa sopivasti sisäkkäisten elementtien rakenteen muuttamisen esim. listanäytöstä taulukoihin tai päinvastoin. Alla on esimerkkinä taulukkorakenteen luomisesta CSS:n avulla:

*[class~="tables"]{display:table; border:2px blue solid; padding:2px; margin-bottom:5px;} /* edellyttää, että kaksi elementtitasoa on tämän sisällä, jolloin minkä tahansa elementin voi muuttaa taulukon peruselementiksi */
*[class~="tables-tr"]{display:table-row} /* muuttaa seuraavan tason elementin taulukkoriviksi */
*[class~="tables-td"]{display:table-cell; text-align:justify;} /* muuttaa seuraavan tason elementin taulukkosoluksi */
td p {display:list-item; padding-left:12px; list-style-type: disc; list-style-image: url(./Css/Kuvat/pallo-vihrea.gif); list-style-position: inside; /* mikäli edellä mainitulla tavalla on luotu taulukko, taulukkosolujen sisällä olevat P elementit muuttuvat listaelementeiksi */}

Teoriassa XML-dokumenteille on mahdollista luoda taulukon kaltainen rakenne luomatta kaikkia taulukkotasoja. Selaimen tulisi automaattisesti luoda puuttuvat tasot. Taulukkosolut tulee aina luoda, mutta elementille TABLE ei tarvitse olla vastinetta. Ilman taulukkoriviä luovaa elementtiä ei voi käyttää rinnakkaisia taulukkosoluja vaan solut menevät aina allekkain.

Ainoastaan tyhjät elementit ovat ongelmallisia. HTML:ssä se ei voi poistaa tyhjien elementtien muotoiluominaisuuksia muuten kuin poistamalla ne käytöstä display-ominaisuuden arvon none avulla. Tällä ominaisuudella voi muuttaa silti näennäisesti dokumentin elementtien järjestystä. Elementtien todellinen järjestys ei muutu, mutta jos jotkut elementit piilotetaan ja toiset näytetään, tapahtuu ikään kuin elementtien paikan vaihto ([M][S][Pw]).

Kun laittaa display:none, voi fiksusti toteuttaa tiedotteen CSS:n käytöstä. Seuraavankaltainen teksti näkyy vain vanhoille selaimille - miksi uudemman selaimen omistajan tarvitsisi lukea seuraava teksti:

<DIV style="display: none;"> Mikäli tämä teksti näkyy, selaimesi ei tue HTML 4.0 style-määrittelyjä ja CSS-tiedostoja. Et menetä vanhoilla selaimilla mitään olennaista informaatiota, mutta hanki uudempi selain, jos haluat nähdä sivut juuri sellaisina kuin olen ne suunnitellut. Sivuni näkyvät parhaiten MS IE 5.x+, Opera 5.x+, Netscape 6.x+ or vastaavilla muilla selaimilla (kuten Mozilla ja NeoPlanet).</DIV>

Tätä voi verrata HTML-kommenttien käyttöön. Erona on kuitenkin se, että kommenttimerkkejä ei tarvitse sijoittaa dokumentin runko-osaan (kuten esim.<!-- <TD>Tämä on kommenttimerkinnällä näytöltä poistettu taulukkosolu</TD> -->) vaan dokumentin osien piilottamisen voi toteuttaa erillistiedoston kautta. Muutokset voivat olla myös dynaamisia, jolloin saadaan aikaiseksi visuaalisia efektejä.

Selainkohtaisia huomautuksia:

  1. Vain Opera 4.x+ ja Mozilla Gecko -selaimet pystyvät luomaan XML-dokumenteille taulukot CSS:n avulla. Katso seuraavia sivuja ja mallikuvaa:

    • HTML-versio[S][Pw] - MS IE 5.0 näyttää eräässä kohdin sinisen reunustuksen, mutta ei sen keskellä listaelementtejä, mutta muu muotoilu toimii).
    • XML + CSS -versio[S][Pw] - MS IE 5.0 pystyy luomaan dokumentille vain sangen vaatimattoman struktuurin (yksikään listakuva ei näy); kuvaa lukuun ottamatta tiedoston rakenne pitäisi olla HTML-version kaltainen).
    • XML + XSL(T) + CSS -versio[S][Pw] - MS IE 5.0 pystyy luomaan vain XSL:n avulla XML-dokumenteille kunnon rakenteen ja esitystavan.
    • Kuva siitä, miten selaimen tulisi näyttää sivua[S][Pw] - saat kuvasta käsityksen myös siitä, mitä MS IE 5.0 ei pysty CSS:n avulla näyttämään.

    Tein myös toisen esimerkin[S]. MS IE näyttää sivun vain sekasotkuna, mutta Opera 4.x+ ja Mozilla Gecko -selaimet selkeinä taulukkoina.

  2. Mozilla Gecko -selaimet ja Opera 4.x+ pystyvät toteuttamaan useimmat display-arvot. Testaamistani arvoista display:run-in ja display:compact eivät toimineet Netscape 6.2.1:ssä, mutta ne toimivat Opera 4.x+:ssa.

  1. MS IE 5.0 pystyy tällä ominaisuudella vain muuttamaan jonkun elementin käytöksen joko lohko- ja rivinsisäiselementtien kaltaiseksi (display:block or display:inline) sekä piilottamaan jonkin alueen näyttöruudulta (display:none).

  2. Ne toimivat MS IE 4.x Windows ja Netscape 4.x -selaimissa, mutta display:block ei luo lohkoa vaan se toimii vain display:none vastakohtana samaan tapaan kuin display:inline.

  3. MS IE 6.0 Windows tukee kaikkia CSS1-tason näyttötyyppejä + CSS3-tason display:inline-block, jota muut selaimet eivät tue. Sillä on DTD-riippuvainen erityiskäyttö, johon viittaan sivulla[S].

  4. Display-ominaisuuksilla voi leikkiä kytkemällä ne dynaamisiin pseudoluokkiin ja luoda siten visuaalisia muutoksia. Tällöin niillä saa aikaiseksi samankaltaisia muutoksia kuin skripteillä. Pelleille mallikuvillani, jos sinulla on käytössä MS IE 4.x+, Mozilla Gecko tai Opera 7.x+ ([M][S][Pw]). Koska Opera 4.x-6.x eivät tue display-ominaisuuden dynaamisia muutoksia ne eivät toimi em. Opera-selaimissa.

[Alku]

Visibility

Uutta CSS2 tasolla on myös visibility eli se, näytetäänkö elementin määrittelemä kohde vai ei (visibility:hidden; visibility:visible). Spesifikaation mukaan ero määrittelyyn display:none, on siinä visibility:hidden ottaa määritellyn tilan. Arvon hidden avulla voi luoda piilomuotoiluja. Ominaisuutta voi hyödyntää käyttämällä dynaamisia näennäisluokkia ja siten aikaansaada dokumentin rakenteen dynaamisia muutoksia.

Selainkohtaisia huomautuksia:

  1. Netscape 4.x ei tunnu toteuttavan visibility ominaisuutta aina oikein.

  2. MS IE ja (useimmissa tapauksissa) Mozilla Gecko -selaimet näyttävät elementit, joilla on visibility:visible vaikka ne olisivat sellaisten elementtien sisällä, joille on määritelty visibility:hidden, mikä on oikein. Opera piilottaa virheellisesti tällaiset elementit aina ja Mozilla Gecko, jos position:fixed on käytetty (engl. testisivu[S]).

  3. Vertaa keskenään MS IE 5.x+, Mozilla Gecko tai Opera 7.x+ -selaimella ominaisuuksien display ja visibility käyttäytymistä ([M][S][Pw]). Muutokset eivät toimi vanhemmissa Opera-selaimissa.


John Allsop: Page Layout[Pw].

[Alku]

DHTML

Ns. DHTML[S][Pw]:ssä on kyse CSS + JavaScript/ ECMAScript koodauksen avulla aikaansaaduista dokumentin rakenteen dynaamisista visualisista muutoksista (useimmiten käytetään ominaisuuden visibility arvojen vaihtamista). Yleisimmin sitä käytetään dynaamisissa valikoissa. Käytän nykyisin itse niitä ja tein dynaamisten valikoiden luomisesta liitesivun[S].

En käsittele DHTML/DOM:ia laajasti kuten en myöskään eräitä muita CSS:ään liittyviä asioita, joihin viittaan viimeisellä sivulla. Vertaa tämän sivun näkökulmia taulukoiden[S] mahdollisuuksiin.

[Alku]

12. Mitä muita erityispiirteitä CSS sisältää

Aiheet

Yleistä

Kun laitteet kehittyvät käsittelen tällä sivulla CSS2-CSS3 kehittyneitä piirteitä (advanced features). Olen viitannut niihin lähinnä sivulla 6[S].

Sivutettu media

CSS3:een on suunnitteilla seuraavia laajennuksia:

  • @page at-alisääntöjä:
    • @top, @bottom, @left ja @right
    • @outside
  • Muita at-sääntöjä:
    • @counter
    • @string
  • Uusia ominaisuuksia:
    • page-policy (vain @string ja @counter at-säännöille)
    • hidden-policy (vain @string ja @counter at-säännöille)
    • float uusia arvoja (outside | inside)
    • padding-inside
    • border-inside
    • string-set
  • Uusia sisältöfunktioita (content functions):
    • date()
    • document-url()
    • pages()
    • target-content(X)
    • target-counter(X, C)
Keijo Kortelainen: Sivutettu media.

Fontin sovittamisen laskentakaavat

Sekundaarisen fonttikoon font-size-adjust on helppo määrittää, jos tiedetään mikä on ns. x-height arvo eli pienen x-kirjaimen suhteellinen korkeus verrattuna isoon x-kirjaimeen (aspect ratio). Esim. Verdana fontilla pieni x on suhteellisen korkea. Sillä tehty teksti näyttää suuremmalta kuin jollakin muulla tekstityypillä, jolla on sama pistekoko (esim. Arial). Suosittelen sekundaariselle fonttikoolle suurin piirtein arvoa 1.2, jos muina fonttityyppeinä on esim. Arial, Helvetica ja Times New Roman.

Mikäli tässä kappaleessa on sama fonttikoko kuin edellisessä, em. ominaisuus ei toimi. Muut fonttikoon erityissäätelykeinot edellyttävät fontinsuunnittelutaitoa.

W3C: CSS2: 15 Fonts, 15.3.1 Font Descriptions and @font-face[Pw].

Merkistö at-sääntö ja kaksisuuntainen unicode

En ole testannut, koska en tarvitse mihinkään (en kirjoita erikoiskielillä).

Kuulotyylisivut

En ole testannut, mutta käyttö on sinänsä helppoa. Tavallisten ominaisuuksien sijaan laitetaan vain kuuloon perustuvat ominaisuudet, esim.:

h1, h2, h3, h4, h5, h6 {
voice-family: paul;
stress: 20;
richness: 90;
cue-before: url("ping.au")
}
p.heidi { azimuth: center-left }
p.peter { azimuth: right }
p.goat { volume: x-soft }

Ks. myös sivu Mikä on (X)HTML-elementtien semantiikka.

Keijo Kortelainen: ääni mediatyyppinä, Käytännön esimerkkejä.

Lomakkeet

CSS2 voi emuloida useimpia HTML-elementtejä ja esitysasullisia attribuutteja, mutta ei eräitä lomake-elementtejä. CSS3:n tarkoitus on toteuttaa CSS:n avulla kaikki HTML 4.0 lomakkeiden toiminnalliset ja esitysasulliset piirteet (UI = User Interface), mm. seuraavat:

  • Elementin tilaa ilmaisevia pseudoluokkia (UI element states):
    • :enabled
    • :disabled
    • :checked
    • :indeterminate
  • Elementtien osia (UI element fragments) kuvaavia näennäiselementtejä:
    • :selection
    • :menu
  • Elementin tilaa määrittäviä ominaisuuksia (Dynamic presentation):
    • user-input
    • user-modify
    • user-select
    • user-focus
    • user-focus-key
    • user-focus-pointer
  • Uusi arvo (inline-block) ominaisuudelle display emuloimaan TEXTAREA elementtiä.

Selainkohtaisia huomautuksia:

  1. Uudet Netscape/Mozilla-selaimet tukevat useimpia CSS3:een ehdotettuja näennäiselementtejä ja -luokkia (ks. CSS notes 1[S]).

[Alku]

CSS2:sta puuttuvat piirteet ja CSS3

Mielestäni merkittävimmät muutokset CSS3:ssa tulevat olemaan seuraavat asiat:

  • Moduuliperiaate. Tosin mielestäni se toimisi paremmin, jos nykyisenkaltaisen CSS:n tilalle kehitettäisiin XCSS[S].
  • Parempi toteutus lomake-elementeille.
  • Enemmän näennäisluokkia ja -elementtejä.
  • Voimakkaammin toteutettu kansainvälisyysperiaate (internationalization) ja siihen liittyvä CSS (International Layout).
  • Uusia sääntöjä ja ominaisuuksia sivutettuun mediaan (Paged Media).

Olen listannut omia ja muiden tekemiä ehdotelmia sivulle Proposals for CSS3[S].

W3C: CSS3:n working draft -sivut: CSS Namespace Enhancements (W3C Working Draft 25 June 1999), International Layout (W3C Working Draft 10-September-1999), Multi-column layout in CSS (W3C Working Draft 22 June 1999), Paged Media Properties for CSS3 (W3C Working Draft 28 September 1999), User Interface for CSS3 (W3C Working Draft 16 Feb 2000).

 
[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