TLDR Web Dev · ARTICLES & TUTORIALS

BENCHMARKING THE PERFORMANCE OF CSS @PROPERTY

web.dev12 min read

Summary from the TLDR Web Dev newsletter

This article benchmarks the performance of CSS @property, a new feature that allows developers to register custom CSS properties. PerfTestRunner was used to measure the performance of different types of properties, including regular properties, unregistered custom properties, and registered custom properties with different inheritance settings. The results show that registering a custom property with @property comes at a slight performance cost, but using `inherits: false` when registering a custom property can significantly improve performance.