ie-css3.js ( :nth-childなどのCSS3擬似クラスをIEでも使えるようにするjs ) で失敗した事。

動作テストだからといってhtmlのhead内にcss書いて、ローカルで表示確認していたらエラーしか出なくて途方に暮れた…

その原因は2つありました。

  1. ローカルだと機能しない
  2. cssは外部化しておく

以下、使い方メモなど。

ヘッダ部分の例

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

  1. :nth-child
  2. :nth-last-child
  3. :nth-of-type
  4. :nth-last-of-type
  5. :first-child
  6. :last-child
  7. :only-child
  8. :first-of-type
  9. :last-of-type
  10. :only-of-type
  11. :empty
  12. :enabled
  13. :disabled
  14. :checked
  15. :hover
  16. :focus
  17. :target
  18. ::first-line
  19. ::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.


“ie-css3.js ( :nth-childなどのCSS3擬似クラスをIEでも使えるようにするjs ) で失敗した事。” への3件のコメント

コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.