CSSMediaRule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Die CSSMediaRule Schnittstelle repräsentiert eine einzelne CSS @media Regel.

CSSRule CSSGroupingRule CSSConditionRule CSSMediaRule

Instanzeigenschaften

Erbt Eigenschaften von seinen Vorfahren CSSConditionRule, CSSGroupingRule, und CSSRule.

CSSMediaRule.media Schreibgeschützt

Gibt eine MediaList zurück, die das vorgesehene Zielmedium für Stilinformationen darstellt.

Instanzmethoden

Keine spezifischen Methoden; erbt Methoden von seinen Vorfahren CSSConditionRule, CSSGroupingRule, und CSSRule.

Beispiele

Das folgende CSS enthält eine Media Query mit einer Stilregel. Da diese Regel im letzten zum Dokument hinzugefügten Stylesheet enthalten ist, wird sie die erste CSSRule sein, die vom letzten Stylesheet im Dokument (document.styleSheets[document.styleSheets.length-1].cssRules) zurückgegeben wird. myRules[0] gibt ein CSSMediaRule Objekt zurück, von dem wir das mediaText erhalten können.

html
<p id="log"></p>
css
@media (min-width: 500px) {
  body {
    color: blue;
  }
}
js
const log = document.getElementById("log");
const myRules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const mediaList = myRules[0]; // a CSSMediaRule representing the media query.
log.textContent += ` ${mediaList.media.mediaText}`;

Spezifikationen

Specification
CSS Conditional Rules Module Level 3
# the-cssmediarule-interface

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
CSSMediaRule
media

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.