1

1つのルールセットで同じCSSプロパティを使用する場合、使用している可能性のあるプロパティをサポートしていないブラウザにフォールバックを提供する必要がある場合は、次のようになります。

body{
    background: rgb(255, 255, 255);
    background: rgba(255, 255 ,255, 0.5);
}

これらの宣言の両方を理解しているブラウザーは、最初の宣言をレンダリングしてから、2番目の宣言で上書きしますか？それとも、ブラウザは面倒なことを省いて、後者だけをレンダリングしますか？

編集：ブラウザが両方の宣言を理解すると後者がレンダリングされることは承知していますが、ブラウザが最初の宣言をビューポートにレンダリング/描画してから2番目の宣言で上書きするのか、それともブラウザが次のように機能するのかを知りたいです。必要な宣言を1つだけレンダリングし、リソースを節約できる可能性があることを意味しますか？

4

6 に答える 6

2

最新の（そしておそらく古い）ブラウザーは、何かをレンダリングする前に、提供されているCSSルールを解析することを期待しています。両方のルールのChromeプロファイラーのスクリーンショットは次のとおりです。

ここに画像の説明を入力してください

そして、これがもう1つ、最初のルールのみです。

ここに画像の説明を入力してください

ご覧のとおり、2つの異なるルールが存在する場合、追加の手順は必要ありません。ブラウザで2回レンダリングすると、別の「ペイント」が表示されます。（単一のルールのペイント時間がわずかに短縮されたのは、ルールを削除したためである可能性が高いrgbaため、ブラウザーは透明度を考慮する必要がありませんでした）。

于 2012-04-26T13:20:56.467 に答える
1

2つのうち最後のものが適用されます

より正確には、最初のものが適用され、次に2番目のものが適用されます。これは、2つの同一のセレクターでbackgroundプロパティを設定するのと同じです。最も説明的なものが適用されます。それらが同じである場合、最後に宣言されたものが適用されます。

于 2012-04-26T13:02:38.803 に答える
0

CSSの「C」はカスケードを表します。これは、スタイルが先行するCSSルールに追加または優先できることを意味します。したがって、2番目の宣言は最初の宣言をオーバーライドします。

于 2012-04-26T13:02:30.830 に答える
0

ブラウザはこれを正しく処理します。そのようなルールを使用できます。

たとえば、chromeはrgbaを適用し、IE8はrgbを適用します。

于 2012-04-26T13:02:41.817 に答える
0

ブラウザは通常、次のアルゴリズムを適用します。

for each element in the DOM tree
    for each CSS rule
        if rule's selector matches element
            apply all declarations in rule
render

これはそれがどのように機能するかではありません：

for each CSS rule
    for each element in DOM tree
        if rule's selector matches element
            for each declaration in rule
                apply declaration
                render

それは大きなパフォーマンスの問題になります。

于 2012-04-26T13:18:39.027 に答える
0

基本的なUA適合要件から、ブラウザーは最初にすべてのCSSルールを解析し、次に仕様で設定された原則に従って、各要素の各プロパティに使用する値を決定する必要があります。CSSコードの一部を残りの部分を読み取る前に適用するという意味で、「インクリメンタルレンダリング」は許可されていません。そして、ブラウザがこれから逸脱することは非常に奇妙なことです。それは、実装者にとってより多くの作業、作成者とエンドユーザーからのより多くの苦情、そして利益がないことを意味するからです。

于 2012-04-26T15:48:11.920 に答える