WebCoding.jpコーディングと文字校正・校閲を同時進行できるサービス「ウェブコーディング.jp」

ご相談はお気軽にどうぞ 03-5369-1878

月別アーカイブ: 8月 2011

○秘

CSS3×PIE.htc の注意点

カテゴリ:コーディングTips

2011年8月5日

一部のCSS3をIE6.7.8で機能させる為の便利 javascript (.htcファイル)「PIE.htc」の注意点。

 

  • ・border-radius(ボックスに角丸をつける)
  • ・box-shadow(ボックスに陰影をつける)
  • ・border-image(境界線に画像を使う)
  • ・multiple background images(背景に最大4つの画像を使用できる)
  • ・linear-gradient as background image(背景にグラデーションをつける)
 

CSS3の中でも、実務にも無難に、クロスブラウザでも問題なく動作する、上記リストのスタイルを IE6.7.8 でも機能させてくれる「PIE.htc」。

使い方としては、CSS3 PIE: CSS3 decorations for IE からファイルをダウンロード、その中の「PIE.htc」ファイルのみを適宜アップロード。

CSS3のプロパティを使ったスタイルシートの末尾に「behavior: url(“/PIE.htc”);」と記述する。

だけど、これだけでは動作はしない。上記リストのスタイルごとに、PIE.htcを動作させる為のソースの記述に違いがあるが、それはまた後日。

そんな、もはや定番といえる「PIE.htc」だが、動作させるにあたっての注意点がいくつかある。

注意点その1。

「PIE.htc」へのパスを、基本的に相対パスではなく、”絶対パス” を使う。

例えば…

behavior: url(/PIE.htc);

とか

behavior: url(/js/PIE.htc);

と記述する!

相対パスでも使えるが、その際はCSSファイルからではなく “HTMLファイル” からの相対パスで指定する必要があるので注意!

 

注意点その2。

behaviorプロパティを使って「PIE.htc」ファイルを指定すると、一部のスタイルが無効になってしまうことがある。その場合は、behaviorプロパティを記述した箇所に、positionプロパティを加える。

position: relative;

「zoom: 1;」のように、おまじない的に常に記述しておいて損はナイと思う。

 

注意点その3。

サーバの仕様によっては、デフォルトで .htc ファイルを認識しない場合があるので、その際は「.htaccessファイル」

AddType text/x-component .htc

を追記する。

 

ちなみにチーフは「Coda×MAMP」のコンビで作業をしているが、

その際は Coda から「ファイルを開く」を選択し、

アプリケーション > MAMP > conf > apache > httpd.conf

の順に開く。

その開いたファイルの 1000行目前後のあたりに

AddType text/html .shtml .html .htm
AddOutputFilter INCLUDES .shtml .html .htm

とあるので、そこへ下記のように追記。

AddType text/html .shtml .html .htm
AddOutputFilter INCLUDES .shtml .html .htm
AddType text/x-component .htc

セーブしてMAMPを再起動すると、IE6.7.8 でも問題なく「PIE.htc」が動作しているはず。

 

といった訳で、「PIE.htc (IE6.7.8)」を捨て去る日が、一日でも早く訪れることを切に願いつずける日々でございます。

WebCoding.jp 第1事業部

チーフ専属秘書 左門寺バーバラ久美子でした。

 

 

 

 

 

読者登録

読者になる

このブログの更新情報が届きます

プロフィール

チーフ

ニックネーム:チーフ

血液型:A型

得意技:ブラインドコーディング

座右の銘:宵越しの金は持たない

口癖:「チェェェーック!」

愛犬:マレーシア生まれカラムーチョ大好きパグの "ジャッキー"

秘書:ニコ動とモンハンが生き甲斐 "左門寺バーバラ久美子"

カレンダー

2011年8月
« 11月   9月 »
1234567
891011121314
15161718192021
22232425262728
293031  

アーカイブ