基本的にIEはCSS3に対応していませんが、スクリプトを追加することで角丸やボックスシャドウなどのCSS3のプロパティをいくつか使用することができるようになります。案件で、画像ではなくフォームのボタン等で角丸を実装したい場面がありまして、今回そういったスクリプトの一つであるCSS3 PIEを使用してみました。
設置方法はごくごく簡単で、PIE.htcをダウンロードしてサーバに置き、実装したいCSSの末尾にbehavior: url(PIE.htc);と書き加えるだけです。さらに詳しい説明は、下記リンク先などでご覧になれますので割愛します。
簡単に実装できるCSS3プロパティ…しかもIEにも対応できる
さてさて、上記サイトにあるやり方で実装し、いざ見てみたら全然効いていない、なんてことでこのエントリにたどり着いたりしたのではないですか？
実際僕も動かなくて困った口です。まず設置してみるとはなから全く機能せず、試行錯誤の末なんとか動かしたと思ったら、親要素のCSSをちょっと弄っただけで崩れたり。どうやらこのスクリプト色々と微妙なバランスの上に成り立っているらしいのです。
そういった情報のシェアの意味でも、僕がひっかかった箇所を記しておこうと思います。
パスは実行ファイルから参照できるパスであること
まず、以下の記述について
behavior: url(PIE.htc);
解説サイトを見るとあっさり書いてあって特に触れていないので当初わからなかったのですが、このurl部分は、それが実行されたファイルからたどり着けるパスで記述する必要があります。
例えばimgファイルなどをCSSに相対パスで記述する場合。CSSファイルの置かれた場所を起点とした相対パスで書けば良いので、たいていは(../images/aaa.jpg)などの記述で賄えるのではないでしょうか。
ところがこのhtcファイルを相対パスで呼ぶ場合は、呼び出すファイルではなく、cssが実行されたそのページのurlを起点とした相対パスによって記述される必要があるため、トップと下層で呼び出す場合はurlが異なります。
例としてPIE.htcをルートのcssフォルダに置いた場合、トップから呼ぶときは(css/PIE.htc)となり、下層ページでは(../css/PIE.htc)となるわけです。
結局、可能であればhttp://から書いたり、/css/などの記述法でドキュメントルートから参照できるようにしたり、などの対応がよいのかもしれません。
親要素がbackgroundを指定している場合、背景と境界線が消える
これは結構衝撃でした。角丸などを当てた要素を内包している親要素にbackground-colorなどが指定されている場合、その子要素の背景と境界線が丸ごと消えてしまうんです。
これは子要素にposition:relativeを指定してやればなおります。IEでネガティブマージンを使うとき、重なった要素が消えてしまう際の対策と同じですね。でも、これでなおらないこともあるんです。恐らく親要素がpositionを指定してるか否か、とかそういう類の他の要素も若干影響はしているようです。どうしても出ないときは、どんどん遡って親要素にposition指定してみるとか、逆に子要素自体からはpositionを取ってみる、などをやってみるとうまく出ることがありました。
親要素にtext-align:rightを指定していると。テキストから背景と境界線が大きくずれる
これはこのhtcのせいのみとは言いがたいかもしれませんが、親要素にtext-align:rightを指定していると背景と境界線が大きくずれて、変なところに表示されるという現象が起きました。
これに関しては、ラッピングする親要素をもう一段階用意してdisplay:inline:blockを指定し、それ自体を右寄せするなどの対策を行いました。要はその要素の中に右寄せなどの属性が無ければOKだったようです。
テキストシャドウが使えない
これはバグや不具合ではないのですが、PIE.htcではテキストシャドウが使えません。使えるのは角丸、ボックスシャドウ、背景のグラデーションなど。テキストシャドウを使う場合には、似たようなスクリプトであるIE-CSS3を使用する必要があります。こちらのスクリプトで使えるプロパティは角丸、テキストシャドウ、ボックスシャドウ。
要はテキストシャドウを選ぶか、背景グラデーションを選ぶか、ということのようです。両方使えればいいのになあ。偉い人どうにかなりませんか？
ともあれ、こう言った方法で実用的に使えるようにはなってきているCSS3ですが、裏を返せばIEでは特殊なことをしないと使えないということで、普及を遅らせる一因となっているようにも思います。
IE6が相変わらずウェブ制作者達の工数を圧迫し続けている現実もまだまだ現場にはありありですが、そろそろIEは社会的に葬られてほしいなあと強く願う次第であります。