hamashun.com

ブラウザのデフォルトスタイルをリセットする際にユニバーサルセレクタを使用すると、読み込みが遅くなるとか言う話があるんですけど、具体的にどれくらい遅くなるのかという話は聞いた事がありません。
なので、調べてみました。

ソース

使用したソースは以下の2種類です。
なお、2番目のソースはYUIで公開されている物を使用しました。

* {
 margin: 0;
 padding: 0;
}

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; 
} 

それぞれを当サイトのcssファイルに書いて、Firebugでcssファイルの読み込み時間を100回づつ計測しました。
計測したのは、2007年9月2日の夜23時頃、ADSL回線の自宅からです。
その結果のcsvファイルをアップしておきます。

結果

両者の読み込み時間の平均値を計算しました。 単位はmsです。

ユニバーサルセレクタ平均値

151.76

タイプセレクタ平均値

197.36

あれ？

なぜかユニバーサルセレクタの方が軽いという結果になってしまいました。
100回だと足りなかったのかも。 て言うか、こういうのって何回くらい計測する物なんでしょうか。 1000回くらい？

読み込みが遅くなるという話はどこから出た？

そもそも誰が言い出したんでしょうか？ よく引き合いに出されるのはEric Meyer氏だったりしますけど、全称セレクタを用いたスタイルの正規化 | Web標準Blog | ミツエーリンクスを読むと、

彼が全称セレクタを用いない理由として挙げているのは負荷云々ではなく、正規化の影響がフォームコントロールに属する要素にまで及ぶのを避けるため、としています。

とあります。 これは主にborderの事を言ってると思うんですけど、確かに、ユニバーサルセレクタでborderまでリセットしてしまうとのはどうかな、と思います。 フォームパーツとか、逆に手間が増える感じ。

個人的な意見

僕個人は、デフォルトスタイルをまとめてリセットをするのは基本的にはmarginとpaddingのみです。 場合によっては、font-sizeやline-heightなどが加わります。
borderをリセットする必要があるのはimg要素とfieldset要素くらい？

て言うか、もし読み込み云々という理由でユニバーサルセレクタを使わないのであれば、YUIやいわゆるリセット用CSSをそのまま使いまわすというのも違うんじゃないかなと思います。 そのサイトで使っている要素のみを書くべきで。
でもそうなると、更新の時とか面倒な気が。

あるいは、*{ margin : 0 }はもう古い！？ - Emotional Webでのコメント欄のやり取りも興味深いです。 今後、そういったブラウザが登場するかはさておき、考え方として。

結論

borderをリセットしなければ、ユニバーサルセレクタで問題無いのでは。

おまけ

ここまで書いて気づいたんですけど、Firebugが計測してるのって、「ファイル読み込み→ほげほげする→実際の描画」までの時間でいいのだろうか。
もしもファイルの読み込みのみだったら、この記事はだいぶ意味無い事に。。。

何にしても重箱の隅すぎる･･････ｗ