HTMLの各要素のブラウザごとに異なる差異をなくし、スタイルをリセットするスタイルシート「sanitize.css」を紹介します。

「Normalize.css」の共同開発者：Jonathan Nealの新しいプロジェクトで、最近の実装スタイルにあったアプローチがとられており、スマホなどのモバイルにも対応しています。

sanitize.css

sanitize.css -GitHub

sanitize.cssとは

sanitize.cssはHTMLのあらゆる要素を各ブラウザでの差異をなくし、整合性をもたせてレンダリングさせるスタイルシートで、ライセンスはCC 0で利用できます。

有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。

スタイルの正常化 さまざまな種類のエレメントのスタイルを正常化します。

バグの修正 ブラウザごとの異なるスタイルやバグを修正します。

ユーザビリティの改善 ほんのわずかな改良でユーザビリティを改善します。

最近の実装スタイルへの対応 ボックスモデルやborder-widthなど、最近の実装方法にあったスタイルに直します。

ちなみに、Normalize.cssは現在v.3で、最新版はv.3.0.2です。

Normalize.cssって何？は下記ページを参考にしてください。

sanitize.cssの対応ブラウザ

対応ブラウザは、下記の通りです。

Chrome 39-40+

Firefox 34-35+

Safari 7-8+

Internet Explorer 10-11+

iOS 7-8+

Android 4.3-4.4+

Windows Phone 8.1+

ブラウザのサポートはメジャーブラウザの最新バージョンと一つ前のバージョンです。

新しいバージョンがリリースされると、その最新バージョンをサポートし、三つ前のバージョンのサポートはやめます。

sanitize.cssのスタイル

sanitize.cssの2015/3/31版の中身です。

.scssでも提供されています。

sanitize.cssの注目すべきスタイル

sanitize.cssで使用されている注目すべき7つのスタイルを紹介します。

「Universal inheritance」として、スタイルのコントロールがしやすいように設定。

ボックスモデルは「border-box」を採用。

参考：リファレンス、リファレンス

より小さいフォントサイズでもすべてのブラウザで読めるように。

参考：リファレンス

Monospaceのフォントを首尾一貫してレンダリング。

参考：リファレンス

borderの幅が予期された通りに描かれるように。

参考：リファレンス

ドロップシャドウを含んだテキストでも読みやすいように。

参考：リファレンス

コンテンツをスクリーンリーダーからではなく、スクリーンから隠すように。

参考：リファレンス、リファレンス

sanitize.cssの適用

sanitize.cssをHTMLの各要素に適用すると、こんな感じになります。

左：デフォルトの表示、右：sanitize.cssを適用