Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Yleisinfo > Sivujeni toimivuus eri selaimilla > Selainarviointien yksityiskohdat (jakso 1b/4)

Sivun jaksot:

Introjakso

Edellinen jakso

Seuraava jakso

Viimeinen jakso

Selainarviointien yksityiskohdat

Opera 5.1+ (takaisin taulukkoon):

• Yleinen käyttäjäystävällisyys:

  1. Sivun alkuun pääsee yläoikealla olevalla paikoillaan pysyvällä linkillä. Samoin eräät muut linkit pysyvät paikoillaan.
  2. Opera 7.0 Beta 2 dynaamiset valikot voi asettaa pysymään kiinteinä ja kaikki käyttäjäystävällisyyteen liittyvät piirteet toimivat. On tosin huomautettava, että jos valikot eivät olisi kiinteinä, selain asemoisi päävalikon väärin (tätä ongelmaa ei ole Opera 7.01+:ssa). Opera 7.0 Beta 1:ssä toimivuus on muuten Opera 6.x kaltainen, mutta selain tukee ominaisuutta cursor. Kun sivua rullaa alaspäin linkkien reunaviivat eivät aina näy, mutta se ei heikennä toiminnallisuutta. Ongelma on lähinnä ulkoasuun liittyvä, mutta niin vähäinen ettei sen perusteella ole syytä vähentää mitään pisteitä.
  3. Valikot toimisivat huonommin Opera 7.01-7.2x:ssä kuin Beta 2:ssa, jos varjot olisi asemoitu absoluuttisesti. Varjoja ei tällöin voisi käyttää, koska kaikki testaamani Opera 7.x -sarjan viralliset selaimet asemoivat yhdistelmän position:fixed + position:absolute väärin. Jos päävalikko olisi em. tavalla asemoitu linkkien taustavärit eivät :hover tilassa pysyisi hiiren liikkeen mukana. Valikot on asemoitu position:fixed + position:relative, joka toimii kaikissa Opera 7.x -sarjan virallisissa selaimissa.
  4. Koska sisäkkäiset absoluuttisesti määritellyt elementit eivät toimineet oikein Opera 5.x -selaimissa, jouduin määrittelemään dynaamiset valikot kiinteiksi. Miten luoda dynaamisia valikoita pystyy avaamaan kunnolla vain sivun alussa. Muulloin kuin sivun alussa linkit toimivat vasta sitten kun valinnan jälkeen liikuttaa sivua ylös- tai alaspäin (tällöin alivalikkoihin siirtyminen on mielekästä vain nuolia käyttäen tai valikon käyttäminen edellyttää rullahiirtä).
  5. Huonon toimivuuden vuoksi dynaamiset valikot ovat toimivampia, jos ne rullautuvat sivun mukana. Tästä syystä Opera 6.x:lle on erilainen CSS ja siinä vain erityislinkit ovat kiinteästi asemoituja.
  6. Opera 5.x selaimissa dynaamiset valikot eivät toimi tilanteissa, joissa selainnuolia on käytetty.
  7. Opera 5.x+ EPOC (Symbian OS) dynaamiset valikot ja erityislinkit on asemoitu absoluuttisesti. Varjot eivät ole lainkaan käytössä.

• Nopeus:

  1. Opera 5.x+ rullaa CSS-sivuilla valikot selkeästi nopeammin kuin Mozilla 1.1 (ks. lisähuomautukset Mozilla 1.1:n kohdalta).

• Ulkoasu:

  1. Yleisesti ottaen Opera 7.x laskee elementtien dimensiot ja asemoinnit edellisiä versioita tarkemmin (tosin Beta 2:ssa on vakava moka). 7.x-sarjan selaimissa aimmat GIF-muotoiset taustakuvat eivät toimisi, sillä Opera 7.x ei tue huonolaatuisia taustakuvia (heikkolaatuiset kuvat on nykyisin vaihdettu parempiin). PNG-kuvat toimisivat ja niiden avulla voisi luoda puoliläpinäkyviä varjoja (myös Opera 6.x -sarja tukee PNG-kuvien läpinäkyvyyttä mutta vanhemmat selaimet eivät). Opera 7.0 Beta 2:n ulkoasupisteet on laskettu sellaista CSS:ää käyttäen, jossa ulkoasu olisi paras.
  2. Opera 6.0x, MS IE 6.0 ja Mozilla 1.1 välillä on vain muutaman pikselin suuruisia eroja lukuun ottamatta lomake-elementtejä, joissa ero olisi leveydeltään yhteensä kuuden pikselin suuruinen ilman keinotekoisia korjauksia.
  3. Jouduin tekemään Opera 5.x selaimelle keinotekoisen korjauksen. Opera rullasi pyöreitä taustakuvia sivun mukana. Kun määrittelin niille background-attachment:fixed, Opera ei niitä rullannut, mutta se toteuttaa tässä tapauksessa background-position CSS-spesifikaation vastaisesti. Lisäksi varjojen taustakuvat eivät toimi.

Mozilla 0.9.1+/ Netscape 6.1+/ Konqueror 3.1: (takaisin taulukkoon)

• Yleinen käyttäjäystävällisyys:

  1. Kaikki täyteen arvioon edellytettävät käyttäjäystävällisyyteen liittyvät seikat toimivat lukuun ottamatta sitä, että erityislinkkien dynaamiset näennäisluokat (esim. a:active) toimivat Mozilla selaimilla vain satunnaisesti.

  2. Mozilla 1.3x/ Mozilla 1.4x sivut toimivat hieman nykien eli yleistoimivuus on heikompi kuin Mozilla 1.1 selaimessa. Navigaatiota ei voinut niillä selaimilla pitää kiinteänä. Konqueror 3.1:llä ongelmaa ei ole, mutta valikot tuli ehdottomasti olla kiinteästi asemoituja. Kiinteästi määriteltyjen elementtien sisällä olevat absoluuttisesti asemoidut elementit jäävät kiinteästi määriteltyjen elementtien alle.

  3. Tosin tilarivi ei ole toiminut testaamassani Mozilla 1.1a:ssa (Build ID 2002061104), mutta kyse on vain tietyn päivämäärän omaavasta versiosta. Tilarivi toimii oikein uudemmissa versioissa n. 8/2002 lähtien.
  4. Ulkoasussa ei ole yleistä käyttäjäystävällisyyttä heikentäviä seikkoja.

• Nopeus:

  1. Mozilla 1.1 rullasi CSS-oppaan valikot aiemmin suurin piirtein yhtä nopeasti kuin Opera 5.x+. Ero Operan eduksi oli hyvin pieni, juuri ja juuri havaittavissa. Kun tein hieman monimutkaisemman rakenteen, Mozillan vauhti hiipui. Valikot pystyisi ehkä rullaamaan vieläkin nopeammin, sillä päävalikoissa esiintyy pientä viivettä. Tästä syystä en ole antanut millekään modernille selaimille 9,6 korkeampaa arvosanaa. Koska en ole antanut millekään modernille selaimelle 9,6 suurempaa arvosanaa käytännössä maksimikokonaisarvio, minkä selain voi saada on 9,9. Joillakin muilla aihepiireillä on pienemmät valikot. Opera rullaa nekin selkeästi Mozillaa nopeammin ja niillä sivuilla 10,0 on teoriassa mahdollista saavuttaa.
  2. Konqueror 3.1 rullaa valikoita suurin piirtein Mozilla 1.1:n vauhtia.
  3. Netscape 6.1x-6.2x/ muut vastaavat Mozilla selaimet toimivat muuten Mozilla 1.1a selaimen tavoin, mutta viiveet haittaavat.

• Ulkoasu:

  1. Olen käyttänyt varjoissa yhtä CSS3:een ehdotettua piirrettä (opacity, joka on tuettu Mozillassa -moz-opacity ominaisuutena), mutta en ole ottanut sitä arvostelussani huomioon. Joillakin vanhemmilla versioilla (kuten Mozilla 0.9) oli vaikeuksia puoliksi läpinäkyvien varjojen kanssa. Mozilla 0.9:lle on puoliläpinäkyvät varjot toteutettu puoliläpinäkyvien PNG-kuvien avulla.

MS IE 5.x Mac (takaisin taulukkoon):

• Yleinen käyttäjäystävällisyys:

  1. Sivun alkuun pääsee yläoikealla olevalla paikoillaan pysyvällä linkillä.
  2. Valikoiden kiinteä asemointi ei testien mukaan toimi. Siksi valikot rullautuvat sivun mukana kuten useimmiten käytetyissä selaimissakin.

• Nopeus:

  1. Saamani s-postin mukaan valikot toimivat hieman hitaasti. Koska en voi verrata asiaa Windows-selainten kanssa, laitoin arvion samaksi kuin MS IE 5.x+ Windows -selaimilla.

• Ulkoasu:

  1. Dynaamisten valikoiden ulkoasu on muuten kunnossa, mutta koko valikko siirtyy (ilman korjauksia) hieman oikealle ja varjojen taustakuvat eivät toimi (arvioitu MS IE 5.2 Mac otetuiden kuvakaappausten perusteella).
     
     
     

MS IE 5.0+ Windows (takaisin taulukkoon):

• Yleinen käyttäjäystävällisyys:

  1. Ilman ylimääräistä JavaScript-koodausta dynaamiset valikot voi avata MS IE 5.x+ -selaimissa vain sivun alussa, sillä rullautuvat sivun mukana, mikä heikentää yleistoimivuutta. Lisäsin MS IE 5.x+ -selaimille skriptin, jonka seurauksena valikot seuraavat sivun rullausta. Koska tässä systeemisssä valikot seuraavat rullausta viiveellä, systeemi ei ole yhtä hyvä kuin se, että valikot olisi kiinnitetty kiinteästi position:fixed käyttäen.

• Nopeus:

  1. Valikot toimivat melko hitaasti. Ne toimivat arviolta 5-10 kertaa hitaammin kuin Opera 6.x selaimissa. Havaittava viive poistuu vasta n. 1,5 GHz suorittimilla.

• Ulkoasu:

  1. MS IE 6.0 -selaimessa CSS-oppaan valikko on käytännössä virheetön.
  2. MS IE 5.x valikoiden ulkoasut eivät ole yhtä hyviä kuin uudemmissa versioissa, mutta erot ovat hyvin pieniä. Elementin BUTTON ominaisuus text-align ei toimi.

MS IE 4.0 Windows (takaisin taulukkoon):

• Yleinen käyttäjäystävällisyys:

  1. MS IE 4.0 Windowsissa dynaamiset valikot rullautuvat sivun mukana.
  2. Näennäisluokkalle :hover ei ollut mielekästä käyttää taustaväriä, koska linkit eivät ole koko leveydeltään aktiivisia.

• Nopeus:

  1. Valikot toimivat sangen hitaasti.

• Ulkoasu:

  1. Ulkonäkö on virheellinen pääosin siksi, että selain ei tue oikein display:block.
  2. Valikkolohkon korkeus on korjattu keinotekoisesti.

Netscape 6.0x, Mozilla 0.6 (takaisin taulukkoon):

• Yleinen käyttäjäystävällisyys:

  1. Netscape 6.0/6.01 selaimissa dynaamiset valikot rullautuvat sivun mukana.

• Nopeus:

  1. Valikot toimivat erittäin hitaasti.

• Ulkoasu:

  1. Yleisesti Mozilla 1.1a:n kaltainen, mutta puoliläpinäkyville varjoille on ehdollinen CSS. Netscape 6.0 ei saa puoliläpinäkyviä varjoja (selain kaatui puoliläpinäkyvistä varjoista).

Netscape 4.x (takaisin taulukkoon):

(Netscape 4. ei ole enää dynaamisia valikoita, vaan arvostelu perustuu aiemmin olleisiin sivuihin. Tein yhdestä mallisivun.)

• Yleinen käyttäjäystävällisyys:

  1. Miten luoda dynaamisia valikoita on täysin mahdollista saada toimimaan. Jos niitä käytettäisiin ne rullautuvat sivun mukana kuten useimmilla selaimilla.
  2. Linkit eivät olisi yhtä laajalta alueelta aktiivisia kuin uusimmissa Netscape/Mozilla-selaimissa koska display:block ei toimi oikein.

• Nopeus:

  1. Jos CSS-sivuilla käytettäisiin Netscape 4.x:llä toimivia dynaamisia valikoita ne toimivat nopeammin kuin yhdessäkään uudemmassa selaimessa. Tosin selain saa testivalikossa selvästi vähemmän ulkoasua koskevaa CSS:ää kuin uusimmat selaimet, joten nopeus ei ole täysin vertailukelpoinen.

• Ulkoasu:

  1. Tein testivalikon ulkoasun kohtalaisen hyväksi, joskaan en täydelliseksi. Jotta valikon ulkoasun ja sen jälkeisen tekstin saa kohtuullisen hyväksi, valikkoon tätyy lisätä noin kaksikertainen määrä koodia. Koko dokumentin ulkoasun parantaminen lisäisi samaan tapaan dokumentin koodimäärää (paljon HTML-attribuutteja ja -elementtejä), mikä tekee Netscape 4.x -selainten tukemisen epämielekkääksi.

Opera 4.x (takaisin taulukkoon):

• Yleinen käyttäjäystävällisyys:

  1. Valikot ja niiden yhteydessä olevat linkit oli periaatteessa asemoitu samoin kuin Opera 5.x kohdalla, mutta valikot eivät yksinkertaisesti toimi oikein. Koska selaimen voi päivittää nopeasti uudempaan, en ole ottanut Opera 4.x -sarjan selaimia suuremmin huomioon. Koska toimivuus oli erittäin huono, selain ei ansaitse edes yhtä tähteä.

• Nopeus:

  1. Opera 4.x:ssa valikot toimivat hiiren liikkeellä erittäin suurella viiveellä.

• Ulkoasu:

  1. Valikoiden tausta- ja reunusominaisuuksia puuttuivat.
  2. Elementtien mitoituksissa oli virheitä.
  3. Selain teki selviä asemointivirheitä.

Sivun jaksot:

Introjakso

Edellinen jakso

Seuraava jakso

Viimeinen jakso