Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2006年1月 > 良いハック・悪いハック

Web標準Blog

Web標準Blogでは、Web標準の利用に興味のあるWebサイト管理者、Webデザイナーの方向けに、Web標準を利用するための手法やノウハウ、参考になるリソース等を、国内外を問わずご紹介します。

2006年1月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」では、使ってもよい「良いハック」として、以下の条件が紹介されています。

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とのくだりがあります)。

しかしご指摘の点は仰るとおりであり、今後さらに表現に注意して記事の作成にあたりたいと思います。ばあど様、ご指摘ありがとうございました。