How Browsers Render CSS
A simplified rendering pipeline includes parsing HTML and CSS, constructing internal representations, calculating styles, building layout information, painting visual output, and compositing layers. The exact implementation differs between browser engines.
Changing some properties can require layout recalculation, while others may only require painting or compositing. This is why animation choices matter.
Browser Rendering Pipeline
Prefer Transform for Motion
.item {
transition: transform 200ms ease;
}
.item:hover {
transform: translateY(-4px);
}💡 Transforms are commonly preferred for simple visual movement because they can avoid repeated layout changes in many situations.
Key Takeaways
- CSS participates in style calculation, layout, painting, and compositing.
- Not every CSS property has the same rendering cost.
Knowledge Check
Why are transforms commonly preferred for simple UI movement?