忙しいのに半日潰したのでメモとして。
普段あまりcss3-mediaqueries.jsなどは使わないせいで、知っておくべき常識的な何かを把握していなかったような気がしますが。
情報を探す、というより、状況をみてカンで試してなんとかのため、あくまで応急処置的なものかと思います。
起こった問題
タイトルにありますが、遭遇した問題は以下の通り。
- WordPressのあるテーマの子テーマを使用
- 親テーマにcss3-mediaqueries.jsの読み込み記述あり(IE8以下に反映)
- 親テーマのみでは問題ないが、子テーマを反映するとメディアクエリが効かない
- 開発者ツールではエラー無し
- css3-mediaqueries.jsは読み込まれている
- 子テーマのcssには@importで親テーマのstyle.cssの読み込み記述あり
子テーマの作り方が悪いのかと調べても何も出ず。念のためと子テーマにheder.phpを作り、そこでcss3-mediaqueries.jsを読み込ませてもだめでした。
対応策
主に個人的メモのため時間節約で結論を。
「css3-mediaqueries.jsは読み込まれているが反映しない」というあたりで、DOMが見つかりません的な反映の順序に問題があるのではとアタリを付けました。
今回はcssが対象のため、「子テーマcssの@importの親テーマstyle.css読み込み指定を削除」のうえ、header.phpに直書きで親テーマのstyle.cssを読み込ませて実験。
反映を確認。
つまり現状で分かったのは、使用したテーマ（他のテーマはわかりません）においては「css3-mediaqueries.jsと@importの組み合わせに問題がある模様」ということでした。
Googleのコード提供終了
5月現在、以下のパスで提供されていたCDNがサービス終了に伴い使えなくなっています。
- http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js
- http://html5shim.googlecode.com/svn/trunk/html5.js
詳細は以下のURLでご覧頂けます。
具体的な部分を引用します。
2016 年 1 月 25 日、プロジェクト ホスティング サービスが終了します。プロジェクトの Source、Issue、Wiki の圧縮ファイルは引き続きダウンロードできます。圧縮ファイルは 2016 年の終わりまで保持する予定です。
一応2016年終わりまでは使えるとなっていましたが、早めに終了したのかもしれません。
公式の発表が見つかっていませんが、5月11日という日付をあげておられる方はいました。
IE下位の切り時とも言えますが、そうもできない場合は、代替手段として今のうちにjsファイル自体を取得して自サーバー内に設置するか、別のCDNへ切り替えることになります。
WPで用いているテーマによっては問題が発生している可能性がありますので、IE8以下対応でレスポンシブが動作するという売り込みのテーマをご利用の際は確認した方が良いでしょう。
結び
@charsetの件は覚えがあったのですが、@importに絡んだものは知らず、時間ばかり食いました。もっと調べれば公式な情報が出てくるかもしれません。
1人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
