[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > E Millaista epästandardia CSS:ää on olemassa > Epästandardin CSS:n harmillisuus (jakso 2/5)

Epästandardin CSS:n harmillisuus

Operan ja Netscape/Mozillan epästandardi CSS on CSS2:n syntaksin mukaista. Ainoastaan se on erilaista, että selainkohtaisten ominaisuuksien ja näennäisluokkavalitsinten nimet saattavat alkaa tavuviivalla (esim. Operassa -replace ja Netscapessa :-moz-dummy-option). Vaikka Operan tai Netscapen selainkohtaista CSS:ää lisäisi standardien CSS2:n joukkoon, se ei aiheuttaisi MS IE:lle syntaksiongelmia, tuskin muullekaan CSS:ää ymmärtävälle sovellukselle. Netscape/Mozilla dokumentin esitysasua koskevan selainkohtaisen CSS:n käyttö aiheuttaa kuitenkin sen, että esim. lomakkeet saa näkymään siinä eri tavalla kuin muissa selaimissa. Kysymys on kuitenkin vain pienistä ulkonäköjutuista, ei vakavista toimintaongelmista. Itse asiassa -moz- etuliitettä käyttävät ominaisuudet eivät ole (tai ainakaan useimmat eivät ole) epästandardeja ominaisuuksia vaan kokeellisia CSS3-toteutuksia. Koska lopullisessa CSS3-spesifikaatiossa ne saatetaan määritellä toisin kuin väliaikaisissa vedoksissa (working drafts) Mozilla Gecko -selaimet eivät tue niitä ilman etuliitettä.

Suuri osa MS IE:n epästandardista CSS:stä ei ole kuitenkaan millään lailla harmillista muille selaimille. Eräs s-postiystäväni näytti kuitenkin esimerkin, miten eräs MS IE:lle tarkoitettu CSS aiheutti Opera 5.x:ssä sen, että selain ei lukenut elementtiä H1 koskevasta CSS:stä edes CSS2:n mukaisia ominaisuuksia. Alla on katkelma s-postin kautta saamaani koodia:

h1 {
font-variant : small-caps;
font-size : 20pt;
...
margin-bottom : 1em;
color : #005a9c;
background : transparent;
/* alla oleva CSS on vain MS IE:lle tarkoitettua */
filter: progid:DXImageTransform.Microsoft.DropShadow (color: '#C0C0C0', offX=3, offY=2); }

Periaatteessa Operan pitäisi pystyä ohittamaan ainakin osan em. vain MS IE 5.5:n lukemasta CSS:stä, sillä selainten tulee jossakin määrin ennakoida tulevat speksit (forward compatible parsing -periaate). Näin Opera osittain pystyy, mutta ei joka suhteessa. Esimerkin tapauksessa on kuitenkin niin paljon CSS2-spesifikaatiosta poikkeavia piirteitä, että Opera Software ei ole osannut varautua niihin kaikkiin. Selvitin, mitä tuossa on CSS2 spesifikaation vastaista ja miksi Opera ei sitä pystynyt käsittelemään. Muutin ensin MS IE:lle tehdyn koodin ensin muotoon filter:progidDXImageTransformMicrosoftDropShadow(color: '#C0C0C0', offX=3, offY=2), jonka Opera osasi ohittaa. Sen jälkeen kokeilin kohta kohdalta muuttaa sitä ja tulos on seuraava:

  1. Ensinnäkin filter:progid: on CSS2-speksien pohjalta virheellinen syntaksi, sillä CSS:n mukaan kaksoispiste tulee laittaa välittömästi ominaisuuden jälkeen (välilyöntejä toki saa käyttää) ja ominaisuuden arvo(t) tulee päättää puolipisteeseen. CSS2:n syntaksin mukaan progid pitäisi tulla puolipiste (filter:progid;). Tämä asia ei kuitenkaan sotkenut Operaa ja selain osaa ohittaa tämänkaltaisen CSS2-speksin vastaisen syntaksin. Selaimen tulee varautua, että tulevat spesifikaatiot sisältävät progid:... kaltaisia ominaisuuksien arvoja or että ominaisuudet voivat alistettuja muotoa ominaisuus:aliominaisuus:.
  2. Ominaisuuksien arvossa on piste kohdassa DXImageTransform.Microsoft.DropShadow. Tämä on ratkaiseva tekijä. Opera luulee sitä todennäköisesti CSS-säännöksi, jolloin määrityslohko tulisi joko katkaista päätöskaarisululla (}) kohdasta DXImageTransform tai sen jälkeen. Jatko kuuluisi jo uuteen määritys- eli kuvauslohkoon. Kun lohko ei katkeakaan siitä, mistä selain olettaa sen katkeavan, se ei osaa löytää määrityslohkon päätöstä. Seurauksena on sitten se, että Opera ohittaa koko määrityslohkon eikä vain ominaisuutta filter. Tämän kaltaisia ominaisuuksien arvojen syntakseja saatetaan lisätä CSS3:een. Forward-compatible parsing -systeemin perusidea on se, että selain voisi ohittaa ominaisuudet, jotka voisivat mahdollisesti tulla tuleviin spesifikaatioihin. Ominaisuus alkaa CSS2:n mukaisella syntaksilla ominaisuus:arvo. Jos Opera löytää tuntemattoman arvon, mielestäni sen pitäisi yrittää etsiä päättävä koodi, ; tai }. Kun Opera ei löydä määrityslohkon päätöstä, se hylkää koko määrityslohkon. Tavallaan selain toimii kuitenkin aivan oikein. Opera Software ei ole vain varautunut siihen, että missään tulevassa spesifikaatiossa voitaisiin käyttää ominaisuuksien arvossa pisteitä. Operan todennäköinen logiikka kooditasolla on seuraava:
    progid:}
    DXImageTransform.Microsoft.DropShadow     /* tämän jälkee Opera sitten edellyttäisi uutta jaksoa, joka alkaa kaarisululla ({) */
    tai
    progid:DXImageTransform}
    .Microsoft.DropShadow
  3. CSS-funktion edellä on välilyönti kohdassa DropShadow (color...). Välilyönti ominaisuuksien arvoissa merkitsee sitä, että yksittäisen ominaisuuden arvo päättyy ja välilyönnin jälkeen oleva arvo on uusi, samaan arvojoukkokokonaisuuteen kuuluva arvo. Selaimen pitäisi CSS2-syntaksin pohjalta ymmärtää DXImageTransform.Microsoft.DropShadow ja (color:...) olevan kaksi saman ominaisuuden arvoa. Tästä ei voi kuitenkaan olla kyse, sillä syntaksi arvo() on CSS2:ssa CSS-funktio, joka tulee ehdottomasti kirjoittaa yhteen. Kaiken järjen mukaan MS IE:n ymmärtämän ominaisuuden arvo pitäisi olla DropShadow(color...). Tämä on ratkaiseva tekijä. Uskon, että CSS3 ei voi sietää tätä, sillä tietokoneohjelmoinnin yleisperiaatteisiin kuuluu, että funktion nimi ja sitä seuraava suluissa oleva arvojoukko pitää kirjoittaa yhteen (CSS2:n ohella tätä periaattetta noudattaa mm. ns. JavaScript-koodaus). Tässä on kyse mitä todennäköisesti MS IE:n "velttoudesta" ja "lempeydestä" syntaksivirheitä kohtaan. Koska Opera ei syntaksivirheen vuoksi osannut päätellä, missä kuvauslohko päättyi, se hylkäsi koko säännön.
  4. Toinen ominaisuus on toisen ominaisuuden arvona kohdassa (color: '#C0C0C0', offX=3, offY=2). Tällä ei ole merkitystä ja CSS3:een tulee tämänkaltaisia piirteitä. Näihin Opera ja muiden CSS1-CSS2:ta tukevien selainten pitää pystyä niihin varautumaan.

Kyse on osittain siitä, että Opera tekee virheitä, koska selain ei pysty ohittamaan tuntemattoman ominaisuuden syntaksivirheitä (tämä on korjattu 5.12 versiota uudemmissa selaimissa). Tein englanninkielisen testisivun[S], joka demonstroi ongelmia 2 ja 3. Mozilla 0.9 pystyy näyttämään oikein kuten myös Opera 6.0 Beta 1 Windows.

Tuon koodin laatija kirjoitti 28.09.2001, että välilyönti kohdassa DropShadow (color...) ja sen kuuluisi olla DropShadow(color...). Saamani s-postin mukaan MS IE 6.0 hyväksyy välilyönnin, mutta se on huono asia, sillä selaimen ei tulisi toteuttaa väärällä syntaksilla laadittua ominaisuutta vaan sen tulisi hyäpätä kyseisen ominaisuuden ohitse seuraavaan hyväksyttävissä olevaan ominaisuuteen or mennä määrityslohkon loppuun. Jos selain hyväksyy syntaksivirheitä, se vaikeuttaa koodin oikeellisuuden tarkistusta.

Näin ollen on periaatteessa mahdollista, että alla oleva koodaus on jonkin CSS3:een tehdyn ehdotelman mukaista:

filter: progid:DXImageTransform.Microsoft.DropShadow(color: '#C0C0C0', offX=3, offY=2)

Tuollaista syntaksia ei ole kuitenkaan ehdotettu missään CSS3-ehdotelmassa. Ainut CSS3-ehdotelma, joka tuntee ominaisuuden filter on SVG (Scalable Vector Graphics). Kyseessä on erityiskieli eikä kyseinen ominaisuus kuulu yleisesti käytettäväksi ehdotettuihin CSS3-ehdotelmiin. SVG:ssä käytetty syntaksi poikkeaa MS IE:n tukemasta syntaksista.

W3C: W3C Specification - Scalable Vector Graphics (SVG) 1.0 (Candidate Recommendation 20000802).

Tosiasiassa on siten kyse ihan epästandardista CSS:stä, vaikka näennäisesti Microsoft antaa WWW-sivuilla kuvan, että MS IE käyttää ominaisuutta filter jonkin CSS3-ehdotelman mukaisesti. Microsoft selittää ominaisuuden filter käyttöä seuraavasti (lisäsin tekstiin hieman korostuksia):

Filters often create effects that can be generated with script. This raises the question, "Why use filters if script can do the job?" There are several reasons for using filters. The most important is because they don't require script. For better tai worse, many HTML authors do not use scripting. Filters are a convenient package for the same functionality that scripting provides. Another benefit of filters is that they are easier to author and can be applied to entire classes of elements, because they use the declarative and inherited syntax of CSS.

Filters and transitions display properly only on systems that have the color palette set to display 256 colors tai more.

Almost any object can have filters applied to it. However, the object that the filter is applied to must have layout before the filter effect will display. Put simply having layout means that an object has a defined height and width. Some objects, like form controls, have layout by default. All other filterable objects gain layout by setting the height tai width property, setting the position property to absolute, tai setting the contentEditable property to true.

MS IE tukee kuitenkin eräitä aivan oikeasti CSS3:een tehtyjä ehdotelmia. Sinänsä on hyvä, että on testataan kokeiluluonteisia sovelluksia - yleiset WWW-sivut vain eivät ole oikea paikka näiden testien tekemiseen! Koska MS IE toteuttaa keskeneräisiä speksejä ja MS suosittaa niiden käyttöä WWW-sivuilla, se rikkoo W3C:n suosituksia keskeneräisten spesifikaatioiden käytöstä.

Löysin eräältä WWW-sivulta myös toisen esimerkin Microsoftin arveluttavista koodauksista:

<style fprolloverstyle>
A:hover {color: red; font-weight: bold}
</style>

Kyseessä on aivan normaali a:hover efekti. Vaikka kyseessä on epästandardi koodaus Opera 5.x ymmärtää sen. Fprolloverstyle-attribuutti on MS:lle tyypillinen täysin tarpeeton epästandardi MS-tuotteiden koodaus. Kyse ei ole jollekin selaimelle tarkoitettu koodaus, sillä informaatio on relavanttia vain sivuteko-ohjelmalle. Tällainen tieto pitäisi olla kuitenkin kommenttien sisällä. Saman asian voisi kuitenkin määritellä täysin standardilla tavalla:

<!-- fprolloverstyle -->
<style type="text/css">
A:hover {color: red; font-weight: bold;}
</style>

Yleensä vain editorille tarkoitettu koodaus (sitä on monissa sivunteko-ohjelmissa, erityisesti Adoben editoreissa) ei ole harmillista. Sivulla, jolla tällaisen attribuutin löysin, Mozilla 0.9 näytti kuitenkin sivun alun väärin. Kyse on todennäköisesti siitä, että uudet Netscape/Mozilla-selaimet toisinaan sekoavat elementtien päätösmerkkauksien kohdasta, sillä fprolloverstyle ei ole HTML 4.01 spesifikaation näkökulmasta asianmukainen attribuuttisyntaksi. Uudet Netscape/Mozilla-selaimet näyttävät edellyttävän, että attribuutit ovat kaksiosaisia eli ovat muotoa attribuutti="arvo" (jotkin vanhat HTML-spesifikaatiot käyttivät yksiosaisia attribuutteja, esim. <DL compact>). Jos em. epästandardi koodaus olisi vaikka <style fpstyle="rolloverstyle">, uudet Netscape/Mozilla-selaimet osaisivat todennäköisesti aina ohittaa epästandardin koodauksen ongelmitta. Tosin kun vierailin sivulla uudestaan, ongelmaa ei ollut. FrontPagen luoman fprolloverstyle kohdalla kyse on todennäköisesti ajattelemattomuudesta kuin tahallisesta kiusanteosta.

Yleisesti ottaen joillekin selaimille mahdollisesti haitallisen koodauksen luomisessa on kyse hallitsevan markkinaosuuden väärinkäytöstä. Kaikkien tiedossa on se tosiasia, että Microsoftin pyrkimykstä on saada täydellinen monopoliasema selainmarkkinoilla. Yhtenä keinona on epästandardien ja keskeneräisten spesifikaatioiden tukeminen. Niiden avulla MS pyrkii harjoittamaan "selainylivaltaterrorismia". Jos keskeneräisen spesifikaation käytöstä on ilmiselvää haittaa toisille selaimille, sitä ei mielestäni pitäisi käyttää internetissä. Tältä näkökulmalta katsottuna haitallisen koodauksen tahallinen laatiminen internetissä käytettäväksi tarkoitetuilla sivuilla on Microsoftin selainylivaltaterrorismin tukemista! Toivon, että jokainen tämän sivun lukija perehtyy laatimiini "moraalisääntöihin".

[Alku]