HTML <link> media eigenschap

HTML <link> tag

Definitie en gebruik

media De eigenschap bepaalt voor welk mediatype/apparaat het doelbron is geoptimaliseerd.

media De eigenschap specificeert op welk apparaat het gelinkte document wordt weergegeven.

Deze eigenschap wordt voornamelijk samen met CSS-stijltabellen gebruikt om verschillende stijlen voor verschillende mediatypeën te specificeren.

media De eigenschap kan meerdere waarden aanvaarden.

Voorbeeld

Twee verschillende stijltabellen voor twee verschillende mediatypeën (scherm en afdrukken):

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  
<link rel="stylesheet" type="text/css" href="print.css" media="print">

</head>

Probeer het zelf uit

Syntax<link media="waarde

>

Mogelijke bewerkers Beschrijving
Bewerker and
Stelt de AND-bewerker in. not
Stelt de NOT-bewerker in. ,

Stelt de OR-bewerker in.

Stelt de OR-bewerker in. Beschrijving
Apparaat all
Standaard. Gebruikt voor alle mediatype-apparaten. print
Gebruikt voor printvoorbeeldmodus/printerpagina. screen
Gebruikt voor computerschermen, tablets, smartphones, enz. speech
Gebruikt voor schermlezers die pagina's voorlezen. Verouderd.aural
Voice synthesizer. Verouderd.braille
Braillefeedback-apparaat. Verouderd.handheld
Handheld-apparaat (kleine scherm, beperkte bandbreedte). Verouderd.Projector.
tty Verouderd.Gebruikt een grid van vaste afstandstekens voor telegraphietypemachines en vergelijkbare media.
tv Verouderd.Type televisie-apparaat (lage resolutie, beperkte scrollcapaciteit).

Waarde

Waarde Beschrijving
aspect-ratio

Stelt de verhouding breedte/hoogte van het doelgebied van de weergave in.

Gebruik de "min-" en "max-" voorvoegsels.

Voorbeeld: media="screen and (aspect-ratio:16/9)"
color

Stelt het aantal bits per kleur van het doelbeeld in.

Gebruik de "min-" en "max-" voorvoegsels.

Voorbeeld: media="screen and (color:3)"
color-index

Stelt het aantal kleuren in dat het doelbeeld kan verwerken.

Gebruik de "min-" en "max-" voorvoegsels.

Voorbeeld: media="screen and (min-color-index:256)"
device-aspect-ratio Verouderd.Stelt de verhouding device-width/device-height van het doelbeeld of papier in.
device-width Verouderd.Stelt de breedte van het doelbeeld of papier in.
device-height Verouderd.Stelt de hoogte van het doelbeeld of papier in.
grid

Stelt in of de uitvoerapparaat een raster of een bitmap is.

Mogelijke waarden: "1" betekent raster, "0" is iets anders.

Voorbeeld: media="handheld and (grid:1)"
height

Stelt de hoogte van het doelgebied van de weergave in.

Gebruik de "min-" en "max-" voorvoegsels.

Voorbeeld: media="screen and (max-height:700px)"
monochrome

Stelt in elk pixelbitt in de monochrome framebuffer.

Gebruik de "min-" en "max-" voorvoegsels.

Voorbeeld: media="screen and (monochrome:2)"
Richting

Stel de richting van het doelbeeldscherm/papier in.

Mogelijke waarden zijn: "portrait" of "landscape".

Voorbeeld: media="all and (orientation: landscape)"
Resolutie

Stel de pixeldichtheid van het doelbeeldscherm/papier in (dpi of dpcm).

Gebruik de "min-" en "max-" voorvoegsels.

Voorbeeld: media="print and (resolution:300dpi)"
Scan

Stel de scanmethode van het tv-scherm in.

Mogelijke waarden zijn: "progressive" en "interlace".

Voorbeeld: media="tv and (scan:interlace)"
Breedte

Stel de breedte van het doelgebied van de weergave in.

Gebruik de "min-" en "max-" voorvoegsels.

Voorbeeld: media="screen and (min-width:500px)"

Browserondersteuning

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning

HTML <link> tag