CSS Typed Arithmetic | CSS-Methods

I might divide this vary by 1.2rem to get a normalized, unitless worth between 0 and 1. Nonetheless, as a result of I don’t need the textual content to develop into totally clear, I divide it by twice that quantity (2.4rem). This offers me a outcome between 0 and 0.5, which I then subtract from the utmost opacity of 1.

p {
  font-size: var(--font-size, 1rem);
  opacity: calc(1 - (var(--font-size, 1rem) - 0.8rem) / 2.4rem);
}

Discover that I'm displaying the font dimension in pixel models although the scale is outlined in rem models. I merely use typed arithmetic to divide the font dimension by 1px, which supplies me the scale in pixels as a unitless worth. I then inject this worth into the content material of the the paragraph’s ::after pseudo-element.

p::after {
  counter-reset: px calc(var(--font-size, 1rem) / 1px);
  content material: counter(px) 'px';
}

Dynamic Width Colours

In fact, the actual great thing about utilizing native CSS math capabilities, in comparison with different approaches, is that all the pieces occurs dynamically at runtime. Right here, for instance, is a small demo the place I shade the component’s background relative to its rendered width.

p {
  --hue: calc(100cqi / 1px);
  background-color: hsl(var(--hue, 0) 75% 25%);
}

You possibly can drag the bottom-right nook of the component to see how the colour modifications in real-time.

Right here’s one thing neat about this demo: as a result of the component’s default width is 50% of the display screen width and the colour is immediately proportional to that width, it’s potential that the component will initially seem in utterly totally different colours on totally different gadgets with totally different screens. Once more, that is all occurring with none media queries or JavaScript.

An Excessive Instance: Chaining Conversions

OK, so we’ve established that typed arithmetic is cool and opens up new and thrilling prospects. Earlier than we put a bow on this, I wished to pit this idea towards a extra excessive instance. I attempted to think about what would occur if we took a kind, transformed it to a kind, then to an kind, again to a kind, and, from there, again to a kind.

Phew!

I couldn’t discover a real-world use case for such a series, however I did surprise what would occur if we had been to animate a component’s width and use that width to find out the peak of one thing else. All of the calculations may not be needed (possibly?), however I believe I discovered one thing that appears fairly cool.

On this demo, the animation is on the strong line alongside the underside. The vertical place of the ball, i.e. its peak, relative to the road, is proportional to the road’s width. So, as the road expands and contracts, so does the trail of the bouncing ball.

To create the parabolic arc that the ball strikes alongside, I take the component’s width (100cqi) and, utilizing typed arithmetic, divide it by 300px to get a unitless quantity between 0 and 1. I multiply that by 180deg to get an angle that I take advantage of in a sin() operate (Juan Diego has a nice article on this), which returns one other unitless quantity between 0 and 1, however with a parabolic distribution of values.

Lastly, I multiply this quantity by -200px, which outputs the ball’s vertical place relative to the road.

.ball {
  --translateY: calc(sin(calc(100cqi / 300px) * 180deg) * -200px) ;
  translate: -50% var(--translateY, 0);
}

And once more, as a result of the ball’s place is relative to the road’s width, the ball’s place will stay on the identical arc, regardless of how we outline that width.

Wrapping Up: The Daybreak of Computational CSS

The flexibility to divide one typed worth by one other to provide a unitless quantity would possibly look like no large deal; extra like a minor footnote in the grand historical past of CSS.

However as we’ve seen, this single characteristic is a quiet revolution. It dismantles the long-standing partitions between totally different CSS information varieties, reworking them from remoted silos right into a linked, interoperable system. We’ve moved past easy calculations, and entered the period of true Computational CSS.

This isn’t nearly discovering new methods to type a button or animate a loading spinner. It represents a basic shift in our psychological mannequin. We're not merely declaring static types, however moderately defining dynamic, mathematical relationships between properties. The width of a component can now intrinsically find out about its shade, an angle can dictate a distance, and a font’s dimension can decide its personal visibility.

That is CSS changing into self-aware, able to creating complicated behaviors and responsive designs that adapt with a precision and class that beforehand required JavaScript.

So, the subsequent time you end up reaching for JavaScript to bridge a spot between two CSS properties, pause for a second. Ask your self if there’s a mathematical relationship you possibly can outline as a substitute. You is likely to be shocked at how far you possibly can go together with just some traces of CSS.

The Future is Calculable

The examples on this article are simply the primary steps right into a a lot bigger world. What occurs after we begin mixing these strategies with scroll-driven animations, view transitions, and different fashionable CSS options? The potential for creating intricate information visualizations, generative artwork, and really fluid person interfaces, all natively in CSS, is immense. We're being handed a brand new set of artistic instruments, and the instruction handbook remains to be being written.