CSS Custom Functions are coming and they are going to be a game changer

Chrome is currently prototyping CSS Functions, which is very exciting! ~ ⚠️ This post is about an upcoming CSS feature. You can’t use it … yet. This feature is currently being prototyped in Chrome Canary and can be tested in Chrome Canary with the Experimental Web Platform Features flag enabled. ~ Chrome is currently prototyping CSS Functions from the css-mixins-1 specification. A custom function can be thought of as an advanced custom property, which instead of being substituted by a single fixed value, computes its substitution value based on function parameters and the value of custom properties at the point it’s invoked. Here’s a very simple example (taken from the spec) that should give you an idea of what a custom function looks like: @function --negate(--value) { result: calc(-1 * var(--value)); } You invoke the function like by calling directly – no need for var() or the like – and can use it anywhere a value is accepted. For example: :root { padding: --negate(1px); /* ... Read full article.