CSSMediaRule

{{ APIRef("CSSOM") }}

The CSSMediaRule interface represents a single CSS {{cssxref("@media")}} rule.

{{InheritanceDiagram}}

Instance properties

Inherits properties from its ancestors {{domxref("CSSConditionRule")}}, {{domxref("CSSGroupingRule")}}, and {{domxref("CSSRule")}}.

• {{domxref("CSSMediaRule.media")}} {{ReadOnlyInline}}
  • : Returns a {{domxref("MediaList")}} representing the intended destination medium for style information.

Instance methods

No specific methods; inherits methods from its ancestors {{domxref("CSSConditionRule")}}, {{domxref("CSSGroupingRule")}}, and {{domxref("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 {{domxref("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}`;

{{EmbedLiveSample("Examples","100%","50px")}}

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}