HTML <source> media egenskap
Definition och användning
media Egenskapen accepterar alla vanliga mediefrågor som definieras i CSS.
Observera:Denna egenskap kan acceptera flera värden.
Exempel
En element som innehåller två källfiler och en bakgrundsbild: <picture> elementet:
<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>
Syntax
<source media="media_query>
Möjliga operatorer
| Operatorer | Beskrivning |
|---|---|
| and | Bestämmer AND-operatorn. |
| not | Bestämmer NOT-operatorn. |
| , | Bestämmer OR-operatorn. |
Enhet
| Värde | Beskrivning |
|---|---|
| all | Standard. Lämplig för alla enheter. |
| aural | Röstgenerator. |
| braille | Braillefeedbackenheter. |
| handheld | Handhållna enheter (liten skärm, begränsad bandbredd). |
| projection | Projektor. |
| Förhandsgranskning av utskrift/utskriftssida. | |
| screen | Datorskärm. |
| tty | Telegraffaksimil och andra medier som använder en liknande bred teckenraster. |
| tv | TV-enheter (låg upplösning, begränsad sidorullning) |
Värde
| Värde | Beskrivning |
|---|---|
| width |
Bestämmer bredden för målområdet. Kan använda prefixen "min-" och "max-". Exempel: media="screen and (min-width:500px" |
| height |
Bestämmer höjden för målområdet. Kan använda prefixen "min-" och "max-". Exempel: media="screen and (max-height:700px" |
| device-width |
Bestämmer bredden för målvisaren/papper. Kan använda prefixen "min-" och "max-". Exempel: media="screen and (device-width:500px" |
| device-height |
Bestämmer höjden för målvisaren/papper. Kan använda prefixen "min-" och "max-". Exempel: media="screen and (device-height:500px" |
| orientation |
Bestämmer riktningen för målvisaren/papper. Möjliga värden: "portrait" eller "landscape" Exempel: media="all and (orientation: landscape" |
| aspect-ratio |
Bestämmer bredd/höjd ratio:n för målområdet. Kan använda prefixen "min-" och "max-". Exempel: media="screen and (aspect-ratio:16/9" |
| device-aspect-ratio |
Bestämmer ratio:n för device-width/device-height för målvisaren/papper. Kan använda prefixen "min-" och "max-". Exempel: media="screen and (aspect-ratio:16/9" |
| color |
Bestämmer antalet bitar för varje färg på målvisaren. Kan använda prefixen "min-" och "max-". Exempel: media="screen and (color:3" |
| color-index |
Bestämmer det mål som skärmen kan hantera av färger. Kan använda prefixen "min-" och "max-". Exempel: media="screen and (min-color-index:256" |
| monochrome |
Bestämmer antalet bitar per pixel i monokrom framebuffer. Kan använda prefixen "min-" och "max-". Exempel: media="screen and (monochrome:2)" |
| resolution |
Bestämmer pixel密度 (dpi eller dpcm) för måltillverkaren/papperet. Kan använda prefixen "min-" och "max-". Exempel: media="print and (resolution:300dpi)" |
| scan |
Bestämmer skanningsmetoden för tv-skärmar. Möjliga värden är: "progressive" och "interlace". Exempel: media="tv and (scan:interlace)" |
| grid |
Bestämmer om utdataenheten är en grid eller bitmap. Möjliga värden: "1" representerar grid, "0" är andra. Exempel: media="handheld and (grid:1)" |
Webbläsarstöd
Numrerna i tabellen anger den första webbläsaren som helt stöder egenskapen.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
