この記事は編集レビューを必要としています。ぜひご協力ください

CSSRule DOM インターフェースを実装したオブジェクトは、1 つの CSS @-規則を表します。CSSRule を実装しているオブジェクトへの参照は、CSS style sheetcssRules リストを見ることで取得できます。

これらには、さまざまな種類の規則があります。CSSRule インターフェースは、すべての規則に共通のプロパティを指定します。または、これらの規則のそれぞれの型のために、より専門的なインタフェースで指定されている特定の規則で、独自のプロパティを指定します。

構文

構文は WebIDL フォーマットを使用して提供されます。.

interface CSSRule {
    const unsigned short STYLE_RULE = 1;
    const unsigned short CHARSET_RULE = 2;
    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 KEYFRAMES_RULE = 7;
    const unsigned short KEYFRAME_RULE = 8;
    const unsigned short NAMESPACE_RULE = 10;
    const unsigned short COUNTER_STYLE_RULE = 11;
    const unsigned short SUPPORTS_RULE = 12;
    const unsigned short DOCUMENT_RULE = 13;
    const unsigned short FONT_FEATURE_VALUES_RULE = 14;
    const unsigned short VIEWPORT_RULE = 15;
    const unsigned short REGION_STYLE_RULE = 16;
    readonly attribute unsigned short type;
    attribute DOMString cssText;
    readonly attribute CSSRule? parentRule;
    readonly attribute CSSStyleSheet? parentStyleSheet;
};

すべての CSSRule インスタンスに共通のプロパティ

cssText
規則のテキスト表現を表す。例: "h1,h2 { font-size: 16pt }"
parentRule 読取専用
含まれている規則、または null を返す。例:この規則が @media ブロックに含まれている場合、 parent rule は CSSMediaRule になります。
parentStyleSheet 読取専用
この規則を含んでいるスタイルシートの CSSStyleSheet オブジェクトを返す。
type 読取専用
CSS 規則の型を示す Type constants のいずれか。

定数

型定数

CSSRule インターフェースは、規則の種類を識別するための CSSRuletype プロパティ(そして、実装しているインターフェースで指定された規則)と組み合わせて使用できる整数定数を指定します 。定数とインターフェースの関係は下記のとおりです:

規則特固有のインターフェース
CSSRule.STYLE_RULE 1 CSSStyleRule
CSSRule.MEDIA_RULE 4 CSSMediaRule
CSSRule.FONT_FACE_RULE 5 CSSFontFaceRule
CSSRule.PAGE_RULE 6 CSSPageRule
CSSRule.IMPORT_RULE 3 CSSImportRule
CSSRule.CHARSET_RULE 2 CSSCharsetRule
CSSRule.UNKNOWN_RULE 0 CSSUnknownRule
CSSRule.KEYFRAMES_RULE 7 CSSKeyframesRule [1]
CSSRule.KEYFRAME_RULE 8 CSSKeyframeRule [1]
Reserved for future use 9 将来的に、カラープロファイルの定義に使用されます。
CSSRule.NAMESPACE_RULE 10 CSSNamespaceRule
CSSRule.COUNTER_STYLE_RULE 11 CSSCounterStyleRule
CSSRule.SUPPORTS_RULE 12 CSSSupportsRule
CSSRule.DOCUMENT_RULE 13 CSSDocumentRule
CSSRule.FONT_FEATURE_VALUES_RULE 14 CSSFontFeatureValuesRule
CSSRule.VIEWPORT_RULE 15 CSSViewportRule
CSSRule.REGION_STYLE_RULE 16 CSSRegionStyleRule

定数の最新版非公式リストは CSSWG Wiki で確認できます。

[1] Firefox 19 以前の Gecko では、keyframe 関連の定数は、プレフィックス付きのバージョンのみ存在していました: CSSRule.MOZ_KEYFRAMES_RULE と CSSRule.MOZ_KEYFRAME_RULE です。Firefox 20 以降では、どちらのバージョンも使用できます。将来的にプレフィックス付きのバージョンは削除されるでしょう。

仕様

仕様書 策定状況 コメント
CSS Object Model (CSSOM)
CSSRule の定義
草案 CHARSET_RULEUNKNOWN_RULE の廃止。 NAMESPACE_RULE の追加。
CSS Conditional Rules Module Level 3
CSSRule の定義
勧告候補 SUPPORTS_RULEDOCUMENT_RULE は CSS Conditional Rules Level 4 に移されています)の追加。
CSS Animations
CSSRule の定義
草案 KEYFRAMES_RULE と KEYFRAME_RULE の追加。
Document Object Model (DOM) Level 2 Style Specification
CSSRule の定義
勧告  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有) (有) 9 (有) (有)
CSSCharsetRule 未サポート [1] 未サポート [3] ? 未サポート ?
CSSUnknownRule 未サポート [2] ? ? ? ?
機能 Android Android Webview Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート ? (有) (有) (有) (有) (有) (有)
CSSCharsetRule ? 未サポート [1] 未サポート [3] ? 未サポート ? 未サポート [1]
CSSUnknownRule ? 未サポート [2] ? ? ? ? 未サポート [2]

[1] Chrome 41.0 で削除されました。

[2] Chrome 45.0 で削除されました。

[3] Gecko 40 で削除されました。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: YuichiNukiyama, fscholz, ethertank, Sheppy
 最終更新者: YuichiNukiyama,