IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

Safari 3 に実装された、当たっている CSS ルールを全て抽出できる getMatchedCSSRules が凄い

JavaScript

今日は、まだまだ Safari 3 が熱い！

window オブジェクトを走査していたら、またしても面白そうな関数を見つけてしまった。
その名も getMatchedCSSRules ！！！

まずはデモをご覧ください

以下のブックマークレットを任意のサイトで実行すると、コンテンツの下に DOM Inspector のような要素が出現します。
そこで、要素を開いていくと Safari の場合は、どの CSS ルールが当たっているかを見る事ができます。

javascript:(function(){var d=document,s=d.createElement('script');s.className='css-inspector-script';d.body.appendChild(s);s.src='http://amachang.art-code.org/cssInspector.js'})()
実際に使っている様子

http://amachang.art-code.org/cssInspector.htm

これは、 getMatchedCSSRules 関数を使ってどの CSS ルールが要素に当たっているかを取る事ができるため簡単に実装できます。

getMatchedCSSRules の使いかた

こんな感じ

var rules = getMatchedCSSRules(element, '');
if (rules) {
  for (var i = 0; i < rules.length; i ++) {
    var rule = rules[i];
    alert(rule.selectorText);
    alert(rule.style.color);
    alert(rule.style.backgroundColor);
  }
}
引数

第一引数は対象要素。
第二引数は疑似要素を指定する場合に使う。通常は第二引数は空文字列でいい。
第三引数はよくわからん＞＜

取れるオブジェクトは

CSSRuleList ↓これ

// Introduced in DOM Level 2:
interface CSSRuleList {
  readonly attribute unsigned long    length;
  CSSRule            item(in unsigned long index);
};
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRuleList

JavaScript では、配列っぽく使えるのでこんな感じで回せる

for (var i = 0; i < rules.length; i ++) { var rule = rules[i] }

で、rules[i] は↓これで

// Introduced in DOM Level 2:
interface CSSStyleRule : CSSRule {
           attribute DOMString        selectorText;
                                        // raises(DOMException) on setting

  readonly attribute CSSStyleDeclaration  style;
};
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleRule

↑これは↓これを継承してる

// Introduced in DOM Level 2:
interface CSSRule {

  // RuleType
  const unsigned short      UNKNOWN_RULE                   = 0;
  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;

  readonly attribute unsigned short   type;
           attribute DOMString        cssText;
                                        // raises(DOMException) on setting

  readonly attribute CSSStyleSheet    parentStyleSheet;
  readonly attribute CSSRule          parentRule;
};
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule

なので、

alert(rule.cssText);      // .hoge#fuga { color: rgb(255, 0, 0); width: 100%; }
alert(rule.selectorText); // .hoge#fuga
alert(rule.style.cssText);// color: rgb(255, 0, 0); width: 100%;
alert(rule.style.color);  // rgb(255, 0, 0)
alert(rule.style.width);  // 100%
alert(rule.parentStyleSheet.href); // http://hoge.ho.ge/fuga.css

みたいなテキストが簡単にとれてしまう！

まとめ

テラ便利！！！
ちなみに仕様書っぽいものは http://webkit.org/docs/a00029.html これくらいしか見当たらない。