The CSSMediaRule interface represents a single CSS @media rule. It implements the CSSConditionRule interface, and therefore the CSSGroupingRule and the CSSRule interface with a type value of 4 (CSSRule.MEDIA_RULE).
Syntax
The syntax is described using the WebIDL format.
interface CSSMediaRule : CSSConditionRule {
readonly attribute MediaList media;
}
Properties
As a CSSConditionRule, and therefore both a CSSGroupingRule and a CSSRule, CSSMediaRule also implements the properties of these interfaces. It has the following specific property:
CSSMediaRule.mediaRead only- Specifies a
MediaListrepresenting the intended destination medium for style information.
Methods
As a CSSConditionRule, and therefore both a CSSGroupingRule and a CSSRule, CSSMediaRule also implements the methods of that interface. It has no specific methods.
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSSMediaRule | Chrome Full support 45 | Edge Full support ≤18 | Firefox
Full support
17
| IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android
Full support
17
| Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support 5.0 |
media | Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE ? | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- See implementation notes.
- See implementation notes.
