2014-02-17

contentプロパティーの値とgetComputedStyle()

CSSのcontentプロパティーを使ってCSSのバージョン番号を仕込み、それをwindow.getComputedStyle()メソッドを使って表示してやろうと考えた(スタイル・ガイド用)。Chrome 32やFirefox 27では期待通りに動いたんだけど、Internet Explorer 11ではうまく拾えず、初期値であるnormalが返ってきた。どうやらIE11は擬似要素以外に指定したcontentプロパティーの値をgetComputedStyle()でうまく読めないようだ。バグではなさそう。

Demo: content property and getComputedStyle()

Chrome 32やFirefox 27ではYesとなる(引用符が付いたり付かなかったりはする)が、Internet Explorer 11ではnormalとなる。

デモではhtml要素に直接contentプロパティーでYesという値を仕込んでいる。

html {
  content: "Yes";
}

これをgetComputedStyle()を使って以下のようにして読み、指定要素の文字として追加しようとしている。

var s = window.getComputedStyle(
  document.querySelector('html'), null
).getPropertyValue('content');
document.getElementById('result').textContent += s;

特にエラーにはならず、CSSの解釈のズレがそのまま結果に反映され、Internet Explorer 11では初期値のnormalになってしまう。

擬似要素に指定されたcontentプロパティーの値なら、window.getComputedStyle()の第2引数で::beforeや::afterをちゃんと指定すれば読める。contentプロパティー以外に仕込むと正規化されちゃう可能性が高いので、結局これしか方法はなさそう。