What are the conditions under which a browser will re-assess and reapply CSS selectors and styles?

Question

Talking strictly about CSS 3, html 5, and styles defined on stylesheets or in a top level tag:

This is what I have observed:

Using JavaScript: If I move an element under another element, or out from under its parent, it and all elements under it will be reviewed for restyling.

If I add or remove a class, an element and all elements under it will be reviewed for restyling. If I add or remove an attribute, an element and all elements under it will be reviewed for restyling.

I assume this is also true of the sibling (~) relationship as well? I mean moving elements relative to their siblings?

Is there anything else that would trigger this? And is there a document someplace (like mozilla) that specifies this as a standard?

Answer 1

That really depends on what you call "restyling".

Here it seems you are only talking about recalculating all the styles applied by all the stylesheets in the document, which is also known as "reflow" or "layout".

Any change to the DOM will mark the CSSOM as dirty, and before the time of rendering, the browser will perform such a reflow if the CSSOM is dirty.
Note that some operations, (most being referenced in this gist by Paul Irish), will force a synchronous reflow, because they do require that an up-to-date boxing model is calculated to return the correct values, or to act correctly. So one must be careful when doing DOM changes in a loop to not also force such a synchronous reflow and let the browser do it at the best time, (generally just before the next paint, but in some browsers it's also done at idle).

However this reflow may not cost much, browser may very well have enough optimizations to know what could have changed and go only through these. Moreover, these don't include the repaint operation, which will only happen at the next screen refresh.

But this is not the only time the browser needs to recalculate the boxes layout, for instance every time the page is resized, or even if an in-flow element's size changes as part of an animation etc. but here, the full stylesheets are not recomputed.

There is not really a place in the specs where it is defined what should trigger these operations, nor even when they should occur. The HTML specification only asks that the browser performs the "rendering steps" of the event-loop, which does end with a quite underspecified "update the rendering or user interface of that Document". The ResizeObserver API does extend the rendering step to include styles recalc and layout update but they don't go as far as defining these steps. Note that there is an open issue on the HTML specs to define it more clearly, but for the time being we don't even have browser interoperability.