Handleiding HTML - CSS en browsers

CSS		CSS en browsers

Handleiding HTML Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

Inhoud onderdeel: Ondersteuning door browsers | Stijlen verbergen | Browser-specifieke stijlbladen | Voorbeeld browser-specifieke stijlbladen

Stijlen verbergen

Gezien de problemen met de ondersteuning van stylesheets door Microsoft Internet Explorer 3 en Netscape Navigator 4 kan het verstandig zijn ervoor te zorgen, dat deze browsers de stijlen niet kunnen weergeven. Dat kan door de stijlen op te nemen in een extern stijlblad en dit aan het HTML-document te koppelen met behulp van een methode die de genoemde browsers niet kennen.

Als je de stijlen alleen wilt verbergen in Netscape Navigator 4, dan kun je gebruik maken van het gegeven dat deze browser het MEDIA attribuut van het LINK element niet correct ondersteund. Wanneer je namelijk een andere waarde voor dit attribuut gebruikt dan "screen" of wanneer je meerdere waarden tegelijk opneemt, dan wordt het stijlblad in Netscape Navigator 4 geheel genegeerd. Welke waarde je het beste voor het MEDIA attribuut kunt opnemen, wordt bepaald door de apparaten die de stijlen moeten weergeven.

Als de stijlen weergegeven moeten worden door alle apparaten, dan gebruik je eenvoudig de waarde "all":

<LINK REL="stylesheet" HREF="basis.css" TYPE="text/css" MEDIA="all">

Als het gaat om de weergave op het scherm en bij het afdrukken, neem je de waarde "screen, print" op:

<LINK REL="stylesheet" HREF="basis.css" TYPE="text/css" MEDIA="screen, print">

Als de stijlen uitsluitend betrekking hebben op de weergave op het scherm, dan moet je een bijzondere maar overigens correcte waarde kiezen en wel "screen, screen":

<LINK REL="stylesheet" HREF="basis.css" TYPE="text/css" MEDIA="screen, screen">

Met de waarde "screen, screen" hebben andere browsers dan Netscape Navigator 4 geen probleem: de stijlen worden normaal weergeven op het scherm.

Omdat Microsoft Internet Explorer 3 het MEDIA niet ondersteund, kun je met bovenstaande oplossing de weergave van de stijlen in deze browser niet beïnvloeden. In principe is dat ook niet iets waar je je veel zorgen over hoeft te maken, omdat het aantal bezoekers met deze browser uiterst gering zal zijn. Wanneer je echter op zeker wilt spelen en de stijlen zowel voor Netscape Navigator 4 als Microsoft Internet Explorer 3 wilt verbergen, dan moet je gebruik maken van de constructie met de @import-regel. Je doet dat door in de head van het document een stijlblok op te nemen en daarin met een @import-regel aan te geven welk stijlblad geïmporteerd moet worden:

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

Omdat Microsoft Internet Explorer 3 en Netscape Navigator 4 de @import-regel niet ondersteunen, hebben ze geen weet van de in het stijlblad opgenomen stijlregels en kunnen ze de stijlen dus niet weergeven.

De @import-regel kun je ook gebruiken als je de stijlen niet alleen voor Microsoft Internet Explorer 3 en Netscape Navigator 4 wilt verbergen, maar bovendien voor Microsoft Internet Explorer 4. Je gebruikt dan een andere wijze van notatie, waarbij je de aanduiding "url( )" weglaat:

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

Deze wijze van notatie van de @import-regel wordt ondersteund door Microsoft Internet Explorer 5.0 en hoger, Mozilla, Netscape Navigator 6.0 en hoger en Opera 3.5 en hoger. In eerdere versies wordt het stijlblad niet geïmporteerd

Hiervoor hebben we de stijlen geheel verborgen voor Microsoft Internet Explorer 3/4 en/of Netscape Navigator 4. Je kunt er echter ook voor kiezen een deel van de stijlen wel weer te laten geven in deze browsers en een deel niet. In dat geval plaats je de stijlregels die geschikt zijn voor alle browsers in een extern stijlblad dat je aan het HTML-document koppelt met een methode die alle browsers ondersteunen: met het LINK element zonder MEDIA attribuut. De stijlregels die niet geschikt zijn voor Microsoft Internet Explorer 3/4 en/of Netscape Navigator 4 plaats je in een ander extern stijlblad en koppel je aan het HTML-document via een van de hiervoor gegeven oplossingen. Dat ziet er bijvoorbeeld als volgt uit:

<LINK REL="stylesheet" HREF="eenvoudig.css" TYPE="text/css"> <STYLE TYPE="text/css">  </STYLE>

Uiteraard werkt een dergelijke constructie alleen wanneer het je lukt in het algemene stijlblad (in het voorbeeld "eenvoudig.css") een set stijlregels op te nemen, die in Microsoft Internet Explorer 3/4 en/of Netscape Navigator 4 leiden tot een acceptabele weergave. Als dat niet het geval is, moet je overwegen gebruik te maken van browser-specifieke stijlbladen.

Vervolg: Browser-specifieke stijlbladen

Inhoud onderdeel | Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin