CSSとMediaQueryとInternetExplorer | SEOとサイトデザインと仕事について考えてみる。

CSSとMediaQueryとInternetExplorer

物凄くハマった挙句に物凄く簡単な手段で解決してしまった事象を。グリッドデザインを適用し、レスポンシブWEBデザインも適用したサイトの事象です。

MediaQueryでスマートフォン向け対応しているサイトにてInternetExplorerでスタイルが定義されているにも関わらず効かない箇所がある。

こういう形を取ったスタイルシートの構成でした。
#grid960のadapt.jsのMediaQueryカスタム仕様です。こうすれば読み込みは多いですが個別に綺麗に分類できると考えました。
control.css 640.css 640_custom.css mobile.css mobile_custom.css layout.css 上記の構成でInternetExplorerでmobile_custom.cssで定義している初期化系の定義が何故かモバイル以外の環境で適用されてしまいました。FireFoxやChrome、Safariでは何も問題はありません。

色々と試したのですが、control.cssのmobile.cssをコメントアウトしたら正しく表示されるので原因はこれしか考えられません。

MediaQueryは条件分岐で読み込まないのではなく全部読み込んでいるので、順序を変えて条件追加をしたら解決しました。
control.css ついでにMediaQueryの@importはInternetExplorer7/8対応のrespond.jscss3-mediaqueries-jsは効きませんので、応急処置でInternetExplorer8以下には640.cssを強制的に適用させます。
で、ついでにそこで発覚したInternetExplorer8限定のバグ、CSSだろうとJQUERYだろうと親要素にdisplay:none;を適用しても子要素には適用されず表示される問題を解消。

InternetExplorerのブラウザチェックはやらないと本当に痛い目に合いますね。

adapt.jsを使っているとほとんど問題は無いのですが、他のJqueryプラグインとの相性の問題がかなり出ます。プラグイン側の問題な気がかなりしてますが、レスポンシブ用のプラグインだと使えるのがかなり限られます。スタイルシートの構成が複雑でフレームワーク化していたりして、相性の問題が出なければadapt.js使った方が良いですね。

自分で作れって話でもあるんですが、既にあるのであればライセンス問題なければ使います(´・ω・`)
本当にレスポンシブWEBデザインは安易に対応するよりも最初からサイト全体を再構築しなおした方が楽です。




作成日
2013.08.20 (火)
最終更新日
2014.08.11 (月)
作成者
Takayuki Hirosawa
  • speed_fish 引っ越ししてからつなげていなかったとても古いnetgearのnas。今日つなげようとしたらlan経由で全くつながらず。windows10が勝手にsmb1を切り捨ててたと判明するまでに3時間。httpでもpingでもつながるのにos… https://t.co/Ejd7om16t0 2018-04-24 11:41:09
  • speed_fish modxからevoが切り離しかー。まあrevoとはもう別物感溢れてたし良いんじゃないでしょうか。やりやすくなるといいなー。 2017-04-28 20:33:09
  • speed_fish Chromeの57から頻発している、ERR_BLOCKED_BY_XSS_AUDITOR。試してみたけど、hidden含め入力項目にJavaScriptが入っても発生。HTTPS化していないフォームはまあ当然発生かな。 2017-04-10 18:00:57
  • speed_fish modxサイトをcloudflare化でeFormで引っかかる。中身みたらsite_urlでリファラーチェックしてました。ssl flexibleを使おうとしてたので、eFormを改造。パラメータにsiteurlを追加しましたとさ。#modx #cloudflare #eform 2017-03-04 00:44:09
  • speed_fish メモメモ。MODxでAMP対応するスニペット。 GETのURLが気に食わないのでリライトかな。 https://t.co/Oa9qzQ5dOr 2017-02-03 01:10:54