yuw27b’s blog

技術メモと雑記

CSSの擬似要素を使ったあれこれ

この記事は、今年お世話になったCSS Advent Calendar 2016の20日目です。

擬似要素自体は特に今年どうこうなった仕様ではありませんが、大変お世話になりました。

擬似要素をよく使う場面

自分的頻出パターンとしてはこんな感じです:

counterと組み合わせたリスト

See the Pen List with counter by Yu Watanabe (@yuw27b) on CodePen.


パンくずリスト

See the Pen Breadcrumb by Yu Watanabe (@yuw27b) on CodePen.


三角形

See the Pen Css triangle by Yu Watanabe (@yuw27b) on CodePen.


上下中央揃え

See the Pen Align middle by Yu Watanabe (@yuw27b) on CodePen.



「:」なの?「::」なの?

擬似要素は、CSS 2.1の仕様ではコロン1つの「:before」「:after」でしたが、CSS3ではコロン2つになりました。
CSS3はモダンブラウザとIE9以上が対応しているので、IE8のサポートが切れた今年(2016年)からは「::before」「::after」を使用すれば良いと思います。
とはいえ、IE8でも・・・という案件がなぜかまだあったり、各ブラウザも後方互換のため「:before」でもきちんと解釈してくれるし、という状況で、結局コロン1つで書くことも多かった1年でした。

Safariのバグに出会った

擬似要素とcurrentColorを組み合わせたときに発生します。Safari9で修正されたようです。
親要素のcurrentColorがうまく継承されない、というものです。
css - currentColor seems to get "stuck" in Safari - Stack Overflow
Bug 133420 – `currentColor` computes to the same colour on all elements, even if 'color' is inherited differently

ターゲットブラウザにSafari8が含まれそうなら、擬似要素内でのcurrentColorの使用は避けたほうが良いと思います。


来年の抱負は、Flexible Boxにお世話になりたい!です。
未だにIE9〜対応の案件もあるので難しそうですが、スマートフォン専用サイトならそろそろ使えそうですね。