CSS en browsers

In dit onderdeel komen aan de orde: Ondersteuning door browsers, Ondersteuning stijleigenschappen, Ondersteuning HTML-elementen, Browser-specifieke stijlbladen en Weergave door andere browsers.

Ondersteuning door browsers

Cascading Style Sheets worden ondersteund door Microsoft Internet Explorer 3 en hoger, Netscape Navigator 4 en hoger en Opera 3.5 en hoger.

Microsoft Internet Explorer 3 is de eerste browser die Cascading Style Sheets ondersteunde. De ondersteuning betreft echter slechts een beperkt deel van de eigenschappen van CSS1 en komt bovendien niet altijd overeen met de huidige specificaties (zie bijvoorbeeld de font-family eigenschap). Tussen de versies van Internet Explorer 3 voor Windows 95 en Macintosh bestaan daarbij ook nog verschillen. Eigenschappen die wel door de nieuwere browsers worden ondersteund, worden door Internet Explorer 3 soms geheel verkeerd weergegeven (bijvoorbeeld relatieve lengte-eenheden).

Netscape Navigator 4 ondersteunt een groot deel van de stijleigenschappen van CSS1 en een beperkt deel van CSS2, maar houdt zich op nogal wat punten niet aan de specificaties en kent een aantal bugs. Een voorbeeld is de onjuiste weergave van elementen op blokniveau (zie voor een toelichting de bespreking van de box). Verder zijn er grote problemen met afbeeldingen waaraan een stijl is toegevoegd en worden stijlen welke via het BODY element zijn gedefinieerd voor een document niet geërfd in een tabel en na een tabel. Een punt van aandacht voor als je een extern stijlblad gebruikt: zorg ervoor dat het stijlblad altijd te vinden is, want anders sluit Netscape Navigator 4 bij het openen van het document spontaan met een foutmelding.

In Microsoft Internet Explorer 4 worden de meeste stijleigenschappen van CSS1 en een deel van CSS2 ondersteund. Bovendien is de implementatie van CSS hier in bijna alle gevallen overeenkomstig de specificaties. Slechts in enkele gevallen is er sprake van kleine schoonheidsfoutjes.

Door Opera 3.5 worden vrijwel alle eigenschappen welke deel uitmaken van CSS1 ondersteund en meeste gevallen correct.

Ondersteuning stijleigenschappen

Bij de beschrijving van de afzonderlijke stijleigenschappen is aangegeven, of een eigenschap door één of meer van de genoemde browsers niet, slechts beperkt, of niet correct ondersteund wordt. In een aantal overzichten is de ondersteuning nog eens samengevat:

Ondersteuning HTML-elementen

De verschillende browsers hebben niet alleen problemen met de weergave van sommige stijleigenschappen, maar soms ook met het koppelen van stijlen aan bepaalde elementen. Het volgende overzicht geeft daarvan een opsomming.

APPLET	De weergave van stijlen, welke zijn gedefinieerd voor het APPLET element, is in Netscape Navigator 4 vaak niet correct.
BODY	Door Netscape Navigator 4 worden tabellen beschouwd als een apart document. Als gevolg daarvan worden stijlen, welke voor een document gedefinieerd zijn via het BODY element, niet worden geërfd in een tabel of na een tabel. Daarom is het verstandig deze stijlen ook te definiëren voor de andere elementen die je gebruikt in het document en stijlen, welke betrekking hebben op de inhoud van de cellen van een tabel, vast te leggen via de elementen TH of TD.
DD	Netscape Navigator 4 ondersteunt het gebruik van stijlen alleen voor het DL element en niet voor de elementen DT en het DD. Wanneer je deze elementen van de stijl wilt voorzien, dan kun je de inhoud ervan plaatsen in een SPAN element en hieraan één via de attributen STYLE, CLASS of ID een stijl koppelen.
DT	Netscape Navigator 4 ondersteunt het gebruik van stijlen alleen voor het DL element en niet voor de elementen DT en het DD. Wanneer je deze elementen van de stijl wilt voorzien, dan kun je de inhoud ervan plaatsen in een SPAN element en hieraan één via de attributen STYLE, CLASS of ID een stijl koppelen.
EMBED	De weergave van stijlen, welke gedefinieerd zijn voor het EMBED element, is in Netscape Navigator 4 vaak niet correct.
FORM	Stijlen voor het FORM element worden door Microsoft Internet Explorer 3 en Netscape Navigator 4 vaak niet of niet correct weergegeven.
HR	Veel stijleigenschappen voor het HR element worden niet of niet correct door de verschillende browsers ondersteund. Door Microsoft Internet Explorer 3.0 en hoger wordt een HR element, waarvoor via het STYLE attribuut is kleur is gedefiniëerd, weergegeven als vlakke lijn (zoals bij het NOSHADE attribuut).
IMG	Netscape Navigator 4 heeft grote problemen met het toekennen van stijlen aan het IMG element. Niet alleen wordt de afbeelding vaak op een geheel andere plek in het document weergegeven, ook wordt de werking van andere stijlen negatief beïnvloed. In ieder geval kunnen de Stijleigenschappen voor breedte en hoogte niet gebruikt worden om de afbeelding een ander formaat te geven.
INPUT	Stijlen voor het INPUT element worden door Microsoft Internet Explorer 3 en Netscape Navigator 4 vaak niet of niet correct weergegeven.
LI	In Netscape Navigator 4 heeft een stijl toegevoegd aan het LI element alleen effect op de markering en niet op de inhoud. Wanneer je ook de inhoud van de stijl wilt voorzien, dan kun je deze plaatsen in een SPAN element en hieraan één via de attributen STYLE, CLASS of ID een stijl koppelen. Een stijl voor de gehele lijst, bepaald via de elementen UL of OL, werkt wel in Netscape Navigator 4.
NOSCRIPT	Netscape Navigator 4 en Microsoft Internet Explorer 3 ondersteunen het gebruik van stijlen voor het NOSCRIPT element alleen als ook scripting is toegestaan.
OBJECT	De weergave van stijlen, welke zijn toegevoegd aan het OBJECT element, is in Netscape Navigator 4 vaak niet correct.
SELECT	Stijlen voor het SELECT element worden door Microsoft Internet Explorer 3 niet correct weergegeven.
TABLE	Netscape Navigator 4 ondersteunt geen stijlen voor het TABLE element. Koppel de stijlen daarom aan de elementen TD of TH.
TR	Netscape Navigator 4 ondersteunt geen stijlen voor het TR element. Koppel de stijlen daarom aan de elementen TD of TH.
TEXTAREA	Stijlen voor het TEXTAREA element worden door Microsoft Internet Explorer 3 niet correct weergegeven.

Browser-specifieke stijlbladen

Gezien de problemen met de ondersteuning van Cascading Style Sheets door in het bijzonder Microsoft Internet Explorer 3 en Netscape Navigator 4 zal het vaak verstandig zijn gebruik te maken van browser-specifieke stijlbladen.

Bij het openen van het document laat je met behulp van een JavaScript testen in welke browser dat gebeurt. Dat kan door gebruik te maken van kenmerken van de verschillende browsers, zoals "appName", "appVersion" en "userAgent". In het volgende overzicht staan deze voor de browser, waarin je de Handleiding HTML nu geopend hebt:

Als op basis van deze kenmerken bepaald is welke browser, in welke versie en eventueel op welk platform (Windows 95, Linux, Macintosh) gebruikt wordt, kan ook weer via JavaScript het bijbehorende stijlblad aan het document gekoppeld worden. In het volgende voorbeeld gebeurt dat voor Microsoft Internet Explorer 3, waarbij onderscheid gemaakt wordt tussen de Macintosh en andere platforms (dat kan nodig zijn als je in het stijlblad vaste puntgroottes hebt gedefinieerd).

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">  </SCRIPT>

Als je gebruik maakt van browser-specifieke stijlbladen, dan worden de stijlen alleen weergegeven als de browser JavaScript mag uitvoeren. Voor Netscape Navigator 4 is dat geen probleem, omdat style sheets alleen ondersteund worden als JavaScript is toegestaan. In Microsoft Internet Explorer 4 en Opera 3.5 kun je de stijlen ook laten weergeven zonder dat JavaScript is toegestaan. Je kunt dat doen door het STYLE element op te nemen en daarin met @import een set stijlregels te importeren, welke correct worden weergegeven door alle browsers die @import ondersteunen.

<STYLE TYPE="text/css">  </STYLE>

Als je het STYLE element plaatst voor het JavaScript, hebben stijlregels uit het browser-specifieke stijlblad prioriteit boven die uit het algemene stijlblad.

Een voorbeeld van het gebruik van browser-specifieke stijlbladen is in opgenomen een apart document.

Meer informatie over browser-specifieke informatie vind je in het onderdeel Javascript en Informatie over de browser.

Weergave door andere browsers

Bij het gebruik van Cascading Style Sheets is het belangrijk in de gaten te houden, wat de bezoeker van je pagina te zien krijgt als hij of zij een browser gebruikt, die CSS niet ondersteunt. Vaak biedt het gebruik van CSS iets extra's. Soms echter leidt het tot een ongewenste weergave in browsers die CSS niet ondersteunen, zoals in het volgende voorbeeld.

Met behulp van de Stijleigenschappen voor de margin is het mogelijk een titel met schaduwletters te maken. In de volgende afbeelding kun je zien, hoe een browser die CSS ondersteunt, dit kan weergeven. Klik op de afbeelding om de weergave door de gebruikte browser en de code te bekijken.

In browsers die Cascading Style Sheets niet ondersteunen wordt dit voorbeeld weergegeven op een manier die zeker niet de bedoeling zal zijn, namelijk met twee identieke onder elkaar geplaatste titels:

Handleiding HTML

Overigens zal ook het beeld in browsers die Style Sheets wel ondersteunen, niet altijd hetzelfde zijn. Daardoor kan het resultaat er in een andere browser wel eens veel minder fraai uitzien. Wees dus voorzichtig met het gebruik van allerlei bijzondere constructies.

Inhoud Handleiding HTML Index