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>
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. |
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 |