[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
   
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > K Miten XML-dokumenttien kanssa voi käyttää CSS:ää

K Miten XML-dokumenttien kanssa voi käyttää CSS:ää

Aiheet

Yleistä

XML on suhteessa HTML:ään itsenäinen kieli. Sillä on toki HTML:n kanssa yhteisenä "emona" SGML[S][Pw] (lue myös XML:n selitys). Myös XML on metakieli, joka sisältää perussäännöt sille, miten XML-pohjaisia kieliä tulee rakentaa. Kieli on syntaksin osalta tiukemmin tyypitetty kuin HTML.

Toisin kuin HTML, XML ei itsessään omaa ainuttakaan muotoilukoodia. XML on puhdas merkintäkieli (markup language), jolloin kaikki aloitus- ja päätöskoodit (engl. start-tag ja end-tag) sekä tyhjien elementtien koodit ovat itsessään vain ja ainoastaan merkintäkoodeja. Dokumentin muotoilu ja sen esitystapa määräytyy käytetyistä apukielistä (esim. CSS ja HTML) käsin (tähän tosiasiaan perustuu myös se, miten olen kääntänyt sanan tag; ks. käännösvastineen perustelut[S][Pw].

Tällä kertaa tarkastelen sitä, miten XML-dokumentteja voi muotoilla CSS:n avulla. Oletuksena on myös se, että käytettyjä elementtejä ei kuvata millään muulla kielellä. XML:n elementeille voi luoda DTD tai XSD (XML Schema Document) -tiedostot, joissa kuvataan elementtien ja attribuuttien oikea käyttö. Niiden käyttäminen ei ole kuitenkaan välttämätöntä. Yhteistä kaikille XML-kielille on vain se, että niissä käytetään dokumentin alussa kuvausilmoituksia (declarations - selostan niitä (X)HTML nooteissa[S]), esim.:

<?xml version="1.0"?>
<?xml-stylesheet href="XML.css" type="text/css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

CSS2:een on lisätty joitakin piirteitä varta vasten XML + CSS -yhdistelmän toteuttamiseksi tarvittavia piirteitä. Näin ollen kunnollinen toteutus edellyttää seuraavien seikkojen toimivuutta, jotta selainta voidaan pitää XML + CSS -tason selaimena:

  1. Standardin XML-syntaksin ja XML-periaatteiden noudattaminen.
  2. XML:ssä ei ole samalla lailla yleisiä attribuutteja kuin HTML:ssä, joten yleisten attribuuttivalitsimien[S][Pw] tukeminen on välttämätöntä.
  3. Riittävän laaja display-ominaisuuden tukeminen[S][Pw] niin että voidaan luoda ainakin yksinkertaisia taulukoita ja listaesityksiä.

Huomautus 1. Ensimmäisen periaatteen suhteen MS IE 5.0 -selainta ei voi pitää todellisena XML + CSS selaimena, sillä se tukee vanhentunutta virallista XML-tyylitiedosto syntaksia edeltäviin ehdotuksiin (proposals - niitä kutsutaan nimellä Working Drafts) perustuvaa <?xml:stylesheet ...?> määrittelytapaa. Spesifikaation mukainen syntaksi on <?xml-stylesheet ...?>, jota tukee MS IE 5.5. Tässä mielessä MS IE 5.5 on ensimmäinen Microsoftin valmistama selain, jota voi pitää XML-selaimena.

Huomautus 2. MS IE kuten myös Opera 4.x+ tukevat kuitenkin sellaisia CSS-sääntöjä, jotka on tarkoitettu vain HTML-dokumenteille (ks. sivu Valitsimet kohdasta Attribuuttivalitsimet[S]).

Huomautus 3. Toisen ja kolmannen kohdan perusteella vain Opera 4.x+ ja Netscape 6.x -selaimia voi näillä perusteilla pitää kunnollisina XML + CSS-toteutukseen pystyvinä selaimina. MS IE 5.5 ei ole kunnollinen XML + CSS selain, sillä se ei tue välttämättömiä CSS2-piirteitä.

Muistutan vielä siitä, että tällä sivulla esimerkkinä käytetyt asiakirjat eivät ole täysin toimivia web-asiakirjoja. CSS on puhdas muotoilukieli ja XML on puhdas merkintäkieli. Lopputuloksena on XML-dokumentti ilman linkitystä ja XML:n kautta linkitettäviä elementtejä. XML ei yksinään ole edes hypertekstikieli. Toimiva XML-dokumentti tarvitsee linkityksen, jonka voi toteuttaa useammalla tavalla (en käsittele tässä yhteydessä linkitysmahdollisuuksia). Esimerkkidokumentit vastaavat lähinnä tavanomaista tekstinkäsittelyohjelmalla tehtyä dokumenttia.

CSS-tiedoston käyttö

Otan esimerkiksi dokumentin, joka käyttää saman nimisiä elementtejä kuin HTML-dokumentit. Annan esimerkkinä olevalle XML-dokumentille ainoaksi avuksi linkitettävän CSS-tiedoston (<?xml-stylesheet href="xml-sheet.css" type="text/css" ?>).

Jos tuotakaan ei anneta, MS IE 5.x näyttää dokumentin tekstitiedoston tapaisesti, mutta koodit on merkitty eri väreillä ja koodit on sisennetty ([M][S][Pw]). Toisaalta jos linkitetty CSS-tiedosto ei sisällä mitään tietoa or tiedostoa ei löydy, kaikki teksti on lähes peräkkäin, esim. (olen antanut esimerkin sivulle tyylisivutiedoston, jota ei ole olemassa):

<?xml version="1.0"?>
<?xml-stylesheet href="xml-sheet2.css" type="text/css" ?>
<html>
<head>
<meta name="robots" content="noindex">meta1- elementti META -</meta>
...
<style type="text/css>Uutta tyyliä - elementti STYLE -</style>
<title>Problems in the new technology - elementti TITLE -</title>
</head>
<body>
<h2><a name="Uutta">Problems</a></h2>
<p><b>Structural solutions</b></p>
...

näkyy tähän tapaan ([M][S][Pw]):
meta1- elementti META - Uutta tyyliä - elementti STYLE- Problems in the new technology - elementti TITLE - Problems Structural solutions ...
Elementtejä erottaa vain yksi välilyönti eikä elementin alkua tai loppua voi tietää.

Kun tyylisivuja käytetään lähes jokainen elementti pitää määritellä jollakin tavoin. Vain sellaiset tyhjät elementit, joiden perässä ei ole testiä, eivät tarvitse määrittelyä. Tässä on syytä muistaa myös se, että elementtien head ja body koodeilla ei ole mitään periaatteellista eroa, mikäli DTD-tiedostoa ei ole määritelty. Koska siinä ole myöskään standardisoituja elementtejä, voit vapaasti muuttaa head elementin sisällä olevien elementtien luonnetta normaalista elementistä tyhjäksi elementiksi tai päinvastoin. Voit kirjoittaa myös koodien <head></head> sisälle tekstiä eikä se ole mikään virhe. XML-dokumentille olennaista on vain juurielementti ja että sen sisällä olevat elementit ovat oikein muotoiltuja (well-formed).

Tämä sekä rajoittaa että laajentaa tyylisivuen käyttämistä. Toisaalta voit halutessasi näyttää esim. elementin title sisällön. Se ei ole todellinen TITLE elementti muuten kuin selaimille, jotka eivät ymmärrä XML-dokumentteja ja jotka tulkitsevat ne HTML:nä. Mutta XML-selaimessa se ei esimerkkidokumenteissani hoida edes tuota virkaa, koska elementin tehtävää ei ole kuvattu. Toisaalta et voi poistaa näytöltä ominaisuudella display:none tavanomaisesti käytettyä elementtiä meta, mikäli olet laittanut sen perään tekstiä, esim. ([M][S][Pw]):

<meta name="robots" content="noindex" />meta1- elementti META -

Tuossa tapauksessa elementillä on tosin tehtävä, mutta se johdu elementistä itsestään, vaan siitä, että hakurobotit tunnistavat kyseisen elementin! Mutta jos antaisin sille esim. MS IE 5.0:aa koskevan tehtävän, elementti ei sitä toteuttaisi. Jos seuraava koodi olisi HTML-dokumentissa, selain siirtyisi automaattisesti toiselle sivulle. Esimerkkinä käyttämissäni XML-tiedostoissa niin ei tapahtuisi. Elementin attribuutit olisivat selaimelle sama kuin selain saisi luettavakseen attribuutti="0".

<meta http-equiv="refresh" content="0; url=../Teaching/XSL.html" />

Sama pätee myös HTML-elementteihin HR ja BR, mikäli niitä käytetään XML-dokumenteissa. Jos laitat elementille meta sekä aloitus- että päätöskoodit, voit käyttää sitä täysipainoisesti muotoilukoodina, vaikka HTML-dokumentin suhteen näin et voi toimia. Ilman sisältöäkin voi niitä käyttää rajoitetusti muotoilukoodeina (display:block saa aikaan rivinkatkon). Opera 4.x+:lla ja Netscape 6.x.llä voit määritellä meta:before ja meta:after säännöt, jolloin tyhjäkin elementti toimii laajemmin muotoilukoodina. Tyhjien elementtien käyttö muotoilukoodina on kuitenkin rajoittuneempaa kuin päätösmerkkauksellisten elementtien.

Seuraavassa on esimerkki CSS-tiedostosta, jossa myös elementti head ja sen sisällä olevat elementit on määritelty. Vain elementti meta on piilotettu ([M][S][Pw]):

head {font-family:Verdana, sans-serif; display:block; background-color:aqua}
meta {display:none}
style {display:block; background-color:yellow}
title {display:block; background-color:yellow; border: 1px solid #660033}
body {font-family:Verdana, sans-serif; display:block}
h2 {font-size:21px; display:block; text-align:center;}
p {display:block; margin-top:1em;}

Nyt selain muotoilee dokumentin! Huomaa, että elementille P tulee määritellä sen marginaalit - muuten elementit ovat perä perää. Vasta tuon määrittelyn jälkeen sivu alkaa muistuttamaan HTML-dokumentteja! Määriteltyjen elementtien aloitus- ja päätöskoodit muuntuvat CSS:n avulla muotoilukoodeiksi. Todellisuudessa esimerkkidokumentti sisältää enemmän elementtejä kuin tuossa CSS-tiedostossa on kuvattu. Täysin määrittelemättömät elementit eivät vaikuta millään lailla dokumentin esitysasuun. Dokumentin esitysasusta puuttuu mm. elementin b määrittely.

Koska XML ei ole muotoilukieli, XML-elementit eivät itsessään jakaannu lohko- eikä rivinsisäiselementteihin (block level elements - in-line elements) - niiden olemassaolo määräytyy apukielistä käsin or DTD-tiedostoilla. XML:n näkökulmasta ei ole väärin laittaa lohkoelementiksi CSS:n avulla kuvattua elementtiä rivinsisäiselementin sisälle. Kun sivujen ulkoasu määritellään CSS:n avulla, sivujen tekijä joutuu itse vastaamaan oikeasta elementtien sijoittelusta. Elementtien sisäkkäisten suhteiden toimivuutta ei voi tarkastaa millään validaattoriohjelmalla, mikäli DTD-tiedostoa ei ole määritelty. Väärä sijoittelu saattaa johtaa siihen, että sivu muotoutuu epämääräisesti.

Toinen esimerkki. Otetaan esimerkiksi tiedosto, jolla on pääte xml ja sen sisällä on koodi:

<table>
   <tr>
      <td>tekstiä</td>
      <td>tekstiä</td>
   </tr>
</table>

MS IE 5.0 -selain joko näyttää tuon juuri tuon tapaisena, jos dokumentin elementeiltä puuttuu kuvaus. Yksikään noista koodeista ei toimi ilman kuvausta muotoilukoodina. XML:ssä tuo koodisarja on vain sarja tietyn nimisiä elementtejä ja on aivan sama vaikka niiden tilalla lukisi näin:

<taulukko>
   <taulukkorivi>
      <taulukkosolu>tekstiä</taulukkosolu>
      <taulukkosolu>tekstiä</taulukkosolu>
   </taulukkorivi>
</taulukko>

Voit periaatteessa määritellä CSS:n avulla, että elementti taulukko muotoillaan kuten HTML-elementti TABLE jne. Tosin muotoilu onnistuu vain Opera 4.x+ ja Netscape 6.x+ -selaimilla. MS IE 5.0 ei kykene muotoilemaan tuosta CSS:n avulla taulukkoa. Samoin em. selain ei pysty luomaan CSS:n avulla listaelementtejä (ks. sivu Muotoilut[S][Pw]).

Mikäli XML-dokumenteissa halutaan käyttää taulukko- tai listamuotoisia esityksiä, MS IE 5.0 -selaimelle dokumentin muotoilu ja elementtien esitysasu täytyy toteuttaa XSL[S][Pw] kielen avulla. Käytännössä loppudokumentti täytyy olla XHTML-dokumentti, jossa voi olla muiden XML-pohjaisten kielten elementtejä.

Linkitys ja muut XML-piirteet

Netscape 6.0 tukee jossakin määrin XLink-kieltä, joten sille saa toimivan linkityksen. Opera käyttää selainkohtaisia CSS-ominaisuuksia, joten linkityksen suhteen se ei ole kunnon XML-selain.

MS IE 5.5:lle saa linkityksen xmlns-attribuutin kautta. MS IE 5.5 tukee DTD-tiedostoja, joten tässä mielessä se on todellinen XML-selain. Opera ja Mozilla 0.7 eivät reagoi DTD-tiedoston virheisiin, joten ne eivät niitä lue. IE 5.5 tukee myös ns. skeemoja, joten kaikki piirteet huomioon ottaen sitä voi pitää kehittyneimpänä XML-selaimena.

Mikään selain ei tosin ole ihan kunnollinen, sillä edes jossakin määrin kunnon XML-toteutus edellyttäisi:

  1. Opera 4.x+:n tasoinen display-ominaisuuden toteutus ja yleisten attribuuttivalitsimien tukeminen.
  2. MS IE:n tasoinen DTD ja/tai skeema-tuki.
  3. Mozillan tasoinen XLink-toteutus.

Huomautus 1. XSL-tuki ei ole välttämätön selaimelle, sillä XSL:ää on mielekästä käyttää vain serveripuolella. Tosin mikäli selain eli käyttäjäsovellus (UA) sitä tukee, systeemien testaus helpottuu. CSS on paljon tärkeämpi UA-puolella.

Huomautus 2. On muistettava, että eräät seikat ovat vielä keskeneräisiä, jolloin ne voivat muuttua. Tällöin selain voi tukea niitä viralliseen spesifikaatioon nähden epästandardilla tavalla. Tällä hetkellä on aivan mahdotonta, että olisi olemassa täysin XML-tason selain. Tosiasiassa selaimet ovat Working Draft -tasolla.

W3C: XML Linking Language (XLink), XSL Transformations Version 1.0 (XSLT), Schema Modules.
Muut sivut: CSS notes 2[S].
Muut sivustot: Opera Software: Web specifications supported in Opera 5 - the details; Microsoft: XML Schema Refere.

[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