reset.cssとnormalize.cssに続く新しいリセット用CSS、モバイル対応・最近の実装スタイルを考慮したスタイルシート -sanitize.css

サイト構築 -CSS

Post on:2015年4月13日

sponsorsr

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

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

sanitize.css
sanitize.css -GitHub

sanitize.cssとは
sanitize.cssの対応ブラウザ
sanitize.cssのスタイル
sanitize.cssの注目すべきスタイル
sanitize.cssの適用

sanitize.cssとは

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

有用なデフォルトはそのまま

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

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

ブラウザごとの異なるスタイルやバグを修正します。
ユーザビリティの改善

ほんのわずかな改良でユーザビリティを改善します。
最近の実装スタイルへの対応

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

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

Normalize.css

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

CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About 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 | CC0 Public Domain | github.com/jonathantneal/sanitize.css */
pre,textarea{overflow:auto}
[hidden],audio:not([controls]),template{display:none}
details,main,summary{display:block}
input[type=number]{width:auto}
input[type=search]{-webkit-appearance:textfield}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
progress{display:inline-block}
small{font-size:75%}
textarea{resize:vertical}
[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
*,::after,::before{box-sizing:inherit;border-style:solid;border-width:0}
*{font-size:inherit;line-height:inherit;margin:0;padding:0}
::after,::before{text-decoration:inherit;vertical-align:inherit}
:root{-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;box-sizing:border-box;cursor:default;font:16px/1.5 sans-serif;text-rendering:optimizeLegibility}
a{text-decoration:none}
audio,canvas,iframe,img,svg,video{vertical-align:middle}
button,input,select,textarea{background-color:transparent;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;min-height:1.5em}
code,kbd,pre,samp{font-family:monospace,monospace}
nav ol,nav ul{list-style:none}
select{-moz-appearance:none;-webkit-appearance:none}
select::-ms-expand{display:none}
select::-ms-value{color:currentColor}
table{border-collapse:collapse;border-spacing:0}
::-moz-selection{background-color:#B3D4FC;text-shadow:none}
::selection{background-color:#B3D4FC;text-shadow:none}
@media screen{[hidden~=screen]{display:inherit}
[hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0 0 0 0)!important;position:absolute!important}
}
/*# sourceMappingURL=sanitize.css.map */

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

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

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

*,
::before,
::after {
	box-sizing: inherit;
}

* {
	font-size: inherit;
	line-height: inherit;
}

::before,
::after {
	text-decoration: inherit;
	vertical-align: inherit;
}

ボックスモデルは「border-box」を採用。
参考：リファレンス、リファレンス

:root {
	box-sizing: border-box;
}

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

small {
	font-size: 75%; // All browsers
}

Monospaceのフォントを首尾一貫してレンダリング。
参考：リファレンス

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
}

borderの幅が予期された通りに描かれるように。
参考：リファレンス

*,
::before,
::after {
	border-style: solid;
	border-width: 0;
}

ドロップシャドウを含んだテキストでも読みやすいように。
参考：リファレンス

::selection {
	background-color: $selection-background-color;
	text-shadow: $selection-text-shadow;
}

コンテンツをスクリーンリーダーからではなく、スクリーンから隠すように。
参考：リファレンス、リファレンス

@media screen {
	[hidden~="screen"] {
		display: inherit;
	}

	[hidden~="screen"]:not(:active):not(:focus):not(:target) {
		clip: rect(0 0 0 0) !important;
		position: absolute !important;
	}
}