Post #2114246

2025-01-27 10:33 UTC

I wrote a new article, and published a new package: “Pure CSS Mixin for Displaying Values of Custom Properties” https://kizu.dev/preview-mixin/ Do you write #CSS? Do you use custom properties with calculations? Do you want to preview their values while you’re debugging them? What if you could do so by setting just one additional custom property? Without any JS? In this article, I present a native CSS mixin that will output various values as pseudo-elements.

Replies (7)

@kizu@front-end.social 2025-01-27 10:41

As usual, the credits: - @leaverou@front-end.social — a `string()` CSSWG issue, her “CSS Variable Secrets” talk. - Anders Hartvoll Ruud (https://github.com/andruud) — a PR for a dashed idents type spec fix. - @anatudor@mastodon.social — “Using Absolute Value, Sign, Rounding and Modulo in CSS Today” article. - @geoff@front-end.social — “Some Things You Might Not Know About Custom Counter Styles” article. - @JaneOri@front-end.social — “CSS Type Casting to Numeric: tan(atan2()) Scalars” & “CSS-Only Type Grinding: Casting Tokens (sm|md|etc) into Useful Values”.

Open ##2590794
@kizu@front-end.social 2025-01-27 16:47

When we will have `indent()`, it would be possible to actually to create a single dashboard on a page that would accumulate multiple counters from different elements (well, as long as they're not contained) and display in one place. Basically, instead of resetting each time, we could first init multiple counters somewhere on the root, and then _increment_ all the counters when running the `--preview` with all the counter idents dynamically generated.

Open ##2590795
@kizu@front-end.social 2025-01-27 17:58

Some random stats! In the end, on the desktop, the article is 42060px high (65460 after expanding the details with the full commented code of the mixin), has 38 headers, and 24 sidenotes. The mixin's code is 862 lines, 19567 bytes, including 63 comments. 8378 bytes minified without comments. 2kb–2.2kb when minified with brotli/gzip/deflate. Not that it matters, as you shouldn't use it in production :D I started working on both right after publishing my previous article, so on December 25.

Open ##2590796
@css@front-end.social 2025-01-27 11:05

@kizu@front-end.social I once tried to explore this path by removing the unit from any value but I only got a hacky chrome-only experimentation where I had to deal with big numbers: https://css-tip.com/length-to-integer/ Dealing with each unit then do a merge is indeed a good idea 👍

Open ##2590798
@geoff@front-end.social 2025-01-27 16:37

@kizu@front-end.social 🤯 Well done!

Open ##2590799
@tixie@mastodon.guerilla.studio 2025-01-27 17:52

@kizu@front-end.social OH! I'll have to take a look but that's looks AWESOME! Thank you! 🤩

Open ##2590800
@spartanatreyu@mastodon.social 2025-02-06 06:39

@kizu@front-end.social Absolutely masterful. I thought the cyclic dependencies article pushing css as far as it would go, was great but only in the "academic / no-real-world-use" sense. But then I saw all these techniques pushed together and all of a sudden we get this thing that is a great work in the "I can't wait to use this" sense. Well done!

Open ##2590801