[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOppaan lisäsivut > Netscape 6.x+:ään liittyviä ongelmia (jakso 2/2)

Netscape 6.x+:aan liittyviä ongelmia

Netscape 6.0:ssa on paljon huonompi CSS-toteutus kuin uudemmissa versioissa ja Mozilla 0.9+:ssa. Se ei tue position:fixed. Sille saattaa joutua tekemään oman CSS:n. Alla on yksi tapa, jolla voidaan selaimen päivämäärää (Build ID) perustuen erotella Netscape/ Mozilla selaimia toisistaan.

<script type="text/javascript" language="Javascript">
<!--
Gecko = (navigator.product == ('Gecko'));
Date1 = (Gecko && parseInt(navigator.productSub)>=20020728);
Date2 = (Gecko && parseInt(navigator.productSub)<=20020727);
if (Date1){
document.writeln('\<lin'+'k\ rel=\"stylesheet\"\ type=\"text\/css\"\ href=\"..\/Css\/MozillaUusimmat.css\"\ media=\"screen\"\ \/\>');}
if (Date2){
document.writeln('\<lin'+'k\ rel=\"stylesheet\"\ type=\"text\/css\"\ href=\"..\/Css\/MozillaVanhemmat.css\"\ media=\"screen\"\ \/\>');}
//-->
</script>

Em. esimerkissä "erotuslinja" kulkee tiettyjen Mozilla 1.1:n / Netscape 7.0 aliversioiden kohdalla. Esim. Mozilla Gecko -selainten tukema kokeellinen CSS3-toteutus -moz-opacity kaatoi Netscape 6.0:n ja se toimi huonosti Netscape 6.1 tasoisessa Mozillassa ja Netscape 6.2.1:ssä. Tuosta ja eräästä toisesta syystä laitoin omissa CSS-tiedostoissani yhden erotuslinjan juuri edellä esitettyyn kohtaan (voit tutkia käyttämääni lähdekoodikatkelmaa[S]).

Netscape 6.x+:n päiväykset (Build ID) ja vastaavat Mozillan versionumerot ovat seuraavat:

DevEdge: Netscape Gecko User Agent Strings; Mozilla org.: user-agent strings.

Päivämäärien sijaan voi käyttää Mozillan versionumeroa. Alla kaksi Mozilla Gecko -selainten tunnistusjonoa ja niiden pohjalta tehty tunnistusehto:

Netscape 6.2.1:
Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1
Mozilla 0.9.4:
Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.4) Gecko/20011128

Moz094=(navigator.userAgent.indexOf('0.9.4')!=-1);

Tosin tuon tyyppiset tunnistukset eivät toimi Netscape 6.0 kohdalla, sillä se ilmoittaa vastaavan Mozilla-selaimen eri tavalla, kuten alla olevasta tunnistusjonosta käy ilmi (laitoin alapuolelle mahdollisia tunnistusjonoja:

Mozilla/5.0 (Windows; U; Win98; en-US; m18) Gecko/20001108 Netscape6/6.0

navigator.userAgent.indexOf('m18')!=-1 /* En tiedä koskeeko tämä Netscape 6.01 -selainta. */
navigator.userAgent.indexOf('Netscape6\/6.0')!=-1 /* Koskee myös Netscape 6.01 selainta. */

Koska on olemassa erityyppisiä Mozilla versioita (esim. Mozilla 0.9.1 ja Milestone 18), Build ID -tyyppiset tunnistukset ovat kattavampia. Joka tapauksessa Mozilla Gecko -selaimet on mahdollista erotella niin tarkasti kuin kulloinkin on tarpeen.

Jos haluat voit erottaa Netscape -selaimet Mozilla -selaimista esim. lisäehdolla navigator.vendor == ("Netscape7") ja antaa siten Netscape -selaimille eri päivämäärän kuin Mozilla-selaimille, esim.:

NetscapeGecko = ((navigator.vendor == ('Netscape6') || navigator.vendor == ('Netscape7'));
...
else if (Mozilla101&&NetscapeGecko)
...
else if (Mozilla11&&!NetscapeGecko)

Gecko-selainten erottelemiseen on paljon syitä. Esim. joillakin Netscape 6.1+/ vastaavilla Mozilla -selaimilla position:fixed määriteltyjen elementtien sisällä olevat position:absolute määritellyt elementit eivät asetu oikein. position:fixed määritelty esi-isäelementti luo säilytinlohkon, josta käsin position:absolute määritellyt elementit tulisi laskea, mutta eräät versiot eivät ota position:fixed määritellyn elementin asemointia aina oikealla tavalla huomioon. Alla olevassa Mozilla 0.9:llä otetusta kuvakaappauksessa position:absolute asemoitujen linkkien tulisi asettua keltaisen position:fixed asemoidun lohkon sisälle (testieni perusteella tämä virhe on korjattu ainakin Netscape 6.2.1 lähtien).

div.pageGroup, div#allPages, div.allPages2, div#PagesFi, div#PagesEn {position:absolute} /* PagesFi ja PagesEn ovat lohkon allPages jälkeläiselementtejä */
div[class="pageGroup"], div[id="allPages"], div[class="allPages2"] {position:fixed !important}
div#allPages {left:6px; top:1px;}
div#PagesFi, div#PagesEn {z-index:17; left:2px; top:2px;} /* ne Mozilla Gecko 0.9 -pohjaiset selaimet, joita olen testannut laskevat näiden lohkojen asemoinnin elementin HTML yläoikealta jättäen huomioimatta asemoinnin, joka on annettu kiinteästi määritellylle DIV-elementille, jonka id-attribuutin arvo on allPages */
Mozilla 0.9

Uusimmillakin versioilla on joitakin ongelmia dynaamisten valikoideni esittämisessä (lue ongelmista eräältä englanninkieliseltä testisivulta[S]).

Jotta elementit asemoituisivat oikein kaikissa moderneissa selaimissa, Gecko-selaimille saattaa tarvita määritellä ehdollinen CSS. Sitä tulisi laatia kuitenkin mahdollisimman vähän. Suosittelen lukemaan myös Opera[S] and MS IE[S] selaimia koskevia ongelmia käsittelevät .

Sellaiset ja dynaamiset alivalikot, jotka toteutetaan vain CSS:n avulla eivät Netscape 6.0 -selaimissa toimi (ks. mallit[S]) eivät toimi. Se ei ole kuitenkaan mikään merkittävä ongelma, sillä dynaamiset valikot on paljon järkevämpää toteuttaa DOM1:n mukaisella JavaScript/ ECMAScript + CSS -koodauksella (käsittelen niitä tarkemmin toisella sivulla[S]).

Em. ongelma liittyy IFRAME elementtiin, jonka kanssa monilla Netscape 6.x/ Mozilla selaimilla on vaikeuksia (z-index ominaisuus ja asemointi eivät toimi kunnolla). Jotkut versiot eivät asemoi niitä oikein. Netscape 6.0 tulostaa ne vaikka niille olisi määritelty display:none. Netscape 6.1+-6.2.1 kaatuvat tulostettaessa sivuja, jos sivuilla on näille elementeille määritelty display:none niiden piilottamiseksi. Kaikki IFRAME elementtiin liittyvät ongelmat on ratkaistu uusimmissa Mozilla Gecko -selaimissa.

Netscape 6.1+:ssa on hieno normaalin näyttöesityksen CSS-toteutus. Oikeastaan suurin ongelma selaimen kohdalla on se, että se tarvitsee enemmän CSS:ää kuin muut modernit selaimet, sillä sen HTML-oletusasetukset eivät ole identtiset MS IE - ja Opera-selainten kanssa. Seuraavat asiat on erityisesti huomattava:

[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