動作テストだからといってhtmlのhead内にcss書いて、ローカルで表示確認していたらエラーしか出なくて途方に暮れた…
その原因は2つありました。
- ローカルだと機能しない
- cssは外部化しておく
以下、使い方メモなど。
ヘッダ部分の例
<!--[if lte IE 8]> <script type="text/javascript" src="js/DOMAssistantCompressed-2.8.js"></script> <script type="text/javascript" src="js/ie-css3.js"></script> <![endif]-->
ie-css3.jsダウンロード先
Keith Clark – IE CSS3 pseudo-class selectors
IE8以下にcss3の擬似クラスを対応させるjsのバージョンが1.0になって名前と配布サイトが変わってた。
Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8
ie-css3.js以外にjavascript libraryが必要、色々対応してるので好きなのを選んで使う。
DOMAssistant 2.8.0と併用すれば以下の擬似クラス全てに対応するようだ。
v0.9.5bで対応している擬似クラス
Supported JavaScript Libraries
- :nth-child
- :nth-last-child
- :nth-of-type
- :nth-last-of-type
- :first-child
- :last-child
- :only-child
- :first-of-type
- :last-of-type
- :only-of-type
- :empty
- :enabled
- :disabled
- :checked
- :hover
- :focus
- :target
- ::first-line
- ::first-letter
選択子 / 6.6.5 構造上の擬似クラス(日本語訳)
ie-css3.js動作確認サンプル
確かにIEでも擬似クラスが有効になってるけど、<pre>のcssが無効になってる。使い方間違ってるのかな…
でもどうやら@importから先のcssファイルを読み込んでくれてないみたいだ。
書いてあった＞＜；；
A few things you should know:
* Style sheets MUST be added to the page using a tag. You can still use @import in your style sheets. Page level style sheets won’t be parsed
* Style sheets MUST be hosted on the domain as the page.
関連記事かもしれん:
乱雑モックアップのフィード
[...] 4. ie-css3.js ( :nth-childなどのCSS3擬似クラスをIEでも使えるようにするjs ) で失敗した事。 CSS3の擬似セレクタに対応させるためのJSです。 まだ疑似クラスをどうやって効果的に使うのか勉強 [...]
ピンバック by BGS-WORKS Blog » [CSS3] CSS3でメジャー効果をIE6-8でも使いたい — 2010年9月22日 @ 21:36
[...] 前回試した0.9.5bと同じですた。 ie-css3.js ( :nth-childなどのCSS3擬似クラスをIEでも使えるようにするjs ) で失敗した事。 | 乱雑モックアップ [...]
ピンバック by ie-css3.jsのベータが取れて名前がSelectivizr(:select[ivizr]？)に変わってた | 乱雑モックアップ — 2010年9月23日 @ 18:25