CSSMediaRule - @mediaのCSSルール
CSSMediaRuleは、@mediaのCSSルールを管理するための機能を備えたインターフェイスです。
概要
- 名前
- CSSMediaRule
- 継承
- CSSRule
- CSSGroupingRule
- CSSConditionRule
- CSSMediaRule
- IDL
[Exposed=Window] interface CSSMediaRule : CSSConditionRule { [SameObject, PutForwards=mediaText] readonly attribute MediaList media; };
- 仕様書
- https://drafts.csswg.org/css-conditional-3/#cssmediarule
チュートリアル
CSSMediaRuleは、CSSRuleListの各インデックスに含まれています。先にStyleSheetList、CSSStyleSheet、CSSRuleList、CSSRuleを理解して下さい。下記のような@mediaのCSSルールがCSSMediaRuleです。
@media screen and (min-width:250px) {
p#hoge { color: red ; }
p#hoge { background-color: #fffff0 ; }
}
コンストラクタ
コンストラクタはありません。
プロパティ
media
@mediaのクエリをMediaListで返します。
メソッド
固有のメソッドはありません。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
CSSMediaRule | ● | ● | ● | ● | ● 9+ | ● | ● | ● |
media | ● | ● | ● | ● | ● 9+ | ● | ● | ● |
関連記事
- CSSImportRule
- CSSImportRuleは、@importのCSSルールを管理するための機能を備えたインターフェイスです。
- CSSConditionRule
- CSSConditionRuleは、CSSMediaRuleとCSSSupportsRuleが共通して実装するインターフェイスです。
- CSSGroupingRule
- CSSGroupingRuleは、@media(CSSMediaRule)など、複数のCSSルールを子に含めるCSSルールが実装しているインターフェイスです。
- CSSRuleList
- CSSRuleListは、CSSルールの集合を管理するための機能を備えたインターフェイスです。