Feb06
offspring.js
- 追記
- 指摘がありました。 offspring.jsがあっても、IE6とIE7でCSSの擬似クラスを使えないとの事です。 このライブラリはIEのcss実装の不備を補完するものじゃなく、最初の子要素に自動的に追加されます。クラスが追加されるだけで擬似クラスをjsで実装してるわけではないようです。offspring.jsを読み込んでも、cssファイルに書いた、:first-child{....}はie系では無視されます。offspring.jsの作者は、ブラウザ間で実装の有無がある:first-childのような擬似クラスは「使わない」ことを提案しているようです。
今現在、CSSの擬似クラスをサポートしているのはSafari 3だけらしいのですが、IEなどでもCSSの代替え策として最初の子要素に自動的にclassを追加してくれるoffspring.jsをご紹介いたします。
CSSの擬似クラスの説明ですが、特定の要素に対してCSSの擬似クラスを使用すると不必要なIDやClassを使わなくとも、特定の表現ができたりします。例えば以下の擬似クラスなどは便利です。CSS擬似クラスの例を上げると
- :first-child
- 親要素の中で最初に現れる子供要素である場合にだけマッチする
- :last-child
- 親要素の中で最後に現れる子供要素である場合にだけマッチする
- :nth-child(#)
- 親要素の中で #番目の子要素だけにマッチする
その他にも:nth-child(even)や:only-child等かなり色々あります。詳しい解説についてはWWW WATCHさんのCSS セレクタに関するおさらい 2が丁寧にわかりやすく解説されています。
しかし現状では、IE6やIE7ではこのような擬似クラスはサポートされていません。そこでA List Apartで紹介されているKeeping Your Elements’ Kids in Line with Offspringの記事の中のoffspring.jsを使用する事でIE6やIE7でCSS擬似クラスの代替えとして使用することができます。Googlecodeに掲載されているサバージョンoffspringjsを直接ヘッダー内で外部スクリプトとして読み込めばOK。
コメント
間違った紹介記事です。
offspring.jsがあっても、「IE6とIE7でCSSの擬似クラスを使え」ません。
このライブラリはIEのcss実装の不備を補完するものじゃないです。
Dean EdwardのIE7.jsのような働きはしてくれないです。
offspring.jsは、例えばfirst-childというclassが最初の子要素に自動的に追加されます。
自動追加のタイミングは読み込み時とか色々設定できます。
クラスが追加されるだけで擬似クラスをjsで実装してるわけではないです。
offspring.jsを読み込んでも、cssファイルに書いた、:first-child{....}は相変わらずie系では無視されます。
offspring.jsの作者は、ブラウザ間で実装の有無がある:first-childのような擬似クラスは「使わない」ことを提案してます。
投稿者: v~z | 2008年2月21日 19:05
v~zさん＞
ご指摘ありがとうございます。記事を訂正しなおしました。
このようなご指摘があると本当に助かります。
以後気をつけます。
投稿者: u-ziq | 2008年2月22日 22:34