Handleiding HTML - @-regels

CSS		@-regels

Handleiding HTML Inhoud CSS | Inhoud HTML | Trefwoordenregister | Begin

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

@media

De @media-regel maakt het mogelijk binnen één stijlblok of stijlblad stijlen op te nemen, die betrekking hebben op de weergave door verschillende soorten apparaten. Bijvoorbeeld stijlen die alleen weergegeven moeten worden op het computerscherm én stijlen die alleen weergegeven moeten worden bij het afdrukken van het document door de printer.

Een @media-regel heeft de volgende opbouw:

@media <media> { blok met stijlregels }

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 blok met stijlregels zijn gedefinieerd, moeten alleen worden weergegeven door de apparaten, waarvoor een media type in de lijst is opgenomen.

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.

Het blok met stijlregels, hierna het @media-blok genoemd, wordt begrensd door accolades (gekrulde haken) en bevat één of meer stijlregels. Deze stijlregels zijn op de gebruikelijke wijze opgebouwd: een selector gevolgd door een ook weer tussen accolades geplaatste stijldeclaratie.

In het volgende voorbeeld is met een @media-regel vastgelegd met welke kleuren de drie grootste koppen moeten worden afgedrukt:

@media print { H1, H2, H3 { color: #336699; background-color: #FFFFFF; } }

Als stijlregels betrekking hebben op de weergave door meerdere apparaten neem je in de @media-regel het media type van elk van die apparaten op, gescheiden door een komma. Als voorbeeld een stijlregel die geldt voor weergave op een computerscherm en op een televisietoestel:

@media screen, tv { H1, H2, H3 { color: #FFFFFF; background-color: #336699; } }

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

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

Een stijlblok of stijlblad mag meerdere @media-regels bevatten en daarnaast ook gewone stijlregels. Het maakt daarbij niet uit in welke volgorde de @media-regels en de gewone stijlregels staan.

H1, H2, H3 { font-family: Arial, Helvetica, sans-serif; } @media screen { H1, H2, H3 { color: #FFFFFF; background-color: #336699; } } @media print { H1, H2, H3 { color: #336699; background-color: #FFFFFF; } }

Een @media-blok mag geen @import-regel bevatten. Wanneer dat wel het geval is, moet de browser de @import-regel negeren.

Ondersteuning

	CSS	IE	NN	MOZ	FF	OP
@media	2	5.0	6.0	1.0	1.0	4.0

Microsoft Internet Explorer 3/4: - De @media-regel wordt niet ondersteund, maar alleen de eerste stijlregel in een @media-blok wordt genegeerd. Alle overige stijlregels worden, ongeacht het medium waarop ze betrekking hebben, door de browser als normale stijlregels behandeld en dus aangehouden voor alle media.
Opera 3.5/3.6: - De @media-regel wordt niet ondersteund, maar alleen de eerste stijlregel in een @media-blok wordt genegeerd. Alle overige stijlregels worden, ongeacht het medium waarop ze betrekking hebben, door de browser als normale stijlregels behandeld en dus aangehouden voor alle media.
Opera 4.0 t/m 6.0: - De stijlen in het @media-blok wordt alleen weergegeven als een eventueel media type in kleine letters is geschreven.

Vervolg: @page

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