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, containing the value of the media attribute of the associated stylesheet.

Value

Returns a MediaList object.

The value of media can be set by passing a string containing the media attribute; for example "print".

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.

css
@import url("style.css") screen;
js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].media); //returns 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.

js
let myRules = document.styleSheets[0].cssRules;
myRules[0].media = "print";

Specifications

Specification
CSS Object Model (CSSOM)
# dom-cssimportrule-media

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
media

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support