FC2ブログ

スポンサーサイト

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


このエントリーをはてなブックマークに追加

CSS3 PIE1.0.0の設置方法が変わっている(かもしれない)件

CSS3を理解しないIE6〜8(一部9も)でもCSS3プロパティの一部が使えるようになるCSS3 PIE
初のメジャーバージョンとなる1.0.0が2012年5/15日にリリースされたわけですが、
皆さんお使いでしょうか?

betaがとれて1.0.0になってから今日初めて使ってみたんですが、

……なんかこれ、設置仕様変わってませんか?

CSS PIEと言えば、CSS3プロパティ使っているセレクタの中で「behavior:url(パス/PIE.htc);」と一行書くだけでOKというお手軽さが魅力ですが、そこで注意しなければならないのが、

「behavior中のパスは、呼び出されるHTMLからのパスであってCSSファイルからのパスじゃないよ!

というのが超重要な設置仕様だったはずです。
1.0.0になった後も、documentationにはちゃんとそのように書かれています。

CSS3 PIE Documentationから抜粋。

Step 4: Apply PIE

In that same CSS rule, add the following style line:

behavior: url(path/to/PIE.htc);
Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.



んがっ!
そのとおりに設置しても一切、まったく、IEにCSS3が適用されないんです。
他のJSが悪さしてるわけでもなく、コードが間違ってるわけでもない。
HTMLの<head>に直書きした場合にはきちんと動作するのに、違う階層に設置したCSSファイルに記述すると一切効かない。


・・・・まさか。


と思って試しにこれまで口すっぱくしてダメだと言われてきた
「CSSファイルからの相対パス」で書いてみたら、あっさり表示されました。


・・・。
・・・・・。
・・・・・・・・・・・。




マジで?



こんな大事な仕様変更、内緒にしてる意味が分からないんですけど?
何かあまりにどこにも情報がないので正直自信がありません。
どなたか最新版のPIE1.0.0で設置パスの検証していただけないでしょうか。
そして結果を教えて下さい。
いつそのような変更がなされたのか分からないので、検証の際は必ず新規に最新のコードをダウンロードして検証してくださいね。
誰がやっても「CSSからのパス」でないと動作しないなら、それが正しいんでしょう。
「CSSからのパス」でいいならこの変更は歓迎すべきことですので、
早急に制作者界隈でシェアすべき事項かと思います。

ご協力よろしくお願いします。


このエントリーをはてなブックマークに追加
スポンサーサイト

高さ揃えJavaScriptの落とし穴・その後

jquery.flatheights.jsを使ってボックスの高さを揃える際、高さ指定の無い画像が含まれているとwebkitでボックスがつぶれてしまうということについて前回記事を書きましたが、その後@mattari_pandaさんの協力でとりあえず解決に至りました。



var _UA = navigator.userAgent.toLowerCase();

if(parseInt(_UA.indexOf('applewebkit')) > -1){
$(window).load(function(){
$('.box1').flatHeights();
});
}else{
$(function(){
$('.box1').flatHeights();
});
}


こんな感じでwebkitの場合は実行タイミングを「load」にしてやることで画像の高さを取得してくれるようになります。UAで分岐しないで全て「load」にしてもできるのですが、そうすると問題の無いブラウザでの表示パフォーマンスを無駄に落とすことになりますのでUA分岐しています。


このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。