読者です 読者をやめる 読者になる 読者になる

ここにタイトルが入ります

デザイン&プログラミングのことも書くし、それ以外のことも書く。

【CSS】擬似要素を使って装飾を行う場合、ie8は::擬似要素というcssセレクタを理解しないことを利用する

css

Webデザインにおいて、CSSでちょっとした装飾を行う場合
擬似要素の:afterや:beforeを使うことがありますよね。


例えばこんなの↓
〜参考にさせていただきました!〜
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ | コリス
超簡単!CSS3だけでアイコンの矢印を表現する方法 | 福岡市で働く独学WEBデザイナーブログ|GAHAKU DESIGN


こういった装飾なんかで、CSS3を利用して実装した場合、
IE8での表示が厄介なことになります…


というのも、

IE9以上:css3に対応しているので問題ない
IE7以下:擬似要素(:before, :after)といった擬似要素が解釈(表示)されない
 →上記のようなちょっとしたデザインであればレガシーブラウザで表示されなくても問題ない


なのですが、IE8だと


IE8:擬似要素(:after,:before)は表示されるがCSS3は解釈されない
 →崩れた中途半端な装飾が表示されてしまう…

のです。(´・ω・`)
どうせならちゃんと表示されるか、一切表示されないかのどちらかにしたい。


CSS3から、擬似要素はコロン2つで表現するようになったことを利用する

じゃあどうするかというと、
CSS3から導入された擬似要素を::で表現する方法を使います。

例)

.hoge::after {
}

.hoge::before {
}

(今までどおりコロン1つも普通に使えるのですが)


装飾に使用する擬似要素のセレクタ:afterや:beforeを::after、::beforeに変えてあげることで
CSS3が理解できないIE8に無視(非表示に)させることができます。



graceful degradation的な考え?で、
古いブラウザはコンテンツに問題が無いようそれなりに見せられればいいかなと思うので、
もしIE8での表示を重要視しないのであればこれでいいかなと思いました。



おまけ:IE8への対応はいつまで??


IE8の対応っていつまですればいいんだろうと考えてみました。。

私が携わっているとあるWebサービスのブラウザ使用状況を調べてみると、
なんと10%がIE8を使っているとのこと(゜_゜)

XPは論外、vistaもそのうちサポート切れる(というかユーザー少ない)として
その半分(つまり全体の5%)はwindows7でIE8を使っている模様。
さすがに5%のユーザーを無視するわけにはいかない…

基本的にはMSがサポートしている間は対象とすべきだとすると、
windows7のサポートは2020年1月までだからそこまでIE8のめんどうみるの…か…?


…と思ったら2016年からは各OSで利用できる最新のIEのみサポート対象とするみたい!(;゚∀゚)=3


〜参考にさせていただきました!〜
Microsoft が IE のサポート ライフサイクル変更を発表、IE8 は 2016年1月にサポート終了 | WWW WATCH


あと1年ちょいの我慢かな!