CSSMediaRule: media property
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 read-only media property of the CSSMediaRule interface contains a MediaList object representing the media query list of the @media rule.
Value
A MediaList object.
Although the media property itself is read-only in the sense that you can't replace the MediaList object, you can still assign to the media property directly, which is equivalent to assigning to its mediaText property. You can also modify the MediaList object using the appendMedium() and deleteMedium() methods.
Examples
The CSS includes a media query with one style rule. This will be the first
CSSRule returned by document.styleSheets[0].cssRules.
Calling myRules[0].media therefore returns a MediaList
object representing the media query.
@media (width >= 500px) {
body {
color: blue;
}
}
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].media); // a MediaList
Specifications
| Specification |
|---|
| CSS Conditional Rules Module Level 3 # dom-cssmediarule-media |