CSSMediaRule

The CSSMediaRule interface represents a single CSS @media rule.

Instance properties

Inherits properties from its ancestors CSSConditionRule, CSSGroupingRule, and CSSRule.

CSSMediaRule.media Read only

Returns a MediaList representing the intended destination medium for style information.

Instance methods

No specific methods; inherits methods from its ancestors CSSConditionRule, CSSGroupingRule, and CSSRule.

Examples

The CSS below includes a media query with one style rule. The MDN live sample infrastructure combines all the CSS blocks in the example into a single inline style with the id css-output, so we first use document.getElementById() to find that sheet. myRules[0] returns a CSSMediaRule object, from which we can get the mediaText.

<p id="log"></p>

@media (width >= 500px) {
 body {
 color: blue;
 }
}

const log = document.getElementById("log");
const myRules = document.getElementById("css-output").sheet.cssRules;
const mediaList = myRules[0]; // a CSSMediaRule representing the media query.
log.textContent += ` ${mediaList.media.mediaText}`;

Specifications

Browser compatibility