Signatur
Beschreibung
Die Eigenschaft media spiegelt das HTML-Attribut media eines <source>-Elements wider. Der Wert ist ein String mit einer Media Query wie (min-width: 800px), (prefers-color-scheme: dark) oder print. Beim Lesen erhältst du den aktuellen Attributwert, beim Schreiben wird das Attribut aktualisiert.
Am meisten bringt das Attribut innerhalb von <picture>: Der Browser geht die <source>-Elemente der Reihe nach durch und nimmt das erste, dessen Media Query zutrifft und dessen type er unterstützt. So kannst du Art Direction umsetzen, also je nach Viewport oder Farbschema unterschiedliche Bildausschnitte oder -varianten ausliefern.
Bei <video> und <audio> wurde media zeitweise aus der Spezifikation entfernt und ist erst vor Kurzem zurückgekehrt. Die Browser werten das Attribut dort seit etwa 2023 wieder aus, ältere Versionen ignorieren es aber. Hast du kein media-Attribut gesetzt, ist der Rückgabewert ein leerer String. Die Ressource gilt dann für alle Medien.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: eine gültige Media Query (z. B. "(max-width: 600px)"). Ein leerer String bedeutet: Die Ressource gilt für alle Medien. |
Rückgabewert
media-Attributs oder ein leerer String, wenn es nicht gesetzt ist.Beispiele
Media Query einer Bildquelle auslesen
// HTML:
// <picture>
// <source id="wide" media="(min-width: 800px)" srcset="hero-wide.jpg">
// <img src="hero-small.jpg" alt="Titelbild">
// </picture>
const source = document.getElementById('wide');
console.log(source.media);Prüfen, welche Quelle gerade zutrifft
const sources = document.querySelectorAll('picture source');
for (const src of sources) {
// Ohne media-Attribut gilt die Quelle immer
const passt = src.media === '' || window.matchMedia(src.media).matches;
console.log(`${src.srcset}: ${passt ? 'aktiv' : 'inaktiv'}`);
}Quelle für den Dark Mode dynamisch anlegen
const picture = document.querySelector('picture');
const darkSource = document.createElement('source');
darkSource.srcset = 'logo-dark.svg';
darkSource.media = '(prefers-color-scheme: dark)';
// Muss vor <img> stehen, damit der Browser sie berücksichtigt
picture.prepend(darkSource);
console.log(darkSource.getAttribute('media'));Breakpoint nachträglich ändern
const source = document.querySelector('source[media]');
source.media = '(min-width: 1024px)';
// Viele Browser wählen das Bild neu, wenn sich die Quellen ändern
console.log(source.media);// Wichtig · Fallstricke
- Keine Prüfung beim Setzen: Der Browser nimmt jeden String an, ohne ihn zu prüfen. Eine ungültige Media Query löst keinen Fehler aus. Die Quelle trifft dann einfach nie zu (
matchMedialiefertnot all). - Reihenfolge zählt: In
<picture>gewinnt das erste passende<source>. Allgemeinere Queries gehören deshalb ans Ende, und das<img>steht immer als letztes Element. - Audio/Video: Für
<video>und<audio>werten Browsermediaerst seit etwa 2023 wieder aus (Chrome 120, Firefox 120, Safari schon länger). Ältere Browser ignorieren es und nehmen die erste abspielbare Quelle. - Kein automatischer Wechsel bei Medien: Wechselt die Media Query bei einem bereits geladenen Video, tauscht der Browser die Quelle nicht von selbst aus. Dazu musst du
load()aufrufen. - In
<picture>werden Media-Query-Änderungen, etwa beim Vergrößern des Fensters, automatisch berücksichtigt. Du musst dafür kein JavaScript schreiben.