今回の記事は、多少CSSに触った方なら、ああ、と察しがつく、全くCSSに触った事の無い方には何だか良くわからない、若干専門的な内容になります。
CSSには疑似クラスや疑似要素という大変便利なセレクタ機能があります。
疑似クラスは「:hover」とか「:active」とかの、いわゆるリンクボタンなどに多用する仕組みです。CSS3からは「:nth-child(n)」なども追加されました。
:link 未訪問リンク
:visited クリック済み
:hover カーソルが乗っている
:active クリック中
:nth-child(n) n番目の子要素
:nth-of-type(n) n番目のその種類の要素
:first-of-type 最初のその種類の要素
疑似要素は「::before」や「::after」などといった、CSSから要素を設定できる仕組みです。HTMLを簡潔に仕上げる上で欠かせない存在であり、clearfixなどに用います。
::first-line 最初の行
::first-letter 最初の文字
::before 直前の要素
::after 直後の要素
これらは要素名の後ろにコロンを挟んで記述するのですが、実はブラウザの環境によって微妙に有効な書き方が変わってくることがあります。
現行のCSSの最新バージョンであるCSS3では、疑似クラスの前に付いているコロンは一つ、疑似要素の前に付いているコロンは二つとなっています。
一方、古いバージョンであるCSS2では、疑似クラスも疑似要素もともに使用するコロンは一つなのです。このバージョンによる記述の仕方の違いが、疑似要素を使用する上で少しややこしい事態を引き起こしています。
最新バージョンのブラウザにおいては、CSS3に準拠した記述を行えば疑似要素は正しく表示されます。ところが古いブラウザ、特にインターネットエクスプローラー8以前のものとなると、CSS2以前の書き方でしか対応していません。
つまり、コロンを二つにするとモダンブラウザでのみ、コロンを一つにするとレガシーブラウザでのみ使用できるのです。
ただし、後方互換モードのインターネットエクスプローラー9以上とインターネットエクスプローラー6のみ、コロンを一つの場合でも二つの場合でも同じように解釈されます。インターネットエクスプローラー6はCSS3に対応している訳ではなく、単にコロンの数に制限が無いだけです。
コロン二つに対応 各種モダンブラウザ
コロン一つに対応 インターネットエクスプローラー8以前
コロン数制限無し インターネットエクスプローラー6
スマートフォンなどのみで表示するサイトならばコロン二つで問題ないと思われます。
しかし多くのサイトはあらゆる環境のパソコン上でも表示させなければならないため、少し考える必要が有ります。
具体的な対応の仕方としては、コロン一つと二つの二パターンのセレクタをCSSに記述するか、selectivizr.jsやCSS3 Pieなどを使用して上手く古いブラウザに対応できるように作る必要が有ります。何にしても若干コードが煩雑になることは避けられません。
WindowsXPのサポート終了に伴い、インターネットエクスプローラー8もまた現状のウェブのトレンドに対応できなくなりました。未だにインターネットエクスプローラー8を使用している方は、安全で快適なインターネット利用を行うために、早めに新しい環境を用意しましょう。