Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。
なお当Blogでは、Web標準に関する疑問や質問を募集しています。Webコンテンツ実装プロセスにまつわるお悩みでも結構ですので、お気軽に電子メールでstandards@mitsue.co.jp宛にお送りください。
2006年01月16日
良いハック・悪いハック
フロントエンド・エンジニア 木達
サトウマサシさまより、CSS Nite Vol.3に寄せてCSSハックに関するご質問をいただきました。ちなみにCSSハックとは、Webブラウザ間でのCSS仕様の解釈の相違やバグの有無を振り分けの条件として利用し、特定のブラウザに対しスタイルを適用あるいは非適用とする手法のことです。
2005年10月13日の［IEBlogより：お使いのCSSハックを一掃してください］で取り上げていた良いHACK、悪いHACKについて、具体的に解説いただけたら嬉しいです。
MicrosoftのIE開発チームが、「Call to action: The demise of CSS hacks and broken pages」のなかで使用を控えるよう呼びかけた「悪いハック」には、以下のものがあります。
- html > body
- 子供セレクタを利用するCSSハックです。子供セレクタを解釈するかどうかを振り分けの条件としています。
- * html
- 子孫セレクタを利用するCSSハックです。(X)HTML文書のルート要素はHTML要素であり、その祖先に相当する要素は存在しません。しかしInternet Explorerはこのセレクタを有効なものとして解釈します。
- head:first-child + body
- 通称「Owen Hack」。疑似クラスと隣接セレクタを利用するCSSハックです。first-child疑似クラスと隣接セレクタの双方を解釈するかどうかを振り分けの条件としています。
- head + body
- 隣接セレクタを利用するCSSハックです。隣接セレクタを解釈するかどうかを振り分けの条件としています。
- body > element
- 子供セレクタを利用するCSSハックです。子供セレクタを解釈するかどうかを振り分けの条件としています。
厳密には上に挙げた書き方のみならず、同じ振り分けの条件を仕組みとして利用したCSSハックはすべて、使用しないほうが良いとされています。これらはいずれも、IE7が子供セレクタや隣接セレクタ、疑似クラスに対応し、またHTML要素をルート要素として正しく解釈する予定であることから、振り分けの条件として機能しなくなると言われているからです。
一方css-discussの「Good CSS Hack」では、使ってもよい「良いハック」として、以下の条件が紹介されています。
- 今後登場する標準に準拠した新しいWebブラウザでも機能し続けるよう、記述順序やセレクタの詳細度（個別性）に配慮したもの
- 文法的に妥当で、標準的なプロパティや値を利用したもの
- どの値が標準に準拠したWebブラウザ向けのものかが明確なもの
CSSハックについては、当Blog上でさらに詳しくご紹介していきたいと思います。
[2006/04/05追記]
ばあど様のお書きになった「次期IEのためにCSSハックは削除すべきか」よりトラックバックをいただき、そのなかで原文通りの翻訳を心がけて欲しい
とのご指摘をいただきました。
本エントリにおいて「悪い」と記載しております理由は、これより前に掲載しました「IEBlogより：お使いのCSSハックを一掃してください」からの流れを汲んでのことで、IEBlogの「Call to action: The demise of CSS hacks and broken pages」よりはむしろWaSP Buzzの「IEBlog: Clean up your CSS hacks」を参照したうえでの判断でした（後者ではbad CSS hacks
とのくだりがあります）。
しかしご指摘の点は仰るとおりであり、今後さらに表現に注意して記事の作成にあたりたいと思います。ばあど様、ご指摘ありがとうございました。
コメント
コメントする
Web Diary Pro の CSS 作り
概要：ブログのCSSを変更してみた。前のはあまりにも気に入らなかったけれど、今回のはすこしはまともになったと思う。まだFirefox2.0.0.2とIE7でしか...
ウェブログ：milwa.net Taro-blog
時刻：2007年03月18日 23:15
この記事のトラックバックURL:
http://standards.mitsue.co.jp/cgi-bin/mt/mt-tb.cgi/133
