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…