kojika17デフォルトスタイルシートから考える、リセットCSSの留意点
デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。
デフォルトスタイルシート
ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。
これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。
しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。
理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。
私は、に各ブラウザのデフォルトスタイルシートを調べました。
現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。
具体的なデフォルトスタイルシートの例を挙げます。
以下は、平均的なデフォルトスタイルシートの一部です。
html {
display: block;
zoom: 1; /* IEのみ */
}
head, meta, link, style, script {
display: none;
}
body {
display: block;
margin: 8px;
zoom: 1; /* IEのみ */
}
div {
display: block;
}
h1 {
display: block;
margin: 0.67em 0; /* Webkit, Firefoxは、margin-before: 0.67em; margin-after: 0.67em; */
font-size: 2em;
font-weight: bold;
page-break-after: avoid; /* IEのみ */
}
h2,
:match(article,aside,nav,section) h1 {
display: block;
margin: 0.83em 0; /* Webkit, Firefoxは、margin-before: 0.83em; margin-after: 0.83em; */
font-size: 1.5em;
font-weight: bold;
page-break-after: avoid; /* IEのみ */
}
h3,
:match(article,aside,nav,section) :match(article,aside,nav,section) h1 {
display: block;
margin: 1em 0; /* Webkit, Firefoxは、margin-before: 1em; margin-after: 1em; */
font-size: 1.17em;
font-weight: bold;
page-break-after: avoid; /* IEのみ */
}
p {
display: block;
margin: 1em 0; /* Webkit, Firefoxは、margin-before: 1em; margin-after: 1em; */
}
ul { /* ol もほぼ同じ */
display: block;
margin: 1em 0; /* Webkit, Firefoxは、margin-before: 1em; margin-after: 1em; */
padding-start: 40px; /* IEは、padding-left: 30pt; Operaは、padding-left: 40px; */
list-style-type: disc;
list-style-position: outside;
}
li {
display: list-item;
}
dl {
display:block;
margin: 1em 0; /* Webkit, Firefoxは、margin-before: 1em; margin-after: 1em; */
}
dt {
display: block;
}
dd {
display:block;
margin-left: 40px; /* Webkit, Firefoxは、margin-start: 40px; */
}
img {
zoom: 1; /* IEのみ */
}
strong {
font-weight: bold;
}
em {
font-weight: italic;
}あくまで平均的な一部の例ですが、デフォルトスタイルシートを知ることで、的確にデフォルトスタイルシートの全てをリセットすることが可能です。
ただ注意してほしいのは、デフォルトスタイルシートは考えられて作られている、ということです。
デフォルトスタイルシートは無意味に指定されているか？
デフォルトスタイルシートは、多くのブロック要素に上下のmarginが指定されており、paddingの指定は意外と少ないです。
なぜ一方方向ではなく、上下にmarginが指定されているのか。
それについて言及されている資料は見つかりませんでしたが、おそらくmarginの特性を活用するためだと思います。
要素が隣接した場合や、divが入った場合でも、marginの相殺によって適度に間隔を保つことができます。
以下は、その例です。
#one
<div id="one">
<h1>#one</h1>
<p>demo</p>
<div class="contents">
<h2>h2</h2>
<p>demo1</p>
<div class="demo">
<p>demo2</p>
<p>demo3</p>
</div>
<ul>
<li><p>1</p></li>
<li>
<p>2</p>
<div class="demo">
<p>3</p>
</div>
</li>
<li><p>4</p></li>
</ul>
</div>
</div>
#two
<div id="two">
<h1>#two</h1>
<p>demo</p>
<h2>h2</h2>
<p>demo1</p>
<p>demo2</p>
<p>demo3</p>
<ul>
<li><p>1</p></li>
<li>
<p>2</p>
<p>3</p>
</li>
<li><p>4</p></li>
</ul>
</div>
上記は違うHTMLに見えますが、基本構造が同じなので、見え方が一緒になります。
このようにデフォルトスタイルシートは、構造が同じであれば間隔が一定になります。
marginの説明でしたが、これは他のプロパティにもいえることです。
デフォルトスタイルシートは、適当にスタイルが付いているわけではありません。
便利なCSSは、そのまま活用することもできます。
デフォルトスタイルシートを生かすメリット
デフォルトスタイルシートを生かした例を紹介します。
/* Reset CSS */
h1 {
margin: 0;
padding:0;
font-size: 100%;
font-weight :normal;
}
/* header */
#header h1 {
width: 240px;
float: left;
font-weight :bold;
}よくあるCSSに見えますが、上のソースは無駄だらけです。
IE8, IE9からFirefox, Chromeなどのモダンブラウザの平均的なデフォルトスタイルシートは以下のようになっています。
h1 {
display: block;
margin: 0.67em 0;
font-size: 2em;
font-weight: bold;
page-break-after: avoid; /* IEのみ */
}h1のデフォルトスタイルシートでは、paddingの指定がないので、この記述は不要です。
またfont-weight:normal;を指定した後に、font-weight:bold;を指定しています。
この場合は、デフォルトスタイルシートをそのまま生かすことができます。
リセットCSSを最小限に抑え、先ほどの例を書き直すと以下のようになります。
/* Reset CSS */
h1 {
margin: 0;
font-size: 100%;
}
/* header */
#header h1 {
width: 240px;
float: left;
}デフォルトスタイルシートを理解し、生かすことができれば、見通しの良いコードになります。
使い回せそうなプロパティがあるなら、あえてCSSをリセットをしない選択肢も考えてみるべきです。
デフォルトスタイルシートの差
デフォルトスタイルシートは、古いブラウザなどを含めると、異なる部分が多く存在します。
スタイルの違いを埋めながら必要ないCSSを、リセットしていくのは大変です。
このブラウザごとの差を埋めてくれるものに、Normalize.cssというのがあります。
デフォルトスタイルシートを維持したまま、ブラウザごとの整合性をとっているので参考になります。
Normalize.css
Normalize.cssは、リセットCSSとして扱われることが多いですが、私は疑問を感じています。
リセットCSSというよりも、各ブラウザのデフォルトスタイルシートの差を抑制したCSSであり、デファクトスタンダードというべきでしょう。
デファクトスタンダード
標準化機関等が定めた規格ではなく、市場における競争や広く採用された「結果として事実上標準化した基準」を指す。
のNormalize.cssの最新は、IE8以上に対応しています。
IE6,7などの古いブラウザに対応したNormalize.cssを使用したい場合は、v1.0.1で見ることができます。
Normalize.css: Make browsers render all elements more consistently.
Normalize.cssはそのまま使うべきか？
Normalize.cssは5つの特徴を持っています。
- 多くのリセットCSSとは違い、デフォルトスタイルシートは保持します。
- 多くのHTML要素を正常化します。
- バグとブラウザの不整合を修正します。
- 巧みな改良でユーザビリティを改善します。
- コード内のコメントに、詳細な説明を入れています。
各ブラウザの差を埋めるのに、必要最低限の記述しかありません。
素晴らしいパフォーマンスを提供しているNormalize.cssですが、これをそのままリセットCSSとして使用するのは、難しいでしょう。
Normalize.cssは、あくまで各ブラウザのスタイルの実装を埋める『潤滑油』として使用、または参考にするのがいいかもしれません。
まとめ
リセットCSSは、各要素をモジュールとして再構築することに近いかもしれません。
無駄な記述をしていないか、立ち返るきっかけになれば幸いです。