Explorerのどのバージョンに対応させるかは、制作を始める前に話し合っておいた方がいい問題点のひとつです。私の場合2013年に入ってからはIE6やIE7に対応させる機会は皆無となり、IE8・IE9に対応させるかを議論しているところですが、皆さんはいかがでしょうか?今回はもしIE8を切り捨てる(IE9〜のサポート)なら使える便利なプロパティーやセレクターを紹介します。Statsの調査によると、日本のブラウザバージョン別シェア(2013年10月)はIE10が30.78%で1位、Chromeが17.79%で2位、IE8は10.78%で3位となっています。この調子でいくとIE8のシェアは早ければ今年中には10%を下回りそうです。IE9は6.82%で5位。IE8を切るならIE9も飛ばしてIE10からの対応でもよさそうです。38.18%に対し、IE8は5.93%。このようにテクノロジー関連のサイトではIE8ユーザーの低下が著しく、切り捨ての準備に入ってもいいかなーと思います。Analytics等で確認する必要がありますね。2.x)ではIE8以下のブラウザーをサポートしていません。先日GoogleもIE9以下のサポート打ち切りを発表(GoogleがIE9のサポート打ち切り決定、Gmail・Googleカレンダー・Googleドライブなどに影響)し、最近巷を賑わせているWebサイト作成サービスWIXもHTML5に対応していないIE8以下のブラウザーをサポートしていません。その他、様々なサービスや制作会社がIE8のサポートを打ち切っていってます。HTML5やCSS3の各ブラウザーの対応状況が一覧表示されています。IE9からだいぶメジャーどころなセレクターやプロパティーが対応されているのがわかりますね。今回の記事ではその中でも特に「これが使えると便利だなー」というプロパティーとセレクターを紹介します。複数の背景画像カンマで区切って複数の背景画像を重ねて表示することができます。リピートや表示位置を指定するときも、各プロパティーごとにカンマで区切って指定。背景のためだけに使う無駄なdivを作る必要もなくなります。背景画像の位置を指定するには、要素の左端からとされていました。いうように書けば右からも指定することができます。使ったことがある方もいらっしゃるかと思います。縦横のpxを指定するだけでなく、様々な値が用意されています。画像の縦横比を保ったまま要素にフィットさせて表示できます。下の例では横幅900pxの画像を背景に使っていますが、横幅640pxのdivにフィットさせて表示しています。border-radius。角丸ボックスに使われるプロパティーですね。IE9でも対応になりました!例では画像に適応させていますが、divなど他の要素にももちろん加えることができます。CodePenbox-shadow(シャドウ)要素の外側や内側に影をプラスすることができるプロパティー。色や大きさを変えていろんな表現が可能になります。CodePenopacity(要素の透明度)要素の透明度を変更できます。例では画像にカーソルをあわせると、画像の透明度が50%に変化します。CodePentransform(変形)要素の形を変形させて表示することができるプロパティー。2Dと3Dがありますが、IE9に対応しているのは2Dのみです。ベンダープレフィックスが必要。変形方法にもいくつか種類があります。詳しくは「transform-CSS3リファレンス」を参考にして試してください。rotate(回転)を例にあげています。Alphaが加わったことで、色の透明度も指定できます。RGB値をカンマで区切り、最後に透明度(0が透明、1が不透明)を入力します。#000000のようなカラーコードは使用できないので注意。いう単位が使えるようになります。HTML要素(root)を継承するので、どれだけ入れ子になって階層が深くなっても、フォントサイズが影響されることはありません。n番目の行を装飾できます。例では1番めの行をピンクに、偶数の行をオレンジに指定しています。その他以下のような書き方もできます。CodePen:checkedチェックボックスやラジオボタンがチェックされた時の要素を指定できます。要素を装飾するのが無難です。CodePen:targetアンカーリンクで飛んだ先の要素を装飾します。応用し、メニューアイコンをクリックすると、アンカーリンク先であるメニューパネルが上からふわりと降りてくるエフェクトを実装しています。CodePen:empty空の要素を装飾します。要素を黄色に、それ以外をピンクにしています。CodePen:not()指定した要素以外の要素に適応させるためのセレクター。クラスがついた要素以外の文字をピンクにしています。」で紹介されているような素敵エフェクトも気軽に実装できるようになります!まだまだメリットばかりとは言えないかもしれませんが、HTMLやCSSでの表現の幅が広がるのではないかなと思います。皆さんはIE8切り捨ての準備を進めていますか?シェアするTwitterFacebookはてブPocketニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。