CSSMediaRule

Baseline Widely available

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

Learn more
See full compatibility

The CSSMediaRule interface of the CSS Object Model (CSSOM) 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.

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.

html

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

css

@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}`;