Handleiding HTML Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

Inhoud onderdeel: Introductie @-regels | @import | @media | @page

@import

De @import-regel maakt het mogelijk een extern stijlblad te importeren in een in de head van een document opgenomen stijlblok of in een ander extern stijlblad. Je kunt er bijvoorbeeld gebruik van maken als je voor bepaalde delen van je site specifieke stijlregels hebt en die niet in het algemene stijlblad wilt plaatsen (vanwege de overzichtelijkheid, of de omvang/downloadtijd). Daarnaast wordt de @import-regel regelmatig toegepast om de stijlen voor oudere browsers (Microsoft Internet Explorer 3 en Netscape Navigator 4) te verbergen en daarmee een niet correcte weergave te voorkomen.

Een @import-regel kan op twee manieren opgebouwd worden. De meest gebruikte manier is die, waarbij de locatie (de URI) van het te importeren stijlblad geplaatst wordt tussen de aanduiding "url( )":

@import url("URI") <media>;

Het is echter ook toegestaan de aanduiding url( ) weg te laten:

@import "URI" <media>;

De URI wordt in beide gevallen vastgelegd op dezelfde wijze als dat gebeurt bij het HREF attribuut van bijvoorbeeld het LINK element. Bij de constructie met url( ) zijn de aanhalingstekens om de URI optioneel en mogen dus ook worden weggelaten. Bij de constructie zonder url( ) moeten de aanhalingstekens wel altijd opgenomen worden.

De aanduiding <media> staat voor een lijst met één of meer media typen. Met een media type wordt een type apparaat aangeduid, dat een HTML-document en gedefinieerde stijlen kan weergeven. Bijvoorbeeld een computerscherm of een printer. In CSS 2.1 worden de volgende media typen onderscheiden:

• all: voor weergave door alle apparaten
• screen: voor weergave op een computerscherm
• print: voor weergave in pagina-opmaak bij het afdrukken of als print-preview
• aural: voor weergave door een spraaksynthesizer
• braille: voor weergave door een brailleleesapparaat)
• embossed: voor weergave in pagina-opmaak door een brailleprinter
• handheld: voor weergave door een apparaat met een klein beeldscherm
• projection: voor weergave door een projectieapparaat
• tty: voor weergave door een apparaat dat alleen tekst weergeeft in een vast karaktergrid
• tv: voor weergave op een televisietoestel

De stijlen die in het geïmporteerde stijlblad zijn gedefinieerd, moeten alleen worden weergegeven door de apparaten, waarvoor een media type in de lijst is opgenomen.

Het opnemen van één of meer media typen is optioneel. Wanneer geen lijst met media typen is opgenomen, worden de stijlen weergegeven door alle apparaten.

Wanneer de lijst meer dan één media type bevat, dan wordt als scheidingsteken een komma gebruikt (naar wens gevolgd door één of meer spaties).

De media typen zijn hoofdletterongevoelig. Dat wil zeggen dat het niet uitmaakt of ze in hoofdletters of in kleine letters worden geschreven.

Een @import-regel sluit je af met een puntkomma.

In het volgende voorbeeld wordt een stijlblad met de naam "basis.css" geïmporteerd. Dit stijlblad bevindt zich in een subdirectory met de naam "stijl".

@import url("stijl/basis.css");

Het stijlblad kun je ook importeren zonder de aanduiding url(  ):

@import "stijl/basis.css";

Een @import-regel wordt opgenomen in een extern stijlblad, of zoals in het volgende voorbeeld in een ingesloten stijlblok:

<STYLE TYPE="text/css">
<!--
@import url("stijl/basis.css");
-->
</STYLE>

Een stijlblok of stijlblad mag meerdere @import-regels bevatten en daarnaast ook gewone stijlregels. De @import-regels moeten echter altijd vóór de gewone stijlregels geplaatst worden. Een @import-regel die na een gewone stijlregel is geplaatst, moet door de browser genegeerd worden.

In het volgende voorbeeld wordt naast een stijlblad met basisstijlen ook een stijlblad geïmporteerd met stijlen specifiek voor formulieren. Daarnaast is een stijlregel opgenomen, die vastlegt met welke kleuren de drie grootste koppen moeten worden weergegeven.

@import url("stijl/basis.css");
@import url("stijl/formulier.css");
H1, H2, H3 {color: #FFFFFF; background-color: #336699; }

Gewone stijlregels hebben (als ze betrekking hebben op hetzelfde element) prioriteit boven de stijlregels uit een geïmporteerde stijlblad. Indien meerdere stijlbladen geïmporteerd worden en in meerdere van deze stijlbladen stijlen betrekking hebben op hetzelfde element, dan wordt de stijl uit het laatste geïmporteerde stijlblad aangehouden.

Een @import-regel mag niet geplaatst worden in een @media-blok. Wanneer dat wel het geval is, moet de browser de @import-regel negeren.

Door het toevoegen van één of meer media typen aan de @import-regel, geef je aan welk apparaat de stijlen uit het te importeren stijlblad moet weergeven. In de volgende voorbeelden zijn dat achtereenvolgens het computerscherm en de printer.

@import url("scherm.css") screen;

@import url("afdrukken.css") print;

Als de stijlen betrekking hebben op de weergave door zowel het computerscherm als de printer, dan ziet de @import-regel er als volgt uit:

@import url("basis.css") screen, print;

Het opnemen van een media type moet op dit moment overigens afgeraden worden, omdat de meest gebruikte browser (Microsoft Internet Explorer) een @import-regel met media type negeert en het stijlblad daardoor in het geheel niet importeert. Een voor de hand liggend alternatief lijkt het opnemen van een extra STYLE of LINK element met daaraan toegevoegd het MEDIA attribuut. Bijvoorbeeld:

<STYLE TYPE="text/css" MEDIA="print">
<!--
@import url("afdrukken.css");
-->
</STYLE>

Ook dit is echter geen geschikte oplossing, omdat veel browsers de waarde van het MEDIA attribuut negeren voor @import-regels. Wanneer je aparte stijlregels voor bijvoorbeeld de printer wilt opnemen, kun je daarom het beste gebruik maken van de constructie met de @media-regel.

Ondersteuning

Microsoft Internet Explorer 4

- Een stijlblad wordt niet geïmporteerd als gebruik gemaakt wordt van een @import-regel zonder url( ).

- Een stijlblad wordt niet geïmporteerd als er één of meer media typen aan de @import-regel zijn toegevoegd.

- De stijlregels uit een geïmporteerd stijlblad worden ook weergegeven als de @import-regel geplaatst is na gewone stijlregels.

- De stijlregels uit een via @import geïmporteerd stijlblad worden aangehouden voor alle media types, ongeacht de waarde van een voor het STYLE of het LINK element opgenomen MEDIA attribuut. Voor aparte stijlregels in hetzelfde stijlblok of stijlblad wordt wel de opgegeven waarde van het MEDIA attribuut aangehouden.

Microsoft Internet Explorer 5.0/5.5

- Een stijlblad wordt niet geïmporteerd als er één of meer media typen aan de @import-regel zijn toegevoegd.

- De stijlregels uit een geïmporteerd stijlblad worden ook weergegeven als de @import-regel geplaatst is na gewone stijlregels.

- De stijlregels uit een via @import geïmporteerd stijlblad worden aangehouden voor alle media types, ongeacht de waarde van een voor het STYLE of het LINK element opgenomen MEDIA attribuut. Voor aparte stijlregels in hetzelfde stijlblok of stijlblad wordt wel de opgegeven waarde van het MEDIA attribuut aangehouden.

Microsoft Internet Explorer 6.0 en hoger

- Een stijlblad wordt niet geïmporteerd als er één of meer media typen aan de @import-regel zijn toegevoegd.

Netscape Navigator 4.0/4.01

- De browser crasht als een stijlblok of stijlblad een @import-regel bevat.

Opera 3.5/3.6

- Een stijlblad wordt niet geïmporteerd als er meer dan één media type aan de @import-regel is toegevoegd.

- De stijlregels uit een via @import geïmporteerd stijlblad worden aangehouden voor alle media types, ongeacht de waarde van een voor het STYLE of het LINK element opgenomen MEDIA attribuut. Voor aparte stijlregels in hetzelfde stijlblok of stijlblad wordt wel de opgegeven waarde van het MEDIA attribuut aangehouden.

Opera 4.0 t/m 6.0

- Een stijlblad wordt niet geïmporteerd als er meer dan één media type aan de @import-regel is toegevoegd.

- Een stijlblad wordt alleen geïmporteerd als een eventueel media type in kleine letters is geschreven.

- De stijlregels uit een via @import geïmporteerd stijlblad worden aangehouden voor alle media types, ongeacht de waarde van een voor het STYLE of het LINK element opgenomen MEDIA attribuut. Voor aparte stijlregels in hetzelfde stijlblok of stijlblad wordt wel de opgegeven waarde van het MEDIA attribuut aangehouden.

Opera 7.0

- De stijlregels uit een via @import geïmporteerd stijlblad worden aangehouden voor alle media types, ongeacht de waarde van een voor het STYLE of het LINK element opgenomen MEDIA attribuut. Voor aparte stijlregels in hetzelfde stijlblok of stijlblad wordt wel de opgegeven waarde van het MEDIA attribuut aangehouden. In Opera 7.1 is dit probleem opgelost.

Vervolg: @media

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

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2024 Hans de Jong
Laatste wijziging: 5 december 2004