position: absolute;

選択されているタグ : css

タグを絞り込む : event javascript sass

古いIEでもCSS3のセレクタが利用できる「Selectivizr」


先日岡山でCSS3を学ぼう会:nth-child(1)という勉強会をやりました。

半分思いつきで始めたんですが、定員いっぱいまで来ていただいて、誠にありがとうございました。

1回目の内容としては、主にセレクタを中心にお話しました。CSS3というかそれ以前に仕様が決まっているものも含めて結果的にCSSのセレクタを全て取り扱う感じとなり、結果約1時間半に渡って解説するということに。聞いてる方も大変だったと思います。

で、その補足がてらのエントリーがこちらになります。

様々なセレクタを勉強会の中で取り上げましたが、「今回初めて聞いた」とか「知らなかった」というものはCSS3で新たに策定されたものばかりでなく、CSS2で既に使えるはずだったものも結構な数ありました。

それが何故ポピュラーにならなかったかと言えば 「IE6が対応していないから」 というのが大きな理由なのです。

なので、勉強会で知ったセレクタを持って帰って利用するとこんなことがあるかもしれません。

以下はフィクションです!

  • A:属性のセレクタって便利だから使おう
  • B:あれ、このセレクタはなに?
  • A:ああ、これは属性を見て指定できるセレクタなんですよ
  • B:ふーん、便利なのがあるんだねえ
  • A:そうなんですよ、今回の案件はIE8以降の対応でいいので使えるんですよ。
  • B:と言うことはIE6では使えないの?
  • A:ええ
  • B:それはダメだ
  • A:え、だってIE8以降…
  • B:確かに要件はそうかもしれないけど、それ以前のブラウザも一応は考慮に入れないと!
  • A:そうかもしれないですけど、最悪プログレッシブ・エンハンスメントでいいじゃないですか
  • B:未対応のプロパティを利用する分にはいいとして、セレクタだと根本的に成立しない可能性が出てくるじゃないか
  • A:そうは言ってもCSSだからせいぜいスタイリングなので問題はないでしょう
  • B:でぇーい!セレクタが効かないなどという事態は到底許容できん!角丸だのグラデーションだのという話とレベルが違う!
  • A:いやだから案件の要件にも…
  • B:ええい!IE6で利用できないセレクタなどこれまで利用されて来なかったんだ!CSSの記述体系もそれを前提に進んでいるのだ!セレクタにおいてIE6で利用できないものを使うんじゃない!むしろ覚えるんじゃない!うきゃー!
  • A:…

IE6教団
ブラウザの基準であったIE6への帰依を説く宗教団体であり、原作小説では『IE6教会』と記述されたこともある。本部は帝国領内の太陽系第三惑星「地球」のヒマラヤ山脈・カンチェンジュンガ地下にある旧XP統一政府の避難用シェルター跡を利用している。他にも帝国首都トライデントにも支部を構えている。
Windows7連邦、Windows8帝国時代を通じてXPのサポートが延長された(というより事実上放置された)事から、IE6を支配する政体でもある。帝国・同盟を問わず信者を増やし続けている。しかし実際には、崇高な信仰心からでなく、かつての西暦時代にIE6への対応によって得られた特権的な地位を維持する手段として、IE6統一政府の残存勢力が結成した組織である。この時代においては手段の目的化が見られ、かなり高位の幹部も主観的には純粋な信仰心を持っている様子であり、むしろド・ヴィリエ大主教のような教義を手段としか考えていない幹部が特別な存在として描かれている。だが、同時に他ブラウザのdisりやHTML5の否定、さらには信者に対してCSSハックを伝授する事すら行われており、冷静な第三者からは崇高な信仰心以外の目的がある事を見透かされている…。

銀河英雄伝説の登場勢力 - Wikipediaより改変

…ってふざけすぎた。まあ、とにかく古手のIE6でもCSS3や対応していなかったCSS2のセレクタが利用できるようになるJavaScriptのライブラリが存在するので紹介します。

Selectivizr

Selectivizrというライブラリになります。

ま、細かい説明とかは省くので実際にサイトを見て頂ければとおもいますが、ベースになるライブラリが別途必要で、利用するセレクタ次第でjQueryで済ますかとか判断して頂ければいいんじゃないかなと。

難点としてはJavaScriptで制御する関係でどうしても動作が重くなるというという事でしょう。この辺りは制作上の効率とのトレードオフなので、サイトの性格などを考えて判断してください。個人的にはこれから増えていくものならともかく、役目を終えたといっていいものなので、やや開発効率に重心を置いた判断でもいいのではないかと思ったりしています。

ということで、せっかく覚えたセレクタを使いたいけどなーという人は一度検討してみてはいかがでしょうか。