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.
The CSSMediaRule interface represents a single CSS @media rule.
Instance properties
Inherits properties from its ancestors CSSConditionRule, CSSGroupingRule, and CSSRule.
CSSMediaRule.mediaRead only-
Returns a
MediaListrepresenting 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
| Specification |
|---|
| CSS Conditional Rules Module Level 3> # the-cssmediarule-interface> |
Browser compatibility
Loading…