CSSRule - CSSルール

2017/10/14

CSSRuleは、CSSルールを管理するための機能を備えたインターフェイスです。

概要

名前

CSSRule

IDL

[Exposed=Window]
interface CSSRule {
  const unsigned short STYLE_RULE = 1;
  const unsigned short CHARSET_RULE = 2; // historical
  const unsigned short IMPORT_RULE = 3;
  const unsigned short MEDIA_RULE = 4;
  const unsigned short FONT_FACE_RULE = 5;
  const unsigned short PAGE_RULE = 6;
  const unsigned short MARGIN_RULE = 9;
  const unsigned short NAMESPACE_RULE = 10;
  readonly attribute unsigned short type;
  attribute CSSOMString cssText;
  readonly attribute CSSRule? parentRule;
  readonly attribute CSSStyleSheet? parentStyleSheet;
};

typedef USVString CSSOMString;

// CSS Conditional Rules Module
partial interface CSSRule {
    const unsigned short SUPPORTS_RULE = 12;
};

// CSS Animations
partial interface CSSRule {
    const unsigned short KEYFRAMES_RULE = 7;
    const unsigned short KEYFRAME_RULE = 8;
};

// CSS Counter Styles
partial interface CSSRule {
    const unsigned short COUNTER_STYLE_RULE = 11;
};

仕様書

https://drafts.csswg.org/cssom/#cssrule

https://drafts.csswg.org/css-conditional-3/#extentions-to-cssrule-interface (CSS Conditional Rules Module)

https://drafts.csswg.org/css-animations/#interface-cssrule-idl (CSS Animations)

https://drafts.csswg.org/css-counter-styles-3/#extentions-to-cssrule-interface (CSS Counter Styles)

チュートリアル

CSSRuleは、CSSRuleListの各インデックスに含まれています。先にStyleSheetList、CSSStyleSheet、CSSRuleListを理解して下さい。このインターフェイスは、各種類のCSSルールのインターフェイス、例えば、CSSStyleRuleやCSSMediaRuleなどが共通して継承しています。直接このインターフェイスを取得することはできません。

@import url( ./demo.css ) ;	/* CSSImportRule (CSSRuleを継承) */
p { color: red ; }	/* CSSStyleRule (CSSRuleを継承) */
@page m50 { margin:50mm ; }	/* CSSPageRule (CSSRuleを継承) */
@media all { /*...*/ }	/* CSSMediaRule (CSSRuleを継承) */
@supports( color: red ) { /*...*/ }	/* CSSSupportsRule (CSSRuleを継承) */

コンストラクタ

コンストラクタはありません。

プロパティ

cssText

CSSルールの内容を文字列で返します。

parentRule

親のCSSルールを返します。

parentStyleSheet

親のスタイルシートを返します。

type

CSSルールの種類を表す数値を返します。この数値は、定数に対応しています。

メソッド

固有のメソッドはありません。

定数

CHARSET_RULE

2を返します。この値は、CSSルールの分類が、@charsetであることを表します。

COUNTER_STYLE_RULE

11を返します。この値は、CSSルールの分類が、@counter-styleであることを表します。

FONT_FACE_RULE

5を返します。この値は、CSSルールの分類が、@font-faceであることを表します。

IMPORT_RULE

3を返します。この値は、CSSルールの分類が、@importであることを表します。

KEYFRAMES_RULE

7を返します。この値は、CSSルールの分類が、@keyframesであることを表します。

KEYFRAME_RULE

8を返します。この値は、CSSルールの分類が、@keyframesの各ルールであることを表します。

MARGIN_RULE

9を返します。

MEDIA_RULE

4を返します。この値は、CSSルールの分類が、@mediaであることを表します。

NAMESPACE_RULE

10を返します。この値は、CSSルールの分類が、@namespaceであることを表します。

PAGE_RULE

6を返します。この値は、CSSルールの分類が、@pageであることを表します。

STYLE_RULE

1を返します。この値は、CSSルールの分類が、通常のものであることを表します。

SUPPORTS_RULE

12を返します。この値は、CSSルールの分類が、@supportsであることを表します。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

Features	Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
CSSRule	●	●	●	●	●	●	●	●
CHARSET_RULE	●	●	●	●	●	●	●	●
COUNTER_STYLE_RULE	確認中	● 33+	確認中	確認中	確認中	×	確認中	確認中
cssText	●	●	●	●	●	●	●	●
FONT_FACE_RULE	●	●	●	●	●	●	●	●
IMPORT_RULE	●	●	●	●	●	●	●	●
KEYFRAMES_RULE	● 31+	● 20+	● 9.1+	●	● 10+	● 18+	● 9.1+	▲
KEYFRAME_RULE	● 31+	● 20+	● 9.1+	●	● 10+	● 18+	● 9.1+	▲
MARGIN_RULE	確認中	確認中	確認中	確認中	確認中	確認中	確認中	確認中
MEDIA_RULE	●	●	●	●	●	●	●	●
NAMESPACE_RULE	● 47+	● 16+	● 10+	●	● 9+	●	● 10.0+	×
PAGE_RULE	●	●	●	●	●	●	●	●
parentRule	●	●	●	●	●	●	●	●
parentStyleSheet	●	●	●	●	●	●	●	●
STYLE_RULE	●	●	●	●	●	●	●	●
SUPPORTS_RULE	● 28+	● 17+	● 9.1+	●	×	● 15+	● 9.1+	● 4.4+
type	●	●	●	●	●	●	●	●