Problemen - Oplossingen

Hoe voorkom ik problemen in browsers?

Om problemen te voorkomen zijn er drie dingen nodig:

Weten welke style-regels problemen opleveren in welke browser - zie de vorige pagina.
Stylesheets per (groep van) browsers opstellen.
De juiste stylesheet door de juiste browsers laten gebruiken.

Stylesheets opstellen per browser.

Niveau 1: font-family, text-indent, text-align, text-decoration. Dit kan in een algemeen toegankelijke stylesheet worden opgenomen.

Niveau 2: de meeste font-eigenschappen en color, border en background.
IE3 kan de BODY-kleur niet uit een gelinkt stylesheet halen. Als er in het HTML-document zelf geen kleuren worden gedefineerd (met behulp van attributen van het BODY-element, of met een STYLE- element) moeten kleuren in geLINKte stylesheets ook buiten bereik van IE3 worden gehouden.

Niveau 3: margin en padding, width en height, float. Deze kunnen een document in Netscape erg lelijk maken, als ze direct op elementen worden toegepast. Als ze worden gebruikt op DIV-blokken kunnen ze vaak wel in niveau 2 gebruikt worden. Test dit uit!

Stylesheets serveren aan bepaalde browsers.

Hiervoor maken we gebruik van beperkingen in de ondersteuning van import-mogelijkheden in diverse browsers:

IE 3 kan maar één stylesheet binnenhalen m.b.v. het LINK- element. Door als laatste een "dummy"-stylesheet te laden in het HTML-document, zullen andere geLINKte stylesheets niet worden toegepast door IE3.
Deze methode is niet 100% veilig. Het kan een enkele keer voorkomen dat een eerder opgegeven stylesheet als laatste wordt geladen, en dus wordt toegepast.
Netscape Navigator 4.x haalt geLINKte stylesheets niet binnen, als ze zijn voorzien van enig ander media-attribuut als screen. Waarden voor media die wel voor Internet Explorer en Opera werken, maar niet voor NN4 zijn bijvoorbeeld all en projection. Ook het combineren van verschillende attributen (bijvoorbeeld media="screen, projection") zorgt ervoor dat NN4 de stylesheet niet gebruikt.
De @import-regel wordt door Netscape Navigator 4.x en Internet Explorer 3 geheel niet ondersteund.

In dit voorbeeld worden alle mogelijkheden gecombineerd:

<HTML>
<HEAD>
<TITLE>CSS-test</TITLE>

<LINK rel="stylesheet" type="text/css" href="all.css" 
media="screen" title="For all">
<LINK rel="stylesheet" type="text/css" href="no-nn.css" 
media="screen, projection" title="Not for NN">
<LINK rel="Stylesheet" type="text/css" href="ie3dummy.css" 
title="IE3 Dummy">

<STYLE type="text/css" title="Local style"">
<!--
  @import url(style-import.css);
  P {text-indent: 2em;}
-->
</STYLE>

</HEAD>

<BODY>

<H1 class="classnaam">De titel</H1>

<P>Een regel met tekst.</P>

</BODY>
</HTML>

De inhoud van all.css:

@import url(link-import.css);
H1 {color: blue; background: yellow;}

De inhoud van no-nn.css:

BODY {margin: 0;}
H1 {margin: 0;}

De inhoud van ie3dummy.css:

/* dit is een dummy-stylesheet, om er voor te 
   zorgen dat IE 3 geen stylesheets gebruikt */

De inhoud van style-import.css:

P {color: white; background: black;}

De inhoud van link-import.css:

P {font-size: 200%;}

Voorbeeld-weergave in jouw browser.

De volgende combinaties kunnen we nu maken:

	IE 3	NN 4.x	IE 4+	Opera 3.5+
all.css	nee (meestal)	ja	ja	ja
no-nn.css	nee (meestal)	nee, want verkeerde media	ja	ja
ie3dummy.css	ja, want laatst geladen (meestal)	ja	ja	ja
style-import.css en link-import.css	nee	nee	ja	ja
Local style	ja	ja	ja	ja

Zoals je ziet, is er geen manier om stylesheets te verbergen voor Internet Explorer 4+ of voor Opera 3.5+.