CSS Typed Arithmetic | CSS-Tips

I may 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 grow to be totally clear, I divide it by twice that quantity (2.4rem). This offers me a consequence 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 measurement in pixel items despite the fact that the scale is outlined in rem items. I merely use typed arithmetic to divide the font measurement by 1px, which provides 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 features, in comparison with different approaches, is that the whole lot occurs dynamically at runtime. Right here, for instance, is a small demo the place I shade the ingredient’s background relative to its rendered width.

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

You may drag the bottom-right nook of the ingredient to see how the colour adjustments in real-time.

Right here’s one thing neat about this demo: as a result of the ingredient’s default width is 50% of the display width and the colour is immediately proportional to that width, it’s potential that the ingredient will initially seem in utterly completely different colours on completely different gadgets with completely different screens. Once more, that is all taking place 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 potentialities. Earlier than we put a bow on this, I wished to pit this idea in opposition to 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 sequence, however I did marvel what would occur if we have 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 vital (perhaps?), 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 top, 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 ingredient’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 power to divide one typed worth by one other to provide a unitless quantity would possibly appear to be no huge 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 completely different CSS knowledge varieties, remodeling 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 model a button or animate a loading spinner. It represents a elementary shift in our psychological mannequin. We're not merely declaring static types, however reasonably defining dynamic, mathematical relationships between properties. The width of a component can now intrinsically learn about its shade, an angle can dictate a distance, and a font’s measurement can decide its personal visibility.

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

So, the following time you end up reaching for JavaScript to bridge a niche between two CSS properties, pause for a second. Ask your self if there’s a mathematical relationship you'll be able to outline as an alternative. You could be shocked at how far you'll be able to go along with only a few 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 once we begin mixing these methods with scroll-driven animations, view transitions, and different trendy CSS options? The potential for creating intricate knowledge visualizations, generative artwork, and really fluid person interfaces, all natively in CSS, is immense. We're being handed a brand new set of inventive instruments, and the instruction handbook remains to be being written.