CSSMediaRule

The CSSMediaRule interface represents a single CSS @media rule.

Properties

Inherits properties from its ancestors CSSConditionRule, CSSGroupingRule, and CSSRule.

CSSMediaRule.media Read only
Returns a MediaList representing the intended destination medium for style information.

Methods

No specific methods; inherits methods from its ancestors CSSConditionRule, CSSGroupingRule, and CSSRule.

Examples

The CSS includes a media query with one style rule. This will be the first CSSRule returned by document.styleSheets[0].cssRules. myRules[0] therefore returns a CSSMediaRule object.

@media (min-width: 500px) {
  body {
    color: blue;
  }
}
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // a CSSMediaRule representing the media query.

Specifications

Specification Status Comment
CSS Conditional Rules Module Level 3
The definition of 'CSSMediaRule' in that specification.
Candidate Recommendation Make it derived from the CSSConditionRule.
CSS Object Model (CSSOM)
The definition of 'CSSMediaRule' in that specification.
Working Draft No changes from Document Object Model (DOM) Level 2 Style Specification
Document Object Model (DOM) Level 2 Style Specification
The definition of 'CSSMediaRule' in that specification.
Obsolete

Browser compatibility

BCD tables only load in the browser