PIE.htcの使用で悩んだ点について公式のページなどに指定方法が載っていましたのでメモ。
普段は探せばすぐに見つかるような情報を記事にはしないですが、今回はこれを調べるまでにいろいろやってしまって時間を食ったので、自分用のメモとして書いています。
他のhtcファイルを試したり、指定する順番や書き方を変えてみたり…。忘れた場合に高確率で同じことをしそうなので。
PIE.htc
PIE.htcの説明が主題ではありませんので簡単に。ダウンロードページは以下のリンクからお進みください。
jsファイルのように読み込むのではなく、cssに記述するだけで角丸をIE6,7,8に適応できます。しかし、いくつか制限や動かないこともあり、反映されない場合は一手間かかります。
この辺りについては「PIE.htc」で調べていただけると先人の有益な情報が見つかりますので、そちらをご覧下さいませ。一番まとまっていると思われたのは下記のブログさんですのでとりあえずそちらだけご紹介。
四隅に違う角丸半径の指定を行う
さて、利用法として以下のコード状態がよく上げられています。
#example {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;
behavior: url(PIE.htc);
}
この状態ですと、四隅すべてに10pxで角丸の指定ができます。ですが、例えば以下のように部分的に角丸を指定した場合は動きません。
#example {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
behavior: url(PIE.htc);
}
で、これをどうするかというのが本題ですが、公式ページと他のブログさんに解答が。
具体的には以下のようになります。
#example {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-radius: 9px 9px 0px 0px; /* ショートハンドで指定 */
behavior: url(PIE.htc);
}
つまりはショートハンドで指定すれば読み込んでくれるわけです。
上記のようにベンダープレフィックスの部分の指定が部分的だったりしてもborder-radiusさえショートハンドで指定しておけば動きました。もちろんすべてショートハンドでも動きます。
余談
調べていたい際にたまたま見ましたが、border-radius.htcも同様のようです。詳細は以下のリンク先下部にあるコメントの「February 25, 2013 at 5:05 pm」の「Devesh Tiwari」さんのご回答をどうぞ。
結び
毎回感じますが、やはり公式見るのが一番ですね。
0人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
