スポンサーサイト

上記の広告は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からのパス」でいいならこの変更は歓迎すべきことですので、
早急に制作者界隈でシェアすべき事項かと思います。

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


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

css3-mediaqueries.jsが効かなくて困った時のまとめ

最近にわかに盛り上がってきているレスポンシブWebデザイン。
PC・タブレット・スマホなど、様々なスクリーンサイズのデバイスに対応するためにメディアクエリを利用してスクリーンサイズ幅などに応じてレイアウトを調整する技術ですが、残念ながらIE8以下はこれを理解しません。

IE8以下はレスポンシブにならなくても良いなら話は早いですが、
「全部同じ見た目じゃなきゃヤダ!」というクライアントを説き伏せられない場合は
何らかのポリフィル系JSで対応する必要があります。

いくつか似たようなものはあるようですが、
おそらく以下の2つが最有力候補かと思います。

respond.js
css-mediaqueries.js

■respond.js
Adobe Dreamweaver CS6の目玉機能「可変グリッドレイアウト」でも利用されているスクリプト。
非常に軽量でサクサク動き、にわかに本命的な扱いをされてる気がするものですが、
2012年6月時点で「属性セレクタの記述をすると無効になる」という痛いバグがあります。
個人的にcss3使うなら属性セレクタは使いまくりたい派なので、このバグが治らない限り使えないなと思ってます。

■css-mediaquries.js
グーグル先生に聞くと、「IEでメディアクエリ使いたいならcss-mediaqueries.js使えばいいよ」と答えてくれる比較的有名なスクリプト。こちらもhtml5.jsやIE9.js、CSS3PIE.htcなどと併用してもOKで、前述の属性セレクタ無効のバグも無いので個人的には現状こちらを推します。

ただ、「読みこませるだけでOKよ!」とサラッと説明されているブログばかりなのに、いざ使ってみるとこれがなかなかどうして思うように動いてくれません!
検索してもほとんど情報がないし、何が悪いのか分からず導入を断念している人も多いのではないでしょうか?(え、わたしだけ?)

いろいろ検証したり、他所様のブログを拝見したりして、サクッと楽に導入するための注意点が大体分かって来ましたので以下にまとめておきます。同様の問題でお困りの方の役に立てれば幸いです。


1.@media規則で指定すること。
メディアクエリの指定方法は、通常のメディア属性の指定と同様に

 ・link要素のmedia属性で指定
 ・@import規則で指定
 ・@media規則で指定

のいずれでも指定可能なのですが、
css3-mediaqueries.jsを使う場合は@media規則で指定しないと効きません
このことに触れているサイトはこちらのKOMさんのブログでしか見たことないのですが、テストファイルで検証した結果、やはりlink要素のmedia属性や@import規則で読ませようとした場合、IE6〜8ではうんともすんともいいませんでした。@media規則での指定にしか対応していないというのは間違いなさそうです。

2.media typeを省略してはいけない。
通常のメディアクエリ指定の場合、

@media (max-width:480px){.....}

のようにmedia type(allとかscreenとか)を省略してもOKなのですが、css-mediaqueries.jsを利用する場合はmedia typeを省略すると無効になります。

@media screen and (max-width:480px){.....}

のように省略せずに記述する必要があるようです。
その他の注意点などは以下のブログに詳しくまとめられていますので参考にしてください。

参考サイト:Media QueriesがIE8で効かない場合の対処法


3.特殊な条件が揃うと無効になることがある。

私はまさにこれでハマっていたわけですが、どうも以下の条件が全て揃うと、無効になってしまうようです。

1.@mediaの記述だけを別ファイルにする
2.@media記述より前に@charset記述を書く
3.@mediaの記述以外の通常のCSSルールは書かない

上記全てが揃うと、100%無効になります。
普通のCSSの中にメディアクエリの記述を混ぜる場合には全く問題ないのですが、
管理しやすくしようとメディアクエリの記述のみを単独で別ファイルにした場合にハマる危険があります。

理由はわかりませんが、@media記述のみが記載されたcssファイルの冒頭で@charset指定を行うと、css3-mediaqueries.jsが無効になってしまうのです。(IE6-8以外は問題なし)

回避方法としては、ファイルを分割しないか、メディアクエリ用cssには@charset指定をしないのどちらかになると思います。
これに気づくのにいったいどれだけ時間を無駄にしたことか・・・・(トホホ)
バグなのか仕様なのかはちょっとよくわかりませんが、分割管理が好きな方はお気をつけください。

その他のバグ情報などありましたら是非ご連絡いただけると助かります!


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