CSSハックしてはいけない5つの理由

WebページやWebアプリケーション開発の終盤に入ってから、特定のブラウザでレンダリングに問題があることが発見されるというのはままある状況だ。すぐに問題を解決することを目指してクイックハックやConditional-CSSの適用などを実施することもある。この方法は短期的に見れば効果があるが、長期的に見ると逆により多くの問題をもたらすため使わない方がいいという紹介がSitePoint: 5 Reasons to Avoid CSS Hacks and Conditional Stylesheetsで紹介されている。紹介されている理由は次のとおり。

1. CSS妥当性検出が不可能 - クイックハックではブラウザの既知のバグを使っていたりベンダ固有のプロパティを使っていることがあり、ツールを使ったCSS妥当性検出が難しくなる。そのため本来の問題に気がつきにくくなる
2. CSSが複雑になる - クイックハックは既存のルールセットにさらなるルールをもたらすことになる。複数のファイルに分割されたとしてもFirebugなどのツールで解析できるが、すべてのブラウザでFirebugが動作するわけではない。複雑さの上昇はデバッグやメンテナンス性を下げることにつながる
3. 新しいまま保つことができない - ブラウザのバグに依存した対処ではアップグレードされたブラウザで問題が修正されて使えなくなる可能性がある。IE6における* html selectorなどはその例のひとつ
4. ブラウザ検出 - 本来Webページはデバイスに依存するべきではない。CSSでもブラウザ検出は使わない方がいい
5. 必要とされるケースは稀 - ちょっとしたレンダリングの違いはでてしまっても、CSSをクリーンに保ちすべてのブラウザで妥当に使える方がいい

SitePoint: 5 Reasons to Avoid CSS Hacks and Conditional Stylesheetsではつまるところ、ハックやConditional-CSSは貧弱な開発実施、診断や問題検出の失敗を招くため採用しない方がよく、プロジェクトの開始段階で問題を発見するなど早めの試験と頻繁に試験を実施することで、プロジェクトの終盤でそういったハックを適用する必要がないようにすればいいと紹介している。

ただし、デバイスの多様化によってどのブラウザでも表示されるデザインを作成することが必ずしもユーザ満足度の向上にはつながらない状況にもなってきてる。最小限の共有デザインについてはSitePoint: 5 Reasons to Avoid CSS Hacks and Conditional Stylesheetsの内容が適用できるが、さらに満足度の向上を図るには累進的拡張によるWebサイトの構築をが効果的だ。こちらも合わせてチェックしておきたい。