[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Oppaan lisäsivut > P Millaisia CSS-totetusvirheitä on Netscape/Mozilla-selaimissa

Netscape 4.x:ään liittyviä ongelmia

Netscape 4.x:n ohittaminen

Suoran CSS.n (style="...") liittäminen on ongelmallista. Toisaalta sen käyttö on huono asia, sillä Netscape 4.x saattaa kaatua tai käyttäytyä omituisesti. Toisaalta sen käyttö on joskus välttämätöntä, koska linkitetty CSS ei aina toimi. Havaitsin tämän asian testatessani dynaamisia valikoita[S]. Jos suora CSS ei sovi muille selaimille, ne voivat saada ulkopuolisten CSS-tiedostojen avulla sopivan CSS:n, jos ulkoisissa tiedostoissa olevissa CSS-kuvauksissa käytetään !important sääntöä. Sääntöä käytettäessä on kuitenkin syytä välttää säännön ylikuormittamista (moneen kertaan uudelleen määrittämistä), sillä selaimet eivät aina hyväksy ylikuormitettuja sääntöjä.

Monissa tilanteissa on järkevää ohittaa Netscape 4.x -selaimet. Periaatteessa ne voi ohittaa käyttämällä tuotisääntöäe[S][Pw] ja yhdistämällä se JavaScript-koodaukseen. Koska Opera 4.x+ -selaimisa on moodi Identify Mozilla 4.x/Esittäydy: Mozilla 4.x skriptin ehto tulisi laatia siten, että Opera ei lue Netscape 4.x:lle tarkoitettu aCSS:ää. Koodi tulee kirjoittaa seuraavaan tapaan:

<script language="JavaScript" type="text/javascript">
<!--
if (document.layers) /* Mitkään muut kuin Netscape 4.x -sarjan selaimet eivät tue tätä metodia, joilloin Opera kuten muutkin selaimet ohittavat lohkon, joka on tämän ehdon jälkeen (annan edempänä toisen vaihtoehdon) */
{document.write('\<\lin'+'k\ rel=\"stylesheet\"\ type=\"text/css\" href=\"Netscape4xStyle.css\"\>'); }
//-->
</script>
<style type="text/css">
<!--
@import url(muilleSelaimille.css);
-->
</style>

Sain tämän perusvihjeen Sam Marshallilta, mutta olen selaintunnistuksen suhteen muuttanut tunnistustapaa. Systeemi toimii nyt kaikilla selaimilla. MS IE, Opera ja uusien Netscape/ Mozilla Gecko -selaimilla ei haittaa mitään, vaikka JavaScript-tuki olisi kytketty pois päältä. Vain Netscape 4.x tarvitsee sitä ja tyylisivut eivät toimi Netscape 4.x -sarjan selaimissa, jos JavaScript ei ole päällä. Joissakin tilanteissa osa CSS:stä saattaa olla järkevää antaa JavaScript-koodin avulla. Käsittelen tällaisia tapauksia eräällä lisäsivulla, joka käsittelee dynaamisia valikoita[S].

Edellisesessä esimerkissä mainitun käytännön ongelmana on se, että medialohkojen[S] avulla toteutettuja mediatyyppivalintoja ei voi käyttää, jos tarkoitus on se, että CSS toimii myös Mac -selaimissa. MS IE Mac (koskee ainakin versioon 5.0 asti) ei nimittäen tue medialohkoja (@media {...} vaan se hyppää kaiken medialohkojen sisään kirjoitetun CSS:n ohi.

Opera-selaimissa on toinen erityisongelma. Se lukee aina kaikki @import at-säännön sisältämän CSS kaikille mediatyypeille, jos ei nimenomaisesti ole kerrottu mitä mediatyyppiä sääntö koske (koskee ainakin versioon 5.11 asti). Mediatyyppitarkennin (esim. @import url(...) screen;) toimii vain harvoissa selaimissa. @media ja @import at-sääntöjä ei tulisi käyttää ollenkaan, jos tarkoituksena on luoda CSS kaikille meditatyyppejä tukeville!

Parempi vaihtoehto samasta perusideasta on luoda Netscape 4.x -sarjan selaimille omia CSS-tiedostoja ja laittaa kommentit sellaisten tiedostojen ympärille, joita Netscape 4.x ei pidä lukea. Alla esitetty tapa tekee mahdolliseksi mediatyyppien toimivuuden myös Mac-selaimissa (koodi on tarkoitettu XHTML-dokumentteihin):

<script language="JavaScript" type="text/javascript">
 <!--
if (document.layers)
{document.writeln('\<lin'+'k\ rel=\"stylesheet\"\ type=\"text/css\"\ href=\"../Css/basicNetscape4.css\"\ \/\>');
document.writeln('\<lin'+'k\ rel=\"stylesheet\" type=\"text/css\"\ href=\"../Css/Netscape4SomeOtherSite.css\"\ \/\>');}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
if (document.layers)
{document.write('\<'+'!\-\-'); } /* Jos kommentteja ei luoda kahdessa osassa selaimet saattavat käsitellä niitä virheellisesti! Jos \-\- sijasta kirjoitetaan -- tarkistuspalvelu tulkitsevat koodin siten, että dokumenteissa on käytetty sisäkkäisiä kommentteja, jotka eivät ole sallittuja. */
//-->
</script>
<link rel="stylesheet" type="text/css" href="../Css/CssSitePrint.css" media="print" />
<link rel="stylesheet" type="text/css" href="../Css/CssSiteProjection.css" media="projection" />
<link rel="stylesheet" type="text/css" href="../Css/CssSiteScreen.css" media="screen" />
<script language="JavaScript" type="text/javascript">
<!--
if (document.layers)
{document.write('--'+'\>'); }
//-->
</script>

Olen havainut, että ensimmäisten ja viimeisten Netscape 4.x -sarjan selainten välillä on suuri luotettavuusero. Netscape 4.04 kaatuu hyvin helposti mutta Netscape 4.79 suhteellisen vakaa. Oletettavasti myös Netscape 4.6x on suhteellisen vakaa. Jos on tarpeen, on mahdollista myös tehdä eri CSS eri Netscape 4.x -sarjan selaimille. Alla olevassa esimerkissä Netscape 4.0x-4.5x ja uudemmat Netscape 4.x -sarjan selaimet saavat erilaisen CSS:n:

<script language="JavaScript" type="text/javascript">
<!--
if (document.layers)
{document.writeln('\<lin'+'k\ rel=\"stylesheet\"\ type=\"text/css\"\ href=\"../Css/basicNetscape4.css\"\ \/\>');}
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
/* Koska tässä tapauksessa tarvitaan tarkempi CSS, prosessiin kuuluu kaksi osaaecause. Tavoitteena on, että Opera voisi ohittaa kaikissa olosuhteisa Netscape 4.x -selaimille tarkoitetun CSS:n */
if (navigator.userAgent.indexOf('Opera')!=-1){} /* Koska Opera havaitsee tunnistusmerkkijonon, joka sopii sille se ohittaa seuraavan lohkon siinäkin tapauksessa että se teeskentelisi olevansa Netscape 4.x -selain. Toimii luotettavasti ainakin Opera 4.02+ lähtien. Vanhemmat Opera-selaimet eivät aina anna tätä tunnistusmerkkijonoa, joten niitä ei voi luotettavasti tunnistaa tällä tavoin. Periaatteessa myös document.getElementById voitaisiin käyttää, mutta saamani s-postin mukaan Netscape 4.x -selaimilla on toisinaan vaikeuksia ei-tuettujen metodien kanssa. */

else if (navigator.appName.indexOf("Netscape")!=-1 &&
navigator.appVersion.indexOf("4.7")>=0) /* Ilman ensimmäistä ehtoa lohko voisi koskea myös Opera-selaimia, jos ne esittäytyvät Netscape 4.7x -selaimina. */
{document.writeln('\<lin'+'k\ rel=\"stylesheet\" type=\"text/css\"\ href=\"../Css/Netscape4CssSite.css\"\ \/\>');}
//-->
</script>

Huomautus. JavaScript-koodauksen avulla on mahdollista tunnistaa myös muiden asioiden kuin nimen tai versionumeron perusteella, esim. näytön värisyvyyden ja koon perusteella ja siten luoda näytön ominaisuuksiin perustuvia CSS-tiedostoja. Sen sijaan vain harvat selaimet tarjoavat mahdollisuuden valita oletustyylisivun ja vaihtoehtoisen tyylisivun välillä. Voit etsiä JavaScript esimerkkejä yleisillä hakukoneilla (kuten Altavista ja Google) esim. avainsanoilla javascript+window+color depth jajavascript+window+size.

JavaScript-koodauksen vaihtoehtona on serveripuolen koodaus, joka ei ole riippuvainen siitä onko JavaScript-tuki päällä vai ei. Mutta serveripuolen koodilla ei voi testa, mitä piirteitä eri selainten JavaScript-tulkit tukevat, joten metodeihin perustuvat tunnistukset eivät toimi. Ainakin Opera voi helposti saada virheellisen CSS:n. JavaScript-koodauksella on helpompi ottaa huomioon tilanteet, joissa JavaScript-tuki on poissa päältä. Käsittelen sekalaisilla tietotekniikkaa käsittelevillä sivuilla PHP:llä[S] toteutettua selaintunnistusta.

Webreference (the color depth), Javascripter (the size of the window), Sam Marshall (United Kingdom; ensimmäisen vihjeen antaja).

Ilman linkitystä

Voit käyttää ilman linkitystä:

Annan kaksi esimerkkiä, miten määritellä CSS Netscape 4.x -selaimille:

Erityisen ongelmallisia piirteitä

Kun yritetään luoda hyvä lopputulos erityisesti seuraavat asiat ovat ongelmallisia:

Koska et voi tehdä seuraaville asioille yhtään mitään suosittelen määrittelemään CSS:n niin, että Netscape 4.x ei lue niitä tai se saa ne vain joissakin tilanteissa:

Muita vihjeitä

W3C: CSS1 Test Suite: 5.5.25 float[Pw].

Lista CSS1 Test Suite[S][Pw] esiin tulevista virheistä on hirvittävän pitkä ja sen tulisi olla itse asiassa paljon pidempikin, mutten ollut varma kaikesta, mitä listaan kuuluisi laittaa.

Muista. Netscape 4.x:n CSS-toteutus on monessa suhteessa hyvin huono. Varmasti monessa suhteesa samalla tasolla kuin MS IE 3.02 (merkittävimpänä erona on se, että se tukee useimpia CSSP (P = position = asemointi) piirteitä (CSSP on nykyisin osa CSS2 spesifikaatiota). Dokumenttien perusstruktuurien tulisi perustua HTML 3.2:een. Netscape 4.x:ää pitäisi käsitellä lähinnä HTML 3.2 kykenevänä selaimena, jolle voi antaa hieman CSS:ää.

[Alku]