プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
JavaScript、Selectivizr(selectivizr.js)が効かなくてちょっと困ったお話
結論から書くと、CSSファイルから別のCSSファイルを読み込んでいたのが原因で
Selectivizr(selectivizr.js)が上手く機能していませんでした。

もともとは、こんな感じになっていたのですよφ(--)

■hoge.html
<link rel="stylesheet" type="text/css" href="./css/hoge1.css">
<!--[if (gte IE 6)&(lte IE 8)]><script src="./js/selectivizr.js"></script><![endif]-->

■hoge1.css
@import "hoge2.css";
@import "hoge3.css";

hoge.htmlではhoge1.cssを読み込んで、
hoge1.cssでhoge2.cssとhoge3.cssを読み込んでいます。
結果としてhoge2.cssとhoge3.cssが読み込まれる理屈です。

ところがどっこい、これが上手く動作しなくてですね。
なんか指定したスタイルが効いていなかったのです。

ほんで、あれやこれやと調べたところ「@import」を使ったやり方はダメだと分かりました。

ということで、こんな感じに変更φ(--)

■hoge.html
<link rel="stylesheet" type="text/css" href="./css/hoge2.css">
<link rel="stylesheet" type="text/css" href="./css/hoge3.css">
<!--[if (gte IE 6)&(lte IE 8)]><script src="./js/selectivizr.js"></script><![endif]-->

hoge.htmlでhoge2.cssとhoge3.cssを直接読み込む形です。

結果、無事にスタイルが適用されました(*´ェ`*)
やったー\(≧▽≦)/

あと、ついでなので書いておくと、ローカル環境では動作しないらしいです。
まぁ、ゴリゴリやってるであろうJavaScriptですからね。
どっかのサーバに上げてから動作確認してください。

さらに、HTMLファイルのタグ内に直接書いたスタイルには適用されないみたいです。
例えば

<span style="……">ほげ</span>

みたいな書き方ですね。
面倒くさいので実際に確認はしていませんが、そんな記載がありました。

私は元々

IE8に対応する必要があるならHTML5じゃなくてXHTML1.1とかで作れよ

と思っている人なので、自前で作るときは「html5shiv.js」や「selectivizr.js」は
ほっとんど使わないですけどね。
※今回のきっかけも、他の人が作ったコードです。

HTML5でIE8対応する人で「selectivizr.js」を使う人は覚えておいてください。

1.CSSファイルから別のCSSファイルを読み込んでいると効かないよ
2.spanタグの中とかでスタイル指定していると効かないよ
3.ローカル環境では動かないからサーバに上げてから確認してね


だそうです。

そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● JavaScript  thema:システム開発 - genre:コンピュータ  Posted by ササキマコト