Etsi sivuiltani:

	Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > Q Millaisia CSS-totetusvirheitä on Opera-selaimissa

Q Millaisia CSS-totetusvirheitä on Opera-selaimissa

Aiheet

• Yleistä
• Opera 5.+:n ongelmia

Yleistä

Koska Opera on vasta 5.0 versiosta asti saatavissa puoli-ilmaisena mainosrahoitteisena (adware) käsittelen lähinnä vain Opera 5.x+ -selaimia. Viittaan Opera 3.x -sarjaan vain sikäli, että miten sivut voi saada toimimaan siinä edes siedettävästi.

Opera 5.+:n ongelmia

Operassa on erittäin hieno erilaisten medioiden tuki, mutta juuri niiden käyttöön liittyy eräitä ongelmia, jotka tulee tietää. Olen maininnut joitakin näkökulmia sivulla 6. Jotta sivut toimivat hienosti sekä näytöllä että printattuna, em. sivulla mainittujen seikkojen vuoksi on otettava huomioon myös seuraavat asiat:

1. Selain tukee media="projection". Jos näytölle tarkoitetut tyylisivut on annettu media="screen" tai vastaavia medialohkoja käyttäen selain ei saa kokoruututilassa lainkaan CSS:ää. Jos sinulla on Opera 4.x+ ja painat F11-näppäintä CSS-sivut näyttävät merkittävästi erilaisilta (minulla on joitakin ohjeita sen käyttöön ja joka sivulla lyhyet ohjeet tässä tilassa navigoimiseen).

2. Opera käyttäytyy virheellisesti, jos mediatyypit annetaan seuraavilla tavoilla:

   • Jos viitataan samaan tiedostoa seuraavaan tapaan:

     <link media="screen" type="text/css" href="Screen.css">
<link media="projection" type="text/css" href="Screen.css">
     <!-- Sen sijaan seuraava toimii: -->
     <link media="screen, projection" type="text/css" href="Screen.css">

     Ongelmana alimmassa on se, että Netscape 4.x ei tue useita yhtä aikaa annettuja media-attribuutin arvoja. Mikäli tietty tyylisivu on tarkoitus antaa sekä Opera että Netscape 4.x -selaimille, mediatyypille projection tulisi antaa eri CSS-tiedosto.
   • Jos medialohko ei täsmällisesti viittaa annetun media-attribuutin arvoon:

     <link media="screen, projection" type="text/css" href="Screen.css">
     ...
     /* Ei toimi seuraavien medialohkon kanssa: */
     @media screen {...}
@media projection{...}
     /* Se toimii vain seuraavan medialohkon kanssa:*/
     @media screen, projection{...}

     Ratkaisun ongelmana on se, että toisinaan samaa tiedostoa voi tarvita sekä yhden että useamman mediatyypin kanssa. Tällöin tarvitaan useita medialohkoja samalle CSS:lle. Esim. jotta medialohkot toimisivat sekä <link media="screen, projection" type="text/css" href="Screen.css"> että <link media="screen" type="text/css" href="Screen.css"> kanssa täytyy laittaa samalle CSS:llä kaksi medialohkoa:

     @media screen {
#linkSet a {color:red}}
@media sceen, projection{
#linkSet a {color:red}}

   • Attribuutti media ei toimi oikein @import at-säännön kanssa, mikäli tuontisäännölle ei ole annettu mediatyyppiä (esim. @import url() print;). Se taasen ei toimi kaikissa selaimissa (Opera-selaimissakin vasta 5.10 versiosta lähtien).

   • @media ei toimi Opera 3.x -sarjassa.

3. Mediatyypillä projection on ongelmana pitää "diat" yhtenäisinä. Jotta ylimääräisiltä sivukatkoilta voitaisiin välttyä annan kaksi ohjetta:

   • Kirjoita tiukkaa koodia. Taulukoita ja listoja lukuun ottamatta olen kirjoittanut aloitus- ja päätösmerkkaukset peräkkäin.
   • Jos selain on katkaissut dian ensimmäisen kappaleen sisällä tai jälkeen olen lisännyt tyhjän DIV elementin, jolle olen antanut class-attribuutin (olen määritellyt mediatyypeille print ja screen div.noScreen {display:none}).

Medialohkoja voi käyttää tilanteissa, joissa MS IE 4.0 Windows halutaan antaa tietty CSS, jota ei anneta uudemmille selaimille. Samoin niillä voi kirjoittaa sellaista CSS:ää, jota ei haluta Netscape 4.x ja MS IE 5.0 Mac -selaimille, sillä kyseiset selaimet ohittavat kaiken medialohkojen sisällä olevan CSS:n. Olen antanut esimerkin sivulla, joka käsittelee MS IE ongelmia. Kun suunnittelee mediatyyppien käytön viisaasti, niillä saa aikaan erityisesti Operalla hienoja ratkaisuja.

Toinen merkittävä ongelma on se, että kiinteästi or absoluuttisesti määriteltyjen elementtien kanssa z-index ei toimi aina oikein. Ongelma koskee aina tiettyjä upotettuja objekteja (ne on upotettu Web-sivuille OBJECT, APPLET ja EMBED elementtien avulla) sekä Opera 6.x asti myös lomakekontrollielementtejä (EMBED, IFRAME, INPUT, ISINDEX, OBJECT, SELECT, TEXTAREA). Näiden elementtien päälle ei voi laittaa tekstiä tai kuvia. Ongelman voi välttää siten, että suunnittelee sivut niin, että ongelmalliset elementit ja muu sisältö eivät mene milloinkaan päällekkäin - erityisen huolellinen tulee olla position:fixed määriteltyjen elementtien kanssa. Uusituissa sivuissa navigoinnit ovat oikeassa ja vasemmassa reunassa ja muu sisältö keskellä, jolloin ongelmia ei juuri synny. Lomakekontrollielementtien suhteen ongelma on korjattu Opera 7.0 Beta 1:ssä.

Selaimella on myös pieni ongelma visibility-ominaisuuden kanssa. Opera piilottaa aina elementit, joilla on visibility:visible, jos ne ovat sellaisten elementtien sisällä, joille on määritelty visibility:hidden (ks. engl. testisivu) (MS IE 6.0 Windows toimii aina oikein, mutta uudet Netscape/ Mozilla -selaimet joskus väärin). Asia on korjattu Opera 7.0 Beta 2:ssa.

Opera 5.x ja Opera 7.0 Beta 2 saattavat vaakatasossa asemoida väärin sisäkkäiset absoluuttisesti asemoidut elementit. Ominaisuus left ei aina toimi. Opera 6.x:n kohdalla havaitsin, että position:absolute + sisäkkäin relativiisesti asemoiduista elementeistä asemointi ei toiminut sisimmille elementeille.

Lisäksi position:fixed suhteen on eräitä erityisongelmia (jos sinulla on Opera 5.x+ minulla on testisivu, joka demonstroi näitä ongelmia):

1. Yhdistelmä position:fixed + position:absolute ei toimi virallisissa Opera 7.0x -selaimissa (Beta 2:ssa sisäkkäiset absoluuttisesti asemoidut elementit eivät toimi oikein). Seurauksena on mm. se, että kiinteästi asemoitujen elementtien sisällä olevien linkkien taustavärit eivät :hover tilassa pysy aina hiiren liikkeen mukana.

2. Asemointi right käytettäessä Opera 7.0 Beta 1 - Opera 7.01 saattavat siirtää elementin liikaa oikealle ja Opera 7.02:ssa elementti saattaa joskus piiloutua.

3. Opera 6.0x -selaimissa padding-top ja padding-bottom ominaisuudet elementille BODY vaikuttavat bottom ominaisuuteen. Esim. div#fixedNavigation {position:fixed; bottom:0; left:0;} yhdessä body {padding-top:50px; padding-bottom:50px;} kanssa aiheuttavat sen, että kiinnitetty elementti on 100px (katselu)ikkunan alareunasta (tätä ongelmaa ei ole 5.x-sarjassa). Tämän ongelman voi välttää, mutta ainakaa Opera 7.0 Beta 2:ssa ongelmaa ei ole (en ole testannut Beta 1:ssä).

4. Asemoidun elementin sisällä oleva kiinteästi asemoitu elementti rullautuu sivun mukana (tätä ongelmaa ei ole Netscape 6.1+:ssä; Opera 7.0 Beta versioissa elementti saattaa häviää kokonaan näytöltä tai sen paikka muuttuu hieman mikäli elementtiä klikataan). Tämän ongelman voi välttää samalla tavalla kuin seuraavakin ongelma.

5. Jos kiinteäksi määritelty elementti (esim. position:fixed; bottom:0; left:0; z-index:3) on pitkällä asiakirjan sisällä, se saattaa hävitä kokonaan näytöltä. Kokeilin Opera 7.0 Beta 2:lla eikä ainakaan tällä sivulla ongelmaa esiintynyt. Ongelma voidaan välttää, jos vain sivun alussa olevia elementtejä määritellään kiinteiksi ja ne ovat elementin BODY välittömiä lapsielementtejä.

6. Jos kiinteäksi määritelty elementti on ikkunan alareunassa, min-height ominaisuutta ei voi käyttää. Korjattu Opera 7.0 Beta 2 lähtien.

7. Dynaamisten valikoiden suhteen position:fixed -kiinnitetyt valikot eivät toimi niin kuin niiden pitäisi (ja kuten ne toimivat Netscape 6.1+ ja muissa vastaavissa Mozilla Gecko -pohjaisissa selaimissa). Tätä ongelmaa ei voi kiertää, mutta se on korjattu Opera 7.0 Beta 2:ssa.

8. Jos kiinteästi määritellyillä elementeillä on taustakuvia, Opera 7.x -sarjaa vanhemmat selaimet rullaavat ne sivun mukana ellei taustakuvia ole määritelty kiinteiksi (background-attachment:fixed). Jos ne on määritelty kiinteiksi Opera laskee niiden paikan CSS2-spesifikaation vastaisesti elementin sijainnin perusteella. Asia on osittain korjattu Opera 7.0 Beta 1:ssä, sillä taustakuvia ei tarvitse määrittää kiinteiksi (asemointi ongelma on jäljellä, mutta Opera 7.0 Beta 2:ssa sekin on korjattu). Tämän ongelman voi ratkaista vain määrittelemällä ehdollisen CSS:n.

9. Jos linkeille on määritelty dynaamiset näennäisluokat (a:hover ja a:active) ja niille reunukset, reunukset toivat vain sivun alussa. Ongelma on korjattu Opera 7.0 Beta 2:ssa.

10. Jos kiinteiksi määritellyillä elementeillä on position:absolute määriteltyjä jälkeläiselementtejä, tämä asia tuo ongelmia joidenkin Mozilla Gecko -selainten kanssa (kyse ei ole Opera vaan joidenkin Mozilla Gecko -pohjaisten selainten virheestä). Tätä ongelmaa ei voi kiertää muuten kuin määrittämällä joillekin Gecko-selaimille ehdollinen CSS, jossa asemointi on määritelty position:fixed avulla (koska Gecko-selainten välillä on keskinäisiä eroja position:absolute ei anna yhtäläistä lopputulosta kaikille niille Gecko-selaimille, jotka tukevat position:fixed).

11. Position:fixed ei toimi 5.x-sarjassa elementeille IFRAME, OBJECT ja EMBED, mutta asia on korjattu 6.x-sarjassa.

12. Lomakekontrollielementit liikkuvat pystysuunnassa pikselin verran kun sivua vieritetään. Asia on korjattu Opera 7.0 Beta 1:ssä.

13. Sivun sisäiset linkit eivät toimi aivan odotetusti. Minun täytyi laittaa sivun alkuun viittaava linkki () välittömästi ankkurin (<a name="Top" id="Top"></a>) jälkeen, sillä muutoin Opera ei mennyt täsmälleen sivun alkuun. Asia on korjattu Opera 7.0 Beta 1:ssä.

Kolmas maininnan arvoinen piirre on xx-small-xx-large ominaisuuksien sangen outo toteutus, joka lähinnä muistuttaa MS IE 5.x Windows -selainten toteutusta (ks. Model8c.html).

Koska Opera-selaimissa ei yhtä laaja-alaisesti toimivaa toimintamoodia (jonkintasoinen "DTD-kytkin" tulin 7.x -sarjaan) kuten uusissa MS IE ja Netscape 6.x+ selaimissa, se ei joissakin toteutuksissa voi toimia yhtä tiukasti CSS2-spesifikaation mukaan kuin MS IE 6.0 Windows ns. standard-compliant -moodissa. Opera kaipaisi laajempialaista DTD-kytkintä.

Käsittelen pienempiä puutteita eri asiayhteyksissä, niistä voi lukea esim. seuraavilta sivuilta:

• Sivustojeni toimivuus eri selaimilla.
• Sivulla 7 käsittelen linkkeihin liittyviä ongelmia.
• Sivulla 8 käsittelen joitakin taustakuvaongelmia.
• Sivulla 10 käsittelen ominaisuuden width ongelmista taulukoissa.

Koska Opera on visuaalinen selain, se ei luonnollisestikaan tue CSS2 kuulotyylisivuja. Laajimpana CSS2:n visuaalisen median tuen puutteena voidaan pitää sitä, että selain ei tue @font-face at-sääntöä. Muut puutteet ovat siellä täällä olevia joidenkin yksittäisten arvojen ja eräiden sääntöjen tuen puuttumisia, jotka olen maininnut englanninkielisissä CSS-taulukoissani (taulukko 1, taulukko 2).

Mikäli Opera on tarvetta tunnistaa ja antaa sille osittain oma CSS, eräällä toisella sivulla on selainten tunnistusvihjeitä.

Opera 7.0 Beta 2:ssa on muista selaimista poikkeavia asetuksia:

• Jos Opera 7.0 Beta 2 määrittelee sekä list-style-type että list-style-image Opera esittää kaksi listamerkkiä, jos list-style-type ominaisuuden arvo on muu kuin none.
• Jos taulukoille ei ole määritelty soluvälejä, oletusarvona on nolla (muissa selaimissa 2 pikseliä).

Opera 7.x -sarjan selaimet tulostavat sivut huonommin kuin 6.x-sarjan selaimet. Beta 1:ssä tulostus on kohtalainen, mutta ainakin 7.03:een asti huono seuraavissa suhteissa:

• Reunukset eivät tulostu (toimii Beta 1:ssä).
• :first-letter tulostuu väärin. Väri voi tulla näyttöesityksen mukaan ja 7.x -sarjassa asemointi on usein pielessä (asemointi on korjattu Opera 7.10:ssä).
• Teksti voi mennä päällekkäin (samaa ongelmaa lievempänä on toisinaan myös näytölläkin; ongelma on on ainakin osittain korjattu 7.10:ssa).