> ナレッジ > Blog > Web標準Blog > 2006年1月 > 良いハック・悪いハック

良いハック・悪いハック

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

今後登場する標準に準拠した新しい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とのくだりがあります）。

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