[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > N Millaisia CSS-totetusvirheitä selaimissa on > Vanhimpien selainten CSS-virheitä (jakso 2/2)

Vanhimpien selainten CSS-virheitä

Aiheet

Olen ollut yhteydessä Harwardin yliopiston henkilöihin, jotka ovat tarkastaneet uusimpia selaimia koskevat huomautukseni - olin ymmärtänyt väärin joitakin fonttiarvoja. Poistin ongelmalliset huomautukset. Keskustelen useimmista listassa olevista maininnoista alan tutkijoiden kanssa. Uusimpana vertailuselaimena olen käyttänyt Mozilla 0.7:aa (uudempi kuin Netscape 6.0).

Havaitsemani virheet

Seuraavassa luettelo muutamista kohdista, joissa itse olen havainnut sivuillani MS IE ja Netscape -selainten kanssa:

Voit tutkia virheitä Internetin välityksellä W3C-organisaation CSS-testisivuilla. Niistä tulet huomaamaan esim., mitä käytännössä merkitsee se, että NS 4.04 osaa @import sääntöä. Esim. testi ). Kyseisen testisivun kohdalla myös IE tekee virheitä. Tarkan dokumentaation selainten CSS1-toteutus virheistä löydät -firman sivuilta.

W3C:
W3C CSS1 Test Suite: 1.1 Containment in HTML.
Muut sivustot:
webreview.com

Merkittävimmä uudet ongelmaryhmät NS 4.04:n ja IE 4.01:n kohdalla:

[Alku]

Netscape 4.0:n virheet

Luettelo W3C organisaation CSS-testisivuilla virheellisesti näkyvistä sivuista NS 4.04:llä ja olen jättänyt epävarmat sivut pois laskuista:

W3C:n virheellisiä testisivuja

[Alku]

MS IE:n virheet

Luettelo W3C organisaation CSS-testisivuilla virheellisesti näkyvistä sivuista (osassa virhe on pieni, osassa todella merkittävä; tässäkin luettelossa voi olla pikkuvirheitä, sillä en ymmärtänyt kaikkea lukemaani täysin; vertailuselaimena on kuitenkin ollut Opera, joten tämä luettelo on merkittävästi tarkempi kuin vastaava NS luettelo). Latoin korjatuista ominaisuuksista muista poikkeavan listaelementin (Korjattu kohta).

Opera-selainten virheitä

Testasin omilla sivuillani myös Opera Softwaren selaimia. Ensimmäinen testaamani selain oli Opera 3.51, jossa ilmeni merkittäviä puutteita. Opera 3.6x osoittautui CSS1:n suhteen erinomaiseksi. Opera 4.x+ tukee myös CSS2:ta sangen kattavasti. Listassa on mukana myös kohdat, joissa selain toimii eri logiikalla kuin Netscape ja IE sekä erityinen listaelementti osoittamssa, mitä asioita on korjattu:

W3C testisivuilla mielestäni seuraavilla sivuilla virheellinen toiminto tai Opera ei tue em. ominaisuutta:

Opera toteuttaa CSS1 Test Suiten suhteen 95% ne CSS1 ominaisuudet, jotka se lupaa, mutta jättää toteuttamatta lähes kaikki valinnaiset ominaisuudet. CSS2 tuki on käytännössä aivan olematon. Selain tekee pahoja virheitä pitkillä sivuilla. Opera 5.x+:ssa on täysi CSS1 toteutus (Opera 4.x:stä puuttuu :active toteutus).

Muut sivustot:
http://www.webstandards.org/css/.

Mikä toimii Netscape 4.04:ää paremmin (mainittu myös joitakin IE:tä koskevia kohtia)

En käynyt kaikkia asioita lävitse Opera 3.51:llä vaan lähinnä niitä, joissa Netscapella on suurimmat puutteet ja joissa siis Opera 3.51 toimii paremmin. Sen sijaan kävin kaikki asiat lävitse Opera 3.6x:lla ja tässä vertailua em. selaimiin sekä muutama näkökohta myös IE 4.01 ja IE 5.0:aan nähden:

Kuten listasta käy ilmi, Opera osaa IE:n kanssa CSS1:n peruspiirteet paremmin kuin Netscape ja Opera 3.6x näyttää monet CSS1-määrittelyt jopa paremmin kuin IE 5.0. Annan Netscape 4.04:lle CSS:n käsittelystä arvosanan 4½, IE 4.01:lle 6½ - 7- (arvioinnit kansainvälisessä lehdistössä ovat olleet saman tapaisia - tosin IE 4.01 on saanut hieman paremman arvosanan, mutta ei olennaisesti). Opera 3.51 toimii toisaalta IE:tä paremmin, mutta tekee myös niin pahoja virheitä että sille on vaikea antaa kokonaisarvosanaa - kansainvälinen lehdistö on arvioinut tämänkin selaimen IE 4.01:tä paremmaksi ja heidän arviointiensa perustella Opera 3.51 ansaitsee arvosanan 8-/7+ (Windows 95/NT), vaikka itse en noin korkeaa arvosanaa ao. selaimelle antaisi.

Opera 3.6x on selkeästi versiota 3.51 parempi ja ansaitsee CSS1:n suhteen lähes kiitettävän eli 8½. Opera 4.0 ansaitsee CSS1-toteutuksesta 9½ ja Opera 5.x 10-. IE 5:0:ssa on edelleen suuri määrää CSS virheitä ja CSS1:n osaamisen suhteen annan sille arvosanan 8, sillä yleisesti ottaen Operassa on edelleen paras CSS1 tuki.

Uusimmissa selaimissa on myös korkeatasoinen JavaScript-tuki. Opera 5.x:lle, Netscape 6.x:lle ja MS IE 5.5:lle olisi periaatteessa mahdollista kirjoittaa DOM2:n mukainen DHTML. En kuitenkaan osaa sanoa tämän asian käytännön toimivuudesta mitään.

Netscape 6.0:n virheitä

Hyvin vähän virheitä CSS1 Test Suiten esittämisessä, seuraavat kuitenkin huomasin:

Yleisesti voi sanoa, että selain ei tee virheitä - se kelpaa seuraavia sivuja lukuun ottamatta jopa vertailukohdaksi muille selaimille, miten CSS-ominaisuudet tulee näyttää.

Uudessa Netscapessa on korjattu perustavalaatuisia vikoja, kuten "@import" ja relatiiviset viittaukset, kuten suurin osa muistakin vioista.

Webstandards-organisaatio ei ole tutkinut Nescape 4.x -sarjaa, koska Netscape itsekään ei pidä tuotettaan pätevänä ja virhelistasta tulisi toivottoman pitkä eikä kellään ole kärsivällisyyttä sellaista tehdä. David Baron on ystävineen on tutkinut myös Mozilla Geckoa eli Netscape 6.0:n näytönhallintaa ja Netscape 6.0:sta tulee olemaan raportteja.

Muut sivustot:
http://www.webstandards.org/css/, http://www.fas.harvard.edu/~dbaron/csstest/

Virheiden ohituskeinoja

  1. Kaikki tekstiasiakirjat, navigointipalkit ja CSS-tiedostot ovat runkohakemistossa ja kuvat alihakemistoissa.
  2. Runkohakemisto jätetään tyhjäksi ja sinne laitetaan vaan index.html, jossa automaattinen ohjaus muualle tai kyseinen asiakirja on kehysasiakirja, jonka tiedostot ovat muualla. Teksti- ja CSS-tiedostot sekä navigointipalkit pidetään aina seuraavalla hakemistotasossa. Niiden ei tarvitse olla samalla hakemistossa, mutta CSS-tiedostojen relatiiviset viittaukset tulee tehdä aina runkohakemistosta käsin siinäkin tapauksessa, että viitattava tiedosto olisi samassa hakemistossa. Esim. jos sinulla kuva "image.gif" joka on samassa hakemistossa kuin CSS-tiedosto, sinun ei CSS-tiedostossa tule viitata siihen "background: white url(image.gif)" vaan suhteessa runkohakemistoon "background: white url(../Alihakemisto/image.gif)". Jos kuva on em. alihakemistossa, tee näin "background: white url(../Alihakemisto/ Toisen_tason_alihakemisto/image.gif)" sen sijaan että laittaisit näin "background: white url(./Toisen_tason_alihakemisto/ image.gif)". Selaimelle tulee pieni mutka, mutta se ei erityisemmin hidasta selaimen toimintaa. Kun teet edellä mainitulla tavalla, voit käyttää yhtä CSS-tiedostoa koko sivustolle ja näin toisesta alihakemistosta oleva viittaus yhteiseen CSS-tiedostoon löytää oikean taustakuvan eli esim. seuraava viittaus toimii olkoon tiedosto missä tahansa saman tason alihakemistossa "<LINK rel=stylesheet type="text/css" href="../Alihakemisto/sivusto.css">". Valitettavasti itse tein CSS-tiedostot jälkikäteen enkä voi enää hyödyntää tätä ideaa.

Opera 3.51 on siinä mielessä ongelmallisempi kun sille ei voi laittaa ohitussysteemejä, sillä se osaa @import - säännön. Opera 3.6x toimii kuitenkin niin hyvin, että suosittelen sen imuroimista version 3.51 sijaan. Opera 3.6x:ssa on kaikki version 3.51 virheet korjattu ja CSS1-määreet toimivat lähes moitteetta ja siitä on mahdollista tulla paras CSS2:ta tukeva selain lähitulevaisuudessa. Netscapen suhteen on otettava huomioon, että esittämäni Netscape-selaimen tekemien virheiden ohituskeinot pätevät vain versioon 4.04 asti - mutta asiantuntijoiden mukaan myös versiossa 4.51 on huono CSS-tuki.

Operasoftwarella on taitoa, mutta se on suhteellisen harvinainen selain. IE 5.0 ja Opera 3.51/3.6x tekevät IE 4.01 ja Netscape 4.x versioita useammin monia sivunsuunnittelijoita ärsyttävän vaakavierityspalkin ja sivuillani on em. selaimia käytettäessä muutamia turhia vaakavierityspalkkeja. Tässä suhteessa nämä selaimet toimivat ikävämmin kuin IE 4.01 ja NS 4.04 (myöskään Mozilla Gecko ei tee ylimääräisiä vierintäpalkkeja). Kummankaan kohdalla en ole löytänyt perusteltuja syitä vaakavierityspalkkien ilmestymisille kuin parissa kohtaa ja Operan suhteen on kahdella sivulla kyse selaimen selkeistä toimintavirheistä kaksisarakkeisten, paljon tekstiä sisältävien taulukoiden näyttämisessä (tällaisia taulukoita ei tosi yksikään selain näytä täysin oikein, koska sarakkeiden leveysarvot eivät toimi moitteetta!).

Lisäksi Operalla on on ihan oma käsitys siitä, miten sisäkkäisten (engl. nested) kehyksien tulee käyttäytyä ikkunaa voimakkaasti pienennettäessä (erityissivu[S]). Uusimmat tiedot ovat sivuillani yleensä englanninkielisiä.

Operan parhaita puolia on nopeus - merkittävästi muita selaimia nopeampi sekä tietoturvallisuus.

Olen tarkoituksella laatinut sivujeni CSS-tiedostot siten, että yksikään markkinoilla oleva selain ei kaikkia määrityksiä pysty näyttämään, mutta tällä tavalla tulee esille selainten parhaat ominaisuudet tulevat esille. Lähimmäksi toivomaani lopputulosta pääsee joissakin suhteissa Opera 4.x+:lla; ja toisissa asioissa IE 5.x:llä tai Mozillalla, jotka kumpikin osaavat asioita, joita IE 4.01 ei osaa.

[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