relationships<\/em> between properties. The width of an element can now intrinsically know about its color, an angle can dictate a distance, and a font’s size can determine its own visibility.<\/p>\n\n\n\nThis is CSS becoming self-aware, capable of creating complex behaviors and responsive designs that adapt with a precision and elegance that previously required JavaScript.<\/p>\n\n\n\n
So, the next time you find yourself reaching for JavaScript to bridge a gap between two CSS properties, pause for a moment. Ask yourself if there’s a mathematical relationship you can define instead. You might be surprised at how far you can go with just a few lines of CSS.<\/p>\n\n\n
The Future is Calculable<\/h4>\n\n\n
The examples in this article are just the first steps into a much larger world. What happens when we start mixing these techniques with scroll-driven animations, view transitions, and other modern CSS features? The potential for creating intricate data visualizations, generative art, and truly fluid user interfaces, all natively in CSS, is immense. We are being handed a new set of creative tools, and the instruction manual is still being written.<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":277647,"featured_media":389384,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"1","_share_on_mastodon_status":"You know how we can\u2019t calc() numbers with mixed data types? Well, that's changing and it might be a bigger deal that Amit Sheen describes as \"self-aware\u201d or Computational CSS.\r\n\r\n%permalink%"},"categories":[4],"tags":[612,19089,1115],"class_list":["post-389371","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-animation","tag-css-functions","tag-math"],"acf":{"show_toc":"Yes"},"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/115259353566331282","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2025\/09\/css-types-arithmetic.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":269675,"url":"https:\/\/css-tricks.com\/working-with-the-new-css-typed-object-model\/","url_meta":{"origin":389371,"position":0},"title":"Working With the new CSS Typed Object Model","author":"Chris Coyier","date":"April 12, 2018","format":false,"excerpt":"Eric Bidelman introduces the CSS Typed Object Model. It looks like it's going to make dealing with getting and setting style values through JavaScript easier and less error-prone. Less stringy, more number-y when appropriate. Like if we wanted to know the padding of an element, classically we'd do: var el\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":325117,"url":"https:\/\/css-tricks.com\/mixing-colors-in-pure-css\/","url_meta":{"origin":389371,"position":1},"title":"Mixing Colors in Pure CSS","author":"Carter Li","date":"November 16, 2020","format":false,"excerpt":"Red + Blue = Purple\u2026 right? Is there some way to express that in CSS? Well, not easily. There is a proposal draft for a color-mix function and some degree of interest from Chrome, but it doesn\u2019t seem right around the corner. It would be nice to have native CSS\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/color-wheels.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/color-wheels.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/color-wheels.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/color-wheels.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/color-wheels.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":297676,"url":"https:\/\/css-tricks.com\/the-typed-object-model\/","url_meta":{"origin":389371,"position":2},"title":"The Typed Object Model","author":"Ruth John","date":"November 20, 2019","format":false,"excerpt":"I help write technical documentation and one feature I've been writing about this year that has really stood out is the Typed Object Model (or Typed OM). If you haven't come across it yet you would be forgiven as it's pretty new. It falls under the CSS Houdini suite of\u2026","rel":"","context":"In "2019 End-of-Year Thoughts"","block_context":{"text":"2019 End-of-Year Thoughts","link":"https:\/\/css-tricks.com\/category\/2019-end-of-year-thoughts\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":305467,"url":"https:\/\/css-tricks.com\/how-to-animate-text-with-svg-and-css\/","url_meta":{"origin":389371,"position":3},"title":"How to Animate Text with SVG and CSS","author":"Robin Rendle","date":"March 25, 2020","format":false,"excerpt":"The other day I was helping my pal Jez work on Dept. of Enthusiasm, the site for his newsletter, and I had a thought. What if we made the word \u201centhusiasm\u201d in the title animate a little bit? Like, what if each of the letters in the word bopped up\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/letter-sbouncing.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/letter-sbouncing.gif?fit=800%2C400&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/letter-sbouncing.gif?fit=800%2C400&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/letter-sbouncing.gif?fit=800%2C400&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":322391,"url":"https:\/\/css-tricks.com\/animating-number-counters\/","url_meta":{"origin":389371,"position":4},"title":"Animating Number Counters","author":"Carter Li","date":"October 9, 2020","format":false,"excerpt":"Number animation, as in, imagine a number changing from 1 to 2, then 2 to 3, then 3 to 4, etc. over a specified time. Like a counter, except controlled by the same kind of animation that we use for other design animation on the web. This could be useful\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/random-number-slots.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/random-number-slots.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/random-number-slots.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/random-number-slots.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/random-number-slots.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":337648,"url":"https:\/\/css-tricks.com\/css-is-a-strongly-typed-language\/","url_meta":{"origin":389371,"position":5},"title":"CSS is a Strongly Typed Language","author":"Eric Bailey","date":"April 13, 2021","format":false,"excerpt":"One of the ways you can classify a programming language is by how strongly or weakly typed it is. Here, \u201ctyped\u201d means if variables are known at compile time. An example of this would be a scenario where an integer (1) is added to a string containing an integer (\"1\"):\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-typed-language.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-typed-language.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-typed-language.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-typed-language.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-typed-language.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/389371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/277647"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=389371"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/389371\/revisions"}],"predecessor-version":[{"id":389518,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/389371\/revisions\/389518"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/389384"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=389371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=389371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=389371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}