CSSハックしてはいけない5つの理由
2009/03/05
![]() |
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers |
WebページやWebアプリケーション開発の終盤に入ってから、特定のブラウザでレンダリングに問題があることが発見されるというのはままある状況だ。すぐに問題を解決することを目指してクイックハックやConditional-CSSの適用などを実施することもある。この方法は短期的に見れば効果があるが、長期的に見ると逆により多くの問題をもたらすため使わない方がいいという紹介がSitePoint: 5 Reasons to Avoid CSS Hacks and Conditional Stylesheetsで紹介されている。紹介されている理由は次のとおり。
- CSS妥当性検出が不可能 - クイックハックではブラウザの既知のバグを使っていたりベンダ固有のプロパティを使っていることがあり、ツールを使ったCSS妥当性検出が難しくなる。そのため本来の問題に気がつきにくくなる
- CSSが複雑になる - クイックハックは既存のルールセットにさらなるルールをもたらすことになる。複数のファイルに分割されたとしてもFirebugなどのツールで解析できるが、すべてのブラウザでFirebugが動作するわけではない。複雑さの上昇はデバッグやメンテナンス性を下げることにつながる
- 新しいまま保つことができない - ブラウザのバグに依存した対処ではアップグレードされたブラウザで問題が修正されて使えなくなる可能性がある。IE6における* html selectorなどはその例のひとつ
- ブラウザ検出 - 本来Webページはデバイスに依存するべきではない。CSSでもブラウザ検出は使わない方がいい
- 必要とされるケースは稀 - ちょっとしたレンダリングの違いはでてしまっても、CSSをクリーンに保ちすべてのブラウザで妥当に使える方がいい
SitePoint: 5 Reasons to Avoid CSS Hacks and Conditional Stylesheetsではつまるところ、ハックやConditional-CSSは貧弱な開発実施、診断や問題検出の失敗を招くため採用しない方がよく、プロジェクトの開始段階で問題を発見するなど早めの試験と頻繁に試験を実施することで、プロジェクトの終盤でそういったハックを適用する必要がないようにすればいいと紹介している。
ただし、デバイスの多様化によってどのブラウザでも表示されるデザインを作成することが必ずしもユーザ満足度の向上にはつながらない状況にもなってきてる。最小限の共有デザインについてはSitePoint: 5 Reasons to Avoid CSS Hacks and Conditional Stylesheetsの内容が適用できるが、さらに満足度の向上を図るには累進的拡張によるWebサイトの構築をが効果的だ。こちらも合わせてチェックしておきたい。
関連記事
- Webサイト構築手法、累進的拡張を知る[2008/10/15]
関連サイト
ヘッドライン
- IPA、OSS情報データベース「OSS iPedia」を刷新[18:55 3/19]プログラミング
- 東北大、鉄系高温超伝導体におけるディラック電子的振る舞いの観測に成功[18:05 3/19]エレクトロニクス
- 東芝、新潟県柏崎市で新型2次電池量産工場の建設を開始[17:58 3/19]エレクトロニクス
- Symbian、GCCでコンパイラ対応プロジェクト「Software Freedom Fighters」[17:49 3/19]プログラミング
- 伊藤忠商事、戸田工業と共同で北米にリチウムイオン電池正極材工場を建設[17:27 3/19]エレクトロニクス
- 昭和電工、樹脂複合材用カーボンナノチューブの量産を開始[17:04 3/19]エレクトロニクス
- 東北大、巨大超弾性歪みを有する高強度な鉄合金を開発[16:18 3/19]サイエンス
- STMicro、CryptoFirewallセキュリティ機能内蔵のSTB用SoCを開発[16:04 3/19]エレクトロニクス
- SEMI、2009年の半導体材料出荷額を発表 - 総額は前年比18.5%減の346億ドル[15:53 3/19]エレクトロニクス
- 住友大阪セメント、リチウムイオン電池向け高エネルギー密度の正極材を開発[15:37 3/19]エレクトロニクス







