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.

TheCSSMediaRule interface represents a single CSS@media rule.

Instance properties

Inherits properties from its ancestorsCSSConditionRule,CSSGroupingRule, andCSSRule.

CSSMediaRule.mediaRead only: Returns aMediaList representing the intended destination medium for style information.

Instance methods

No specific methods; inherits methods from its ancestorsCSSConditionRule,CSSGroupingRule, andCSSRule.

The CSS below includes a media query with one style rule.The MDNlive sample infrastructure combines all the CSS blocks in the example into a single inline style with the idcss-output, so we first usedocument.getElementById() to find that sheet.myRules[0] returns aCSSMediaRule object, from which we can get themediaText.

html

<p></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}`;