SYNCERのロゴ
アイキャッチ画像

CSSRule - CSSルール

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の各インデックスに含まれています。先にStyleSheetListCSSStyleSheetCSSRuleListを理解して下さい。このインターフェイスは、各種類のCSSルールのインターフェイス、例えば、CSSStyleRuleCSSMediaRuleなどが共通して継承しています。直接このインターフェイスを取得することはできません。

@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であることを表します。

イベント

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

サポート状況

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

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
CSSRule 9+
CHARSET_RULE 9+
COUNTER_STYLE_RULE× 33+××××××
cssText 9+
FONT_FACE_RULE 9+
IMPORT_RULE 9+
KEYFRAMES_RULE 31+ 20+ 9.1+ 10+ 18+ 9.1+
KEYFRAME_RULE 31+ 20+ 9.1+ 10+ 18+ 9.1+
MARGIN_RULE××××××××
MEDIA_RULE 9+
NAMESPACE_RULE 47+ 16+ 10+ 9+ 10.0+×
PAGE_RULE 9+
parentRule 9+
parentStyleSheet 9+
STYLE_RULE 9+
SUPPORTS_RULE 28+ 17+ 9.1+× 15+ 9.1+ 4.4+
type 9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月14日 (土)
コンテンツを公開しました。