Starting in Chrome 140, we'll be able to calculate numeric values with mixed data types. Sounds small, but Amit demonstrates how big a deal this is, calling it Computational CSS.

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

CSS typed arithmetic, available starting in Chrome 140, allows division of typed values to produce unitless numbers, enabling conversion between different CSS data types. This feature opens new possibilities for creating dynamic relationships between properties, such as calculating element positions based on screen width, determining opacity from font size, or creating responsive animations without media queries or JavaScript. The capability transforms CSS from static declarations into computational relationships between properties.

CSS Typed Arithmetic

Wrapping Up: The Dawn of Computational CSS