Question

When using the same CSS property in one rule set, in the case of needing to provide a fallback for browsers that don’t support a property you may be using, like so:

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

Do browsers that understand both of these declarations render the first, then overwrite it with the second? Or does a browser save itself the hassle and only render the latter?

Edit: I am aware that if a browser understands both declarations it will render the latter, but I want to know if the browser renders/draws the first into the viewport and then overwrites it with the second or does a browser work in a way that means it only renders the one declaration that is required, potentially saving itself resources?

Answer 1

I would expect modern (and probably old) browsers to parse the CSS rules supplied to it before rendering anything. Here’s a screenshot from the Chrome profiler for both rules:

And here’s another, for only the first rule:

As you can see, there are no extra steps involved when two different rules are present. If the browser was to render it twice, you would see another “Paint”. (The slight reduction in paint time for the single rule is likely to be because I removed the rgba rule, so the browser did not have to take transparency into account).