HTML <source> media eigenschap

Definitie en gebruik

media De eigenschap accepteert elke geldige media query die normaal gesproken in CSS wordt gedefinieerd.

Opmerking:Deze eigenschap kan meerdere waarden aan.

Voorbeeld

Een element <picture> dat twee bronbestanden en een alternatieve afbeelding bevat:

<picture>
  <source media="(min-width:650px)" srcset="flower-1.jpg">
  <source media="(min-width:465px)" srcset="flower-2.jpg">
  <img src="flower-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Probeer het zelf uit

Syntaxis

<source media="media_query>

Mogelijke bewerkers

Bewerker Beschrijving
and Bepaalt de AND-betekenis.
not Bepaalt de NOT-betekenis.
, Bepaalt de OR-betekenis.

Apparaat

Waarde Beschrijving
all Standaard. Geschikt voor alle apparaten.
aural Geluidssynthese.
braille Braillefeedbackapparaat.
handheld Handhouvend apparaat (kleine scherm, beperkte bandbreedte).
projection Projector.
print Printvoorraadmodus/Printpagina.
screen Computerscherm.
tty Telegraphmachine en soortgelijke media die een breedtegraden raster gebruiken.
tv Televisietype-apparaat (lage resolutie, beperkte paginatiecapaciteit).

Waarde

Waarde Beschrijving
width

Bepaalt de breedte van het doelbeeld.

Voorbeelden: "min-" en "max-" prefixen kunnen worden gebruikt.

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

height

Bepaalt de hoogte van het doelbeeld.

Voorbeelden: "min-" en "max-" prefixen kunnen worden gebruikt.

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

device-width

Bepaalt de breedte van het doelbeeld/papier.

Voorbeelden: "min-" en "max-" prefixen kunnen worden gebruikt.

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

device-height

Bepaalt de hoogte van het doelbeeld/papier.

Voorbeelden: "min-" en "max-" prefixen kunnen worden gebruikt.

Voorbeeld: media="screen and (device-height:500px"

orientation

Bepaalt de richting van het doelbeeld/papier.

Mogelijke waarden: "portrait" of "landscape"

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

aspect-ratio

Bepaalt de ratio van de breedte/hoogte van het doelbeeld.

Voorbeelden: "min-" en "max-" prefixen kunnen worden gebruikt.

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

device-aspect-ratio

Bepaalt de ratio van device-width/device-height van het doelbeeld/papier.

Voorbeelden: "min-" en "max-" prefixen kunnen worden gebruikt.

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

color

Bepaalt het aantal bits per kleur van het doelbeeld.

Voorbeelden: "min-" en "max-" prefixen kunnen worden gebruikt.

Voorbeeld: media="screen and (color:3"

color-index

Bepaalt het aantal kleuren dat het doelbeeld kan verwerken.

Voorbeelden: "min-" en "max-" prefixen kunnen worden gebruikt.

Voorbeeld: media="screen and (min-color-index:256"

monochrome

Stelt het aantal bits per pixel in een monochroom framebuffer in.

Voorbeelden: "min-" en "max-" prefixen kunnen worden gebruikt.

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

resolution

Stelt de pixel dichtheid van het doelbeeldscherm/papier in (dpi of dpcm).

Voorbeelden: "min-" en "max-" prefixen kunnen worden gebruikt.

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

scan

Stelt de scanmethode van het tv-scherm in.

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

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

grid

Stelt in of de uitvoerapparaat een raster of bitmap is.

Mogelijke waarden: "1" staat voor raster, "0" is alles andere.

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

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 9.0 15.0 9.1 25.0