カテゴリー

キーワード

 
> 【CSS】CSS3のセレクタとプロ...

【CSS】CSS3のセレクタとプロパティをIE8に対応させる方法


2015 年 4 月 7 日 投稿    view: 14309
タグ:
このエントリーをはてなブックマークに追加

CSS3 ie8対応

こんにちは、WEBマーケティング部の杉尾です。


CSS3のセレクタとプロパティをIE8に対応させる方法を紹介します。


よろしくお願いします。



ブラウザ国内シェア状況

とても便利なCSS3ですが、IE8ではほとんど対応していません。


そのIE8のブラウザ国内シェアは、2015年1~3月期で3.08%です。
参考:外部ページ
http://gs.statcounter.com/#browser_version-JP-monthly-201501-201503-bar


以前に比べるとかなり下がってきたとはいえ、アクセスを見ているとまだIE8からのものもあります。
完全に無視するには早いかなという印象です。


今、Webの現場ではCSS3を使いながら、IE8でも崩れない程度の対応をするということが増えている気がします。
しかし、案件によってはIE8対応必須ということもあるでしょう。


そんなときに、CSS3を使ってもIE8でスタイルを表現してくれるのが、


CSS3セレクタを対応させる『Selectivizr.js』と

CSS3プロパティを対応させる『CSS3 PIE


です。


CSS3セレクタを対応させる『Selectivizr.js』

まずはCSS3セレクタをIE8に対応させる『Selectivizr.js』です。(IE6~IE8対応です)


ファイルをダウンロード

公式HPにいきます。


Selectivizr.js公式HP画像


http://selectivizr.com/

Selectivizr.jsをダウンロードした「selectivizr-1.0.2.zip」を解凍してください。


解凍後、アップロードするファイル

フォルダ内にファイルが3つありますが、使うのは『selectivizr-min.js』がいいでしょう。
圧縮されていますので、selectivizr.jsの3分の1以下のファイルサイズです。


それをサーバーの任意のフォルダにアップロードします。


使い方

そして、<head></head>内にこう書いてください。

<script type="text/javascript" src="お好きなjsライブラリ"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<![endif]-->

注意点

1. 同時にjsライブラリ(jQueryやprototypeなど)を読まないと動かない。

これはハマりどころなので気をつけてください。
上記ソースをそのままコピペしても動きません。『お好きなjsライブラリ』の部分をjQueryなりprototype.jsなりに書き換えてください。


2. CSSを外部ファイルに書かないと動かない。

importでの読み込みも動きません。


3. サーバーにアップロードしないと動かない。

ローカルだと動きません。


4. 全てのCSS3セレクタに対応しているわけではない。

読み込んだjsライブラリによって、どのセレクタに対応するかが違ってきます。
対応表は公式ページの下の方にあります。


http://selectivizr.com/


ちなみに…
[if lt IE 9]のltとは『less than』の略です。
つまり、『IE9未満』ということです。


IE8以下に対応させるもう一つの書き方は『lte IE 8』です。
このlteは『less than equal』という意味です。
つまり、『IE8以下』ということですね。


どちらも同じ指定になりますが、書き間違いのないように気をつけてください。


CSS3プロパティを対応させる『CSS3 PIE』

次に、CSS3プロパティをIE8に対応させる『CSS3 PIE』です。(IE6~IE8対応です)


使えるプロパティ

使えるプロパティはこちらです。


・border-radius
・box-shadow
・border-image
・multiple background images
・linear-gradient


ファイルをダウンロード

まずは公式HPにいきます。


PIE css3の公式HP画像


http://css3pie.com/


ページ右端にある『Download』からダウンロードページへ行きます。
安定版のPIE 1.0.0をダウンロードしてください。zipファイルを解凍します。


解凍後、アップロードするファイル

5つのファイルが入っていると思います。


アップロードするのはPIE.htcです。
htcファイルを読み込めないことがあるので注意。下記、注意点を参照)


使い方

このように書いてください。

div {
    box-shadow: 20px 20px 10px #777777;
    behavior: url(/サイトルート相対パス/PIE.htc);
}

behavior: url(/サイトルート相対パス/PIE.htc);を最後に書いてください


サイトルート相対パスとは、


ディレクトリ構造を表す画像


このような場合、page.htmlでimage.jpgを読み込みたいとき、


<img src="/img/image.jpg">

と書きます。


画像内ではHPフォルダがサイトルートですね。
そこを省略して書く方法です。


パスの書き方についてはコチラ ⇒
HTMLの相対パス、絶対パスを紹介します【HTML5実践編】


色々なパスの書き方を試してみましたが、どうやらこの書き方がよさそうです。


注意点

1. すべてのプロパティが使えるわけではない。


2. PIE.htcへのパスは『サイトルート相対パス』


3. 標準の形式のCSSを書かないと動かない

ベンダープレフィックスはあってもいいが、ベンダープレフィックスなしのCSSも併記しないと動かない。


ベンダープレフィックスについてはコチラ ⇒ 【CSS3】 ベンダープレフィックスとは? (プロパティによっては不要) 


4.色は16進数で表記

background-color:red;のような形だと動きません。
background-color:#ff0000;と書いてください。


5. グラデーションの場合(linear-gradient)の場合、独自のプレフィックスが必要

-pie-をつける必要があります。そして書式はこの形でないと反映されません。


div {
    background: -webkit-gradient(top,#f0f0f0, #333333);
    background : linear-gradient(to bottom, #f0f0f0, #333333) ;
    -pie-background: linear-gradient(top, #f0f0f0, #333333);
    behavior: url(サイトルート相対パス/PIE.htc);
}

6.うまくいかない場合は「position: relative;」を一番最後に追記。


7. WebサーバーでContentTypeを追加していないと、動かない(ことがある)

Webサーバーがhtcという拡張子のファイルを許可していない場合は使えません。


対処法は以下の3つのうちのどれかです。


1. MIMEタイプを追加で登録する
MIMEタイプの追加登録はコチラ(外部ページ)
http://www.adminweb.jp/apache/docroot/index4.html


2. .htaccessファイルに「AddType text/x-component .htc」の1行を追記する


3. MIMEタイプを追加できない場合は『PIE.js』と『PIE.php』をアップロードして、PIE.jsを対象ファイルで読み込む。


まとめ

個人的に余計なファイルを読み込むのは、あまり好きではありません。


画像で対応するとか、そもそも『border-radius』なんかは角が四角くなってもおかしくないデザインにするとか、他にも方法はあります。


ですが、案件によってはIE8にどうしてもスタイルを適用させないといけないってことがあるかもしれません。


そういうときに、使える方法ですね。


最後までお読みいただき、ありがとうございました。



よろしければ、こちらもどうぞ。


【CSS】CSS3で追加されたセレクタ 19選!!


 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事