note から WordPress に出戻りました!😭

[ CSS ] ユニバーサルセレクタでリセットはマズいの?

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です!
ご訪問ありがとうございます。ゆっくりしていってね。(本ページは広告を含みます。)

今まで、ブラウザ毎にあるデフォルトスタイルの差異を吸収すべく、

* { margin: 0; padding: 0; }

と言うスタイルを書いていた訳ですが、「 レンダリングが遅くなる 」 などの問題点があるんだそうです。

次のようにリセットすべき要素だけ書いてリセットするんだそうな。

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
  margin: 0;
  padding: 0;
}

※上のコードはまだ考えている途中のコードです。

なんですが、ユニバーサルセレクタでリセットすると、全てのスタイルがリセットされてるって言う安心感があって好きなんですが…。私だけ?

参考になりそうなページ

うーん、CSS は難しいー。

試してみた @ 2008-03-13

ユニバーサルセレクタでマージンとかパディングをリセットすると、Firefox で form の select の option が見づらくなるよ。とコメントで教えてもらったので試してみました。

Firefox での表示

Firefox での表示

https://codepen.io/darucub/pen/PwNwvQP

なるほど、確かに見づらいですね。ユニバーサルセレクタでマージンとかパディングをリセットするのは止めておいた方が良いかも。

現場からは以上です。それでは、またッ!!!