There actually is a steps() function in CSS, but it’s only used for animation. You can’t, for example, tell an element it’s allowed to grow in height but only in steps of 10px. Maybe someday? I dunno. There would have to be some pretty clear use cases that something like background-repeat: space || round; doesn’t already handle.
Another way to handle steps would be sequential media queries.
@media (max-width: 1500px) { body { font-size: 30px; }}
@media (max-width: 1400px) { body { font-size: 28px; }}
@media (max-width: 1300px) { body { font-size: 26px; }}
@media (max-width: 1200px) { body { font-size: 24px; }}
@media (max-width: 1000px) { body { font-size: 22px; }}
@media (max-width: 900px) { body { font-size: 20px; }}
@media (max-width: 800px) { body { font-size: 18px; }}
@media (max-width: 700px) { body { font-size: 16px; }}
@media (max-width: 600px) { body { font-size: 14px; }}
@media (max-width: 500px) { body { font-size: 12px; }}
@media (max-width: 400px) { body { font-size: 10px; }}
@media (max-width: 300px) { body { font-size: 8px; }}That’s just weird, and you’d probably want to use fluid typography, but the point here is resizing in steps and not just fluidity.
I came across another way to handle steps in a StackOverflow answer from John Henkel a while ago. (I was informed Star Simpson also called it out.) It’s a ridiculous hack and you should never use it. But it’s a CSS trick so I’m contractually obliged to share it.
The calc function uses double precision float. Therefore it exhibits a step function near 1e18… This will snap to values 0px, 1024px, 2048px, etc.
calc(6e18px + 100vw - 6e18px);That’s pretty wacky. It’s a weird “implementation detail” that hasn’t been specced, so you’ll only see it in Chrome and Safari.
You can fiddle with that calculation and apply the value to whatever you want. Here’s me tuning it down quite a bit and applying it to font-size instead.
Try resizing that to see the stepping behavior (in Chrome or Safari).
I wouldn’t be surprised if someone made this work using CSS Grid… somehow.
One thing I’ve always wanted to figure out is a website that aligns perfectly to a grid background and is also fully responsive. Usually you can get the vertical elements to align fairly easily, but the horizontal ones are always tricky. This is a neat trick that might help with that, although I don’t love how “hack-y” it is. I’ve been thinking the cleanest solution would be to have a CSS variable that is set based on screen width, using a tiny amount of JavaScript to round it down to the nearest unit. But you’d also have to be careful of breakpoints and such when you have items aligned in a row.
I wonder if you could make animation-steps() work this way using https://github.com/typetura/typetura.js by Scott Kellum :)
This absolutely looks like a bug with the way that the precision is handled, especially given how it’s unspecced and not a behaviour all browsers present. I’d not be surprised if this were to change in future versions of Webkit (I’m assuming that’s the culprit here, as Chromium exhibits the same behaviour).