各ブラウザの表示の差異をリセットする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は持ってることは必須といっても
いいかもしれませんね