Smart Communication Design Company
ホーム > ナレッジ > Blog > Web標準Blog > 2007年8月 > 全称セレクタを用いたスタイルの正規化

全称セレクタを用いたスタイルの正規化

2007年8月29日
フロントエンド・エンジニア 木達

スタイルの正規化にまつわるご質問をいただきました。

アスタリスクで全要素のマージンをゼロにするようなリセットの仕方は海外では行われず、使用する要素だけにマージンをゼロを指定していくという仕方が最近の流れだとセミナーで聴きました。
そのほうがブラウザに対する負荷も少ないので・・・ということなのですが、一体どの程度の負荷なんでしょうか?体感的に重いなと感じる程度なんでしょうか?
ブラウザが読み込んだら固まってしまう状態を100としたらどの程度なんでしょうか?
ページ全体をdiv要素で囲んで、その中の全要素(div * { margin: 0; })と指定したら、その中で使ってる要素だけなので、あまり気にすることではないような気がします。

まず補足しておきますと、個々のブラウザが適用するデフォルトスタイルシートによって生じる差異をあらかじめ解消するため、制作者スタイルシート側で要素のマージンやパディングなどを正規化する際の方法についてのご質問です。

その正規化において、全称セレクタを使う場合と使わない場合とでは、レンダリング上の負荷がどの程度違うかを、あいにく私は知りません。独自に検証することも不可能ではないでしょうが(どのようなテストであれば負荷の差を客観的に計測可能かを慎重に検討する必要はあるにせよ)、まずは説明をされたセミナー講師の方に、事実関係をご確認いただいいたほうがよろしいかと思います。

ただし、最近の流れと言えるかどうかはわかりませんが、CSSに関する多くの著作や講演で知られるEric Meyer氏の以下の一連のBlog記事に端を発し、正規化に全称セレクタを用いない方式への理解が浸透したことは承知しています。

特に最後にご紹介した「Formal Weirdness」のなかで、彼が全称セレクタを用いない理由として挙げているのは負荷云々ではなく、正規化の影響がフォームコントロールに属する要素にまで及ぶのを避けるため、としています。ただし、誤解のないよう念を押しておきますと、彼は全称セレクタの使用を避けるよう呼びかけているわけではなく、単にそうした考え方を彼は採用しており、それに賛同したり追随する人もいるということです。