• RSS

[IE]IE6、IE7、IE8 でも一部の CSS3 のプロパティが使える「PIE.htc」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

IE下位バージョンでも CSS3 の border-radiusbox-shadowlinear-gradient などを利用できる便利な「PIE.htc」。

今回はこの PIE.htc ファイルの基本的な設置方法から「動かない時の対処法」まで簡単にまとめて紹介いたします。

PIE.htc で利用できるプロパティ

PIE.htc を使うことで、以下の有名どころの CSS3 プロパティがIE下位バージョンでも利用できるようになります。
・border-radius
・box-shadow
・linear-gradient

IE-CSS3.htc との大きな違いは、text-shadow が利用できない分、グラデーション(linear-gradient)を利用できる、という感じでしょうか。
※その他の利用可能なプロパティは、以下の参考ページも合わせてご覧下さい。


PIE.htc ファイルのダウンロード

以下のページより PIE.htc ファイルをダウンロードします。


CSS 内への PIE.htc の設置例

以下のコードは「角丸の border-radius」と組み合わせた例ですが、IEのビヘイビア 機能を利用して HTC ファイルをHTML 上で使用できるようにします。

behavior には PIE.htc ファイルへのパスを記述します。


PIE.htc が動かない場合の対処法

上記例のような記述だけでは動かないことがよくあります( ´,_ゝ`) ので、その場合は以下の3つのポイントに注意してソースを見直すなどしてみましょう。

(1)PIE.htc を絶対パスにする

behavior で指定する PIE.htc ファイルへのパスを「絶対パス」にする方法です。


相対パスで階層がズレていると「IEだけページが見れない(404 Not Found)」なんて事態に陥る場合がありますので、個人的な経験則から、出来れば「絶対パス」で指定した方が安全かなと思います。

(2)PIE.htc を適用する要素に position:relative を適用

PIE.htc ファイルを使う要素内で position:relative を指定します。
position:relative を置く事でレイアウトが崩れる問題がなければ概ねこの方法で解決します。



(3)htaccess ファイルの編集

サーバによっては「.htc の拡張子を認識しないがために PIE.htc が動かない」場合があるようですので、.htaccess ファイルに以下のコードを記述してサーバにアップし、

.htc の拡張子をテキスト形式であることを示してあげます。


PIE.htc を使ったサンプル

PIE.htc を利用したIE8 以下向けのサンプルは、
border-radiusbox-shadowlinear-gradient に絞ってこちらの記事に掲載していますので、合わせて参考にしてみてください。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください