リセットCSSはブラウザではどう処理されているのか

質問

まず、ユニバーサルセレクタによる方法では、対象のWebサイトで使われいるタグ以外、全て(ブラウザに登録されてあるタグ？)もブラウザで処理されるのでしょうか？

例えば、そのWebサイトでh1、h2が使われていたとしたら、使われていないh3やh4などのマージン・パディングも0になるようにブラウザ内で処理されているのでしょうか？

また、ユニバーサルセレクタではなく以下のように指定してある場合は、ブラウザはここに記述してあるタグだけをマージン・パディングを0にするのでしょうか？

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0;
}

その他のブラウザに登録されてるタグは処理されない、ノータッチということですかね。

回答No.3

ORUKA1951 · ベストアンサー

＞どこかの誰かが各ブラウザのデフォルトCSSを研究し作り出したリセットCSSを、何も考えずにそのまま自分(自社)のサイトに使っているだけなのでは。

　でしょうね。
　もし、ここにない要素が出てきたらどうするのだろう・・？ブラウザはその仕様になくても、過去の仕様や廃れた仕様にも対処することが、強く求められています。

　*セレクタひとつ書いてしまったために、スタイルシートがとても複雑になってしまった経験があるのでは？
　スタイルの照合手順は、DeFellさんが紹介された「意外と知らないCSSセレクタの照合順序とパフォーマンス( http://19-d.com/posts/view/116 )」に書かれているアルゴリズムとは違うはずです。
　⇒6.4.1 カスケード処理の順序（Cascading order）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html#cascading-order )
　が、プログラムするときの順当な手段でしょう。
　コンピューターがテキストデータを読み取るのは大きな時間はとりませんが、ソートは多少時間を食います。それ以上にデータのテーブルを保存するのは大きな負担となりますから、最初にそれぞれの要素に対するスタイル一覧を作成してHTML内を検索するという手段はとりえません。貧弱なコンピューターで大きなページを処理するとハングする(^^)

＞例えば、そのWebサイトでh1、h2が使われていたとしたら、使われていないh3やh4などのマージン・パディングも0になるようにブラウザ内で処理されているのでしょうか？
　ないでしょう。
　描画に当たって、h3やh4がでてこなければ、スタイルシートを参照もしないでしょう。どうせ、他の部分でスタイルシートを読んでいるときには読みますが、単純に読み飛ばされるでしょう。

お礼

ありがとうございました。

本当に他人のリセットCSSを使い回していただけなんですね。もしかしたら、一部のプロのWebデザイナーは独自に作り出しているかもしれませんが・・・

また、全称セレクタによるリセットCSSの適用対象は、デフォルトCSSで使われているセレクタ、そのサイトで使われているセレクタ(タグ)ということで、そのどちらにも出てきていないセレクタ(タグ)は仰るように参照しない読み飛ばすということですかね。

しかしまあ、ブラウザのその辺りの処理はこのカテゴリーではなくプログラミングの方だと思うので、あまり深い入りはしないようにしておきます。

回答No.2

DrFell

ブラウザの速度がテーマになったページを紹介します。

★同じことを言っているのですが、ブラウザがどう処理するのか
（要は右から左です）
◎意外と知らないCSSセレクタの照合順序とパフォーマンス
　http://19-d.com/posts/view/116
◎30分でできる！Webサイトを高速化する6大原則
　http://ascii.jp/elem/000/000/457/457749/index-3.html
◎ウェブページ高速化に効果的なCSSセレクタ
　http://weboook.blog22.fc2.com/blog-entry-271.html

★上記手法の時間的検証
◎CSSセレクタによる高速化、実際のところ
　http://tech.naver.jp/blog/?p=178
◎CSSセレクタの高速化の話を検証
　http://os0x.hatenablog.com/entry/20100518/1274204934

つまり、できるだけ省略し短い方が処理速度は速くなる。ということで、settu1300さんの疑問は推測できませんか？ブラウザの速度はブラウザの処理と関係します。

お礼

ありがとうございました。ご紹介して頂いたサイトは全て拝見しました。もっとよく理解してから質問したら良かったです。何だかよく分からない質問で申し訳ありません。

回答No.1

ORUKA1951

いいえ、全く考え方が違います。
ブラウザは、HTMLを受け取ったら、その要素に適用されるべきセレクタをすべて探して
　出所、詳細度、出現順番、最重要宣言でソートして、適用されるべきスタイルを見つけ出します。とても簡単で分かりやすい仕組みです。
　カスケーディングスタイルシートの名前にも入っているくらいの基本的--常識です。

　⇒値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

＞ユニバーサルセレクタではなく以下のように指定してある場合は、
　全称セレクタとタイプセレクタの違いは、詳細度が異なります。
　全称セレクタは、CSS2以降、基点となるセレクタにつなげるセレクタを書くルールになったために、新たに導入されたセレクタで、詳細度は0です。

　DOM上で
html
　└body
　　　└ div　　　　class="section"
　　　　　└ h1
　　　　　　　└ span style="color:red"
があれば、スタイルシートを検索します。
　spanに関しては、継承されるプロパティをすべて拾い出します。ここでは、スタイル属性で指定されているcolorは詳細度が 1 0 0 0 ですから、他のすべてのスタイルを上書きします。ただし、出所でユーザーが最重要宣言をしている場合は、そちらが上位です。

　とても単純で分かりやすい仕組みです。

　リセットスタイルは、なんであれ使わないほうが良いです。結果的にすべてを再設定する必要がでてきますから、スタイルが煩雑でメンテナンス困難になります。
　リセットが必要な人の多くは、HTMLには文書構造を、プレゼンテーションはスタイルシートでと言う根本を理解していない人が多いですね。デザインためにHTML書いてる。

　blockquoteなんて、登場すれば何もしなくても一段下げて区別してくれるほうが便利です。

　せっかくブラウザがデフォルトで持っているスタイルシートを活用しないのは無駄でしょう。
　⇒附記A: HTML 4.0におけるスタイルシートの例( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/sample.html )

補足

ありがとうございました。デフォルトCSSをそのまま利用した方が楽なんですね。

ご回答を受けて質問なのですが、前者のリセットCSSの存在意義は分かるのですが、後者のものはサイトのデザインによって適用するセレクタを変えていくべきだと思うのですが、どこのサイトもそのデザインによらず、ほぼ同様のリセットCSSを使っています。それって全く意味がないのではありませんか？

どこかの誰かが各ブラウザのデフォルトCSSを研究し作り出したリセットCSSを、何も考えずにそのまま自分(自社)のサイトに使っているだけなのでは。