擬似要素 (pseudo element) の取得

　IE 8 から、擬似要素がサポートされて、現在すべてのブラウザーがサポートされるようになりました。:before や, :after を使えば、DOM Tree は時に綺麗になることがあります。例えば、アイコンをある要素の前に挿入した場合、通常 <i> 要素を入れるか、background-image を使って、padding を追加する方法がありますが、擬似要素の :before の content に url(xxxx) を入れると、background-image と同じ効果になります。そうすると、余計なことをしなくて、単純にそのアイコンを操作することができます。
　昨日、サイトに :before 要素を javascript で取得して、操作しようとのケースがありました。擬似要素をどのように javascript で取得するかを調べてみました。メモしておきます。
    window.getComputedStyle(element, ':before')
　content attribute を取得する場合、上記で取得したスタイルの後ろに .content を追加すれば、取得できます。
　また擬似要素の content に複数文字列を表示したい場合、単純に
　 el:before {
        content: "Num" counter(item) "."
    }
　のようにリストすればいいです。

　CSS にこのような擬似要素を使えば、いろんな面白い効果ができます。例えば：
　CSS icons
　また、今流行っている font graphic を使えば、例えば、
　Font Awesome
　このように、フォントを使えば、font-size を使えば、大きさも調整できるし、Retina の hi-res のスクリーンも難なく対応できます。SVG より、こっちのほうが使い易いと思います。
　それでは。

iOS7 WebView media query update

　今日、テスターがある変なバグを発見しました。それは、iOS 7 retina であるホームページのアイコンがずれました。
　もともt、background-size と background-position で sprite イメージをいろんなところにある小さいアイコンを表示していますが、その background-size が効かなくなって、background-position も正しく計算できないようになって、その現象が起きました。
　ただ、起きるところと起きないところがあって、どうしただろうなと思いました。詳しく見て、比較したら、css の書き方に問題があるような気がしていました。
　media query では、-webkit-device-pixel-ratio をチェックして、2 だったら、retina 用のイメージを background-image に再設定すべきですが、@2x のイメージをまた background-size でリサイズして、半分に変更して、また前の background-position が同じように使えます。
　問題あるところは background: url(../images/sprite@2x.png) no-repeat 0 0; となっていて、background-size はその前で設定していました。
　iOS6 以前だったら、background-image しか影響しないですが、 iOS7 だと、background の値がすべてリセットするそうです。そうすると、background-size が auto auto になり、リサイズが失敗します。
　直し方が簡単です、background の代わりに、background-image だけ設定して、他のものを触らないようにすれば、直ります。
　これは background というものは結構暗黙に設定する値があるので、明示的に各値を設定すべきだと思います。
    background -> background-color, background-image, background-repeat, background-position...

　ついてに、すべての背景イメージは sprite にすべきです。これはまた書きます。
　それでは。：）