HTML <source> Medienattribut
Definition und Verwendung
media Das Attribut akzeptiert jede gültige Medienabfrage, die normalerweise in CSS definiert wird.
Beachtung:Dieser Attribut kann mehrere Werte akzeptieren.
Beispiel
Ein <picture>-Element, das zwei Quelldateien und ein Ersatzbild enthält:
<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="Blumen" style="width:auto;"> </picture>
Syntax
<source media="media_query>
mögliche Operator
| Operator | Beschreibung |
|---|---|
| and | bestimmt den AND-Operator. |
| not | bestimmt den NOT-Operator. |
| , | bestimmt den OR-Operator. |
Gerät
| Wert | Beschreibung |
|---|---|
| all | Standard. Eignet sich für alle Geräte. |
| aural | Sprachsynthese. |
| braille | Braillesystem. |
| handheld | Handheld-Geräte (kleiner Bildschirm, begrenzte Bandbreite) |
| projection | Projektor. |
| Druckvorschau-Modus/Druckseite. | |
| screen | Computermonitor. |
| tty | Teletypograph und ähnliche Medien mit gleich breiten Zeichensätzen. |
| tv | Fernsehgerätetyp-Geräte (niedrige Auflösung, begrenzte paginierungsfähigkeit) |
Wert
| Wert | Beschreibung |
|---|---|
| width |
bestimmt die Breite des Zielbildschirms. Prefixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (min-width:500px" |
| height |
bestimmt die Höhe des Zielbildschirms. Prefixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (max-height:700px" |
| device-width |
bestimmt die Breite des Zielbildschirms/Papiers. Prefixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (device-width:500px" |
| device-height |
bestimmt die Höhe des Zielbildschirms/Papiers. Prefixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (device-height:500px" |
| orientation |
bestimmt die Richtung des Zielbildschirms/Papiers. mögliche Werte: "portrait" oder "landscape" Beispiel: media="all and (orientation: landscape" |
| aspect-ratio |
bestimmt das Verhältnis von Breite/Höhe des Zielbildschirms. Prefixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (aspect-ratio:16/9" |
| device-aspect-ratio |
bestimmt das Verhältnis von device-width/device-height des Zielbildschirms/Papiers. Prefixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (aspect-ratio:16/9" |
| color |
bestimmt die Anzahl der Bits pro Farbe des Zielbildschirms. Prefixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (color:3" |
| color-index |
bestimmt die Anzahl der Farben, die das Zielbildschirm verarbeiten kann. Prefixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (min-color-index:256" |
| monochrome |
Legt die Anzahl der Bits pro Pixel im monochromen Framebuffer fest. Prefixe "min-" und "max-" können verwendet werden. Beispiel: media="screen and (monochrome:2)" |
| resolution |
Legt die Pixel-Dichte des Zielbildschirms/Papieres (dpi oder dpcm) fest. Prefixe "min-" und "max-" können verwendet werden. Beispiel: media="print and (resolution:300dpi)" |
| scan |
Legt die Scanmethode des TV-Bildschirms fest. Mögliche Werte sind: "progressive" und "interlace". Beispiel: media="tv and (scan:interlace)" |
| grid |
Legt fest, ob das Ausgabegerät ein Gitter oder ein Raster ist. Mögliche Werte: "1" für Gitter, "0" für andere. Beispiel: media="handheld and (grid:1)" |
Browser-Unterstützung
Die in der Tabelle genannten Zahlen geben die Versionsnummer des ersten Browsers an, der diese Eigenschaft vollständig unterstützt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
