CSSImportRule: 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 CSSImportRule interface returns a MediaList object representing the media query list of the @import 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
Getting the media property
The following stylesheet includes a single @import rule. Therefore the
first item in the list of CSS rules will be a CSSImportRule. The
media property returns a MediaList object. This includes
the mediaText property with a value of screen.
@import "style.css" screen;
const myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].media); // A MediaList
Setting the media property
To change the media attribute of the associated stylesheet, set the value of media to a string containing the new value.
const myRules = document.styleSheets[0].cssRules;
myRules[0].media = "print";
Specifications
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-cssimportrule-media |