5

重複の可能性:
CSS リセットですべての要素をカバーするために「*」を使用しないのはなぜですか?

軽量の HTML を持つページを作成しています。

ユニバーサルセレクターは悪いことであり、そのように使用する方が良いと言っている達人を見てきました(From: http://meyerweb.com/eric/tools/css/reset/ ):

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

ユニバーサル セレクターの使用:

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

ユニバーサルセレクターが悪いのはなぜですか?

ページ読み込みのパフォーマンスを考慮すると、私はユニバーサル セレクターを好みます。他に考慮していないことはありますか？

4

2 に答える 2

7

  • ユニバーサルセレクターは、他の定義済みルールよりも優先度が非常に低くなります。

    理由の 1 つは、universal-selectorの優先順位が非常に低く、より具体的なselectorによって定義された値を「上書き」できないことです。以下の例を参照してください。

    すべての要素の背景色をセレクターに「リセット」したい場合でも、divを使用する方が適切であり、後で宣言されますが、代わりに使用されます。blue*

    div {背景色:赤}
    * {背景色:青}

  • ユニバーサルセレクターを使用しても、必要なコントロールは得られません..

    ユニバーサルセレクターを使用しても、実際にプロパティが設定される正確な要素を制御することはできません。特定の項目をリセットしないように CSS を記述するよりも、明示的なリストから要素を削除/追加する方が簡単です。

  • ユニバーサルセレクターの使用は明らかに非常に遅いです

    ページの読み込みにかかる時間について言及しましたが、必要なリソースをダウンロードする方が、*より多くの文字 (代替の推奨リセットを使用) を使用するよりも1 文字 (ページのレンダリング速度。

    universal-selectorに関して Mozilla 開発者ネットワークによって書かれているように:

    注 : ユニバーサル セレクターは Web ページ パフォーマンスの点で最もコストのかかる CSS セレクターであるため、作成者はユニバーサル セレクターを使用しないことをお勧めします。

    次のリンクをたどると、セレクターのコストについて詳しく読むことができます。

于 2012-07-17T23:05:28.553 に答える
4

どの要素がリセットされるかを正確に制御することはできません。ドキュメントで使用されるすべての要素には、マージンとパディングを明示的に設定する必要があります。また、リセットに含まれる可能性のある境界線やアウトラインなどのその他のプロパティも必要です。

親要素から子要素への CSS ルールの継承に別れを告げましょう。ユニバーサル セレクターが常に優先されます。したがって、リセット後にすべての要素を定義する必要があるだけでなく、子要素は各要素のプロパティを継承できないため、明示的に定義する必要もあります。これに必要なコードの量は、最小限の CSS リセットによるサイズの節約を無効にすることさえあります!

普遍的な宣言によると、ブラウザーはページ上のすべての要素を実行し、要素、その子、および曾孫のすべてに同様に、普遍的なルールを適用する必要があります。ページの読み込み時間 (この点は、最新のブラウザーでは議論の余地があります。)

バージョン 6 までの Internet Explorer では、スター HTML セレクターのバグが見られます。* html などの子孫セレクターは、どの要素とも一致しないはずです。これは、html 要素が最上位の親要素であり、他の要素の子孫になることができないためです。ただし、Internet Explorer バージョン 5.5 および 6 は、このセレクターの先頭にあるユニバーサル セレクターを無視します。

ユニバーサル セレクターがエレメント タイプ セレクターのすぐ隣にある場合、Internet Explorer バージョン 6 および 7 は、本来の失敗ではなく、その組み合わせを子孫セレクターとして解釈します。Internet Explorer 6 および 7 では、このセレクターは、doctype 宣言やコメントなどの不適切な SGML 要素も選択します。

于 2012-07-17T22:59:25.383 に答える