各ブラウザの表示の差異をリセットするCSS
2007.06.07 Author: たく
Webサイトのコーディングの際の各ブラウザごとの表示の違いは
マークアップエンジニアにとって
最大の悩みの種であります。
そもそも、その原因は
- ブラウザごとのデフォルトのスタイルシートの違い
- 各ブラウザのバグ
- 各ブラウザの仕様
全称セレクタ*によるものも少し前までは、もてはやされてましたが、
レンダリングが遅くなったり、妥当なデフォルト設定もリセットしてしまうなど
欠点も見出されてきているので最近は、推奨されていません。
多くの場合はブラウザが持っているデフォルトのスタイルシートの違いによってもたらされますが、
その違いを最小限にするためにデフォルトスタイルシート(ぬかみそCSSとか最近は言われてるそうです。)を作成することが、最近の流行ってます。
その中でも有名なのがYahoo UI libraryのReset CSS
でしょうか。
私はこれをベースに製作するサイトによって
line-hieghtを加えたり
font-sizeを変更したり
追加、削除などして使いまわしてます。
自分用デフォルトCSSは以下です。
これで私の場合は事足ります。
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
img {
border:0;
}
address,caption,cite,code,
dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
マークアップエンジニアだったら
自分のデフォルトCSSは持ってることは必須といっても
いいかもしれませんね
