スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Trackback URL

http://jsnt.blog.fc2.com/tb.php/5-c8e1c92a

Comment Form

Comment Form
Only inform the site author.

Comments: -

2013-04-03 Wed 08:55:47

このコメントは管理者の承認待ちです

Trackback: -

IEをCSS3に対応させるCSS3 PIEのJavaScript版を使う

css3pie.png

IEをCSS3に対応させるのにCSS3 PIE使いたいけど、htcファイルってFC2ブログにアップロードできないし、htcって何か気持ち悪いのであんまり使いたくないって人のためのタイプです。

まずはダウンロード

CSS3 PIEをダウンロードしてzipファイルを解凍すると、 PIE.htcの他にPIE.jsってのが入ってますね。
今回はこれを使います。

SCRIPTを読み込み

最初にPIE.jsを読み込むタグを記述します。

<script type="text/javascript" src="PIE.js"></script>

CSSでスタイルを設定

CSSファイルにはbox-shadowなどのプロパティを設定するかと思いますが、 PIEを適用した要素はこれらのプロパティを自動で読み込んで対応します。
また、PIEで対応したものは少し表示に誤差が出たりするので、 プロパティの先頭に「-pie-」を付けたものを記述しておくとそちらを優先してくれます。

セレクタについて

PIEではCSS3のセレクタに対応するためにclassを割り振るようになっているようです。
とはいっても、まだhoverとfirst-childしか対応できていないっぽいです。
class名はpie_hoverやpie_first-childといったように先頭に「pie_」を付けたものになっています。

JavaScriptで要素にPIEを適用させる

ここまできたらPIEを適用させるだけです。
PIEを適用させるにはPIE.attachメソッドを使います。
例えばjQueryを使って、

$(function()
{
  $('div.css3').each(function()
  {
    PIE.attach(this);
  });
});

なんてやるとdiv.css3にPIEが適用されます。

JavaScript版の欠点

JavaScript版にはhtcに対して欠点がいくつかあります。JavaScriptなので当たり前と言えば当たり前ですが。

  • DOM要素が読み込まれる前にattachできない。
  • 自動で適用(attach)されない。自分でattachする必要がある。

IEしか使わないんだから・・・

余計な読み込みを減らすために、こんな風にするのも手ですね!

<!--[if IE]><script type="text/javascript" src="PIE.js"></script><![endif]-->

Trackback URL

http://jsnt.blog.fc2.com/tb.php/5-c8e1c92a

Comment Form

Comment Form
Only inform the site author.

Comments: 1

2013-04-03 Wed 08:55:47

このコメントは管理者の承認待ちです

Trackback: 0

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。