1300の優良サイトが選んだシリース、第2回は「CSSリセット」です。
CSSリセットとは、WebブラウザごとにCSSのデフォルト値が異なるという問題を、解決するための手法のことです。
インターネットはマルチブラウザに対応することが求められています。ピクセル単位の細かいデザインもWebではご法度ですが、想定外の動作を防ぐためにも必要な知識と言えます。
今回も、1300の優良サイトが採用しているCSSリセット手法を確認し、ベストプラクティスが何かを探ってみようかと思います。
具体的にどんな問題があるのか？
IE6、IE8、現時点の最新のChrome、Firefoxのデフォルト値と、実際の表示状態を確認してみましょう。以下はbodyタグに設定されたCSSプロパティの値です。
コンテンツの余白を意味するmarginですが、IE6の「左:10px/上:15px」に対して、それ以外のWebブラウザは「左:8px/上:8px」と狭い値を採用しています。また、行の高さも、Firefoxの設定値が微妙に他とは異なるため、余白の位置は同じなのにコンテンツの終端が異なるといった現象が発生しています。
これ以外にも、h1〜h5のサイズや余白が微妙に異なったり、Tableやulのレイアウトが異なるなど様々な「異なるデフォルト値」が存在しているため、CSSで明示的に値を設定し、統一化させることが求められます。
ふろしき.jsの調査では、1300中97サイト(7.46%)にて、CSSライブラリによる対策が行われていることを確認しました。本記事では、その97サイトで利用されている全CSSライブラリを網羅的に紹介させて頂きます。
reset.css / YUI Library (76件)
YUI Libraryに含まれているCSSリセットライブラリです。上記の統計情報はプレーンなreset.cssの集計結果ですが、改造したり部分的にノウハウを流用したり他のライブラリ・テンプレートに組み込まれたりと、様々な方法で利用されているようです。
- 公式サイト：http://yuilibrary.com/yui/docs/cssreset/
- ライセンス：BSD License
- 開発：Yahoo! Inc.
Normalize.css (11件)
reset.cssよりも多くの要素に対し厳格な値を設定したもので、こちらも他のライブラリ・テンプレートに含まれていることが多いです。YUI3、Twitter Bootstrap、HTML5 Boilerplateなど、様々なライブラリ・テンプレートに含まれており、上記統計情報には表れませんが、高い信頼を得ています。
- 公式サイト：http://necolas.github.io/normalize.css/
- ライセンス：MIT License
- 開発：Nicolas Gallagher、Jonathan Neal
html5reset.css (10件)
reset.cssをHTML5の新しい要素に対しても有効になるよう設定し、centerやbigなどの削除された要素を配慮していないものです。
- 公式サイト：http://html5doctor.com/html-5-reset-stylesheet/
- ライセンス：Public Domain
- 開発：Richard Clark
ベストプラクティスは？
上記の統計情報としては少ないですが、「Normalize.css」は現在進行形で多くのライブラリ・テンプレート開発コミュニティから支持を得ており、組み込んで利用されています。したがって、最も安定しているという判断ができるでしょう。現時点でのベストプラクティスと言えます。
reset.cssの採用数は多いですが、古いWeb標準のものであるため、今後採用はされなくなるように思えます。
Web標準はデフォルト値まで厳格決めていないことが殆どなので、このようなCSSライブラリの力は、今後暫くの間も必要になってくるでしょう。
