A Couple of New CSS Functions I’d Never Heard Of

light-dark()

Saw Bramus post about this.

:root {
  color-scheme: light dark;
  --text-color: light-dark(#333, #ccc);
}Code language: CSS (css)

Apparently, this is just a first step on the way toward a more robust schemed-value() function that can handle more than just those two themes and more than just colors.

Still useful! Without light-dark(), we need to use media queries and it’s more laborious:

:root {
  color-scheme: light dark;
  --text-color: #333; /* Value for Light Mode */
}

@media (prefers-color-scheme: dark) {
  --text-color: #ccc; /* Value for Dark Mode */
}Code language: CSS (css)

Browser support as I write: Firefox only.

xywh()

This creates a “basic shape” that starts at the X, Y coordinate and then has the specified width and height. Kinda cool. Used in the places you use basic shapes:

.thing-that-moves {
  offset-path: xywh(0 20px 100% calc(100% - 20px));
}

.thing-that-is-clipped {
  clip-path: xywh(0 0 100% 100% round 5px);
}Code language: CSS (css)

Reminds me of how we can use inset() like…

.element {
  clip-path: inset(1rem 20px 2rem 20px);
}Code language: CSS (css)

… in order to clip the edges of an element certain distances. The xywh() function can be used just like that only rather than clip from the right and bottom, you can specify the size of the box in case that’s more useful. The round thing is especially cool and uses whatever border-radius can take.

Slightly altered from the MDN example, I like how you can animate along a path with it, but the rounding makes for a turning animation it would be hard to get otherwise:

Browser support as I write: spotty and mostly only works with offset-path.

round()

At first, I was like, OK sure, some thing that will make sure any weird division ends up as a whole integer in case any sub-pixel rendering ends up looking bad. But this is way fancier than that! It rounds to nearest by default but can be up or down or the exotic to-zero. But more crucially, has a “rounding interval” meaning not just the relevant closest integer, but any interval-of-integer.

So if you want to round a number to, say, the nearest 25, you can do that! Neat! Here’s me playing:

If you don’t have Firefox handy, here’s a video:

Browser support looks like it’s just waiting for Chrome! Jane Ori has a clever trick for making it work in Chrome though.

perspective()

I knew perspective was a CSS property, I just didn’t know it was a function (it’s not “new”). I already find perspective to be completely weird and nigh-unlearnable aside from “pick a value that seems good”. The perspective() function only adds to that as it doesn’t replace the perspective is just… augments it or something?

MDN:

The perspective() transform function is part of the transform value applied on the element being transformed. This differs from the perspective and perspective-origin properties which are attached to the parent of a child transformed in 3-dimensional space.

So an element might be like:

.box {
  perspective: 550px;
  transform: perspective(800px);
}Code language: CSS (css)

And apparently, that’s fine and not weird. 🧐