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

第一引数は対象要素。

第二引数は疑似要素を指定する場合に使う。通常は第二引数は空文字列でいい。

第三引数はよくわからん＞＜

調べた。といっても amachang さんがリンクしてくれた Web Kit DOM: DOMWindow Interface Reference に "authorOnly" とあって、あとは実験で確かめられそうだけど、でもこれは自然科学ではないのです。

WebKit Trac で getMatchedCSSRules で検索 してみると、Changeset 11481 がみつかって、

Add support for more methods for exposing more useful style information.

getMatchedCSSRules can be used to obtain the matched sheet rules for an element. In Obj-C it will also include user/user agent sheet rules.

このメソッドを実装したまさにそのときのものらしく、上から下まで実装にたどりつける。

/trunk/WebCore/khtml/xml/dom2_viewsimpl.cpp の AbstractViewImpl::getMatchedCSSRules 経由で /trunk/WebCore/khtml/css/cssstyleselector.cpp の CSSStyleSelector::styleRulesForElement を読むと、authorOnly = true のときは、いくつかの処理をスキップしているのがわかる。マメにコメントもはいっていて良い。

ただ、いま読んだコードは最新では無いので、これを Safari 3 で確かめるのはちょっとちがう。trunk をみるとファイルの場所が移動していて、探す方法がわからなかったので、結局ソースコード全体を checkout して grep した。気軽に再現できる過程を書きたかったのに……。

えーと、今日の時点ではそれぞれ /trunk/WebCore/page/DOMWindow.cpp, /trunk/WebCore/css/cssstyleselector.cpp にあります。Changeset 11481 のころと処理の流れ自体はあまり変わっていない。

if (!authorOnly) {
    int firstUARule = -1, lastUARule = -1;
    // First we match rules from the user agent sheet.
    matchUARules(firstUARule, lastUARule);

    // Now we check user sheet rules.
    int firstUserRule = -1, lastUserRule = -1;
    matchRules(m_userStyle, firstUserRule, lastUserRule);
}

// Check the rules in author sheets.
int firstAuthorRule = -1, lastAuthorRule = -1;
matchRules(m_authorStyle, firstAuthorRule, lastAuthorRule);

あとはこんなので、

<style type="text/css">
h1 { text-decoration: underline; }
</style>
<h1 style="color:red">hello</h1>
<script type="text/javascript">
var authorOnly = false; // or true
var rules = getMatchedCSSRules(document.getElementsByTagName('h1')[0], authorOnly);
for (var i = 0; i < rules.length; i++) {
  alert(rules[i].cssText);
}
</script>

authorOnly = false のときには、作者が指定した CSS だけでなくブラウザ側であててるデフォルトの CSS もとれることが、確認できます。