This was another productive year for me. After 2023, I was afraid that I couldn’t get anywhere close. After all, innovation is hard, and you never know if you will stumble over something exciting. Looking back at 2024, I can safely say that I managed to continue doing what I was doing. And, as it will be obvious from the post, there were things that would be difficult to top.| blog.kizu.dev
When I updated how I am doing scroll markers for the table of contents in this blog, I stumbled upon one curious interaction that I previously did not think deeply about. That interaction: how anchor navigation behaves with elements that have sticky positioning. Initially, this behavior baffled me, and I considered this a bug. But I wondered: are there any legit use cases for this weird behavior?| blog.kizu.dev
There is a calculator that uses JS in the post. If you wonder: “What is special about it” — there was one problem that I wanted to solve: evaluating some math expression from user input in a very safe way. I know, there exist external libraries people did already write which could do this job well enough. But I wanted something minimal and with no dependencies. And hacky. Enter CSS, registered custom property, and `calc()`.| blog.kizu.dev
After the yesterday’s “Observation: CSS Math Eval” post, I got a mastodon reply from Valtteri Laitinen. In this post, I modify my example with `CSSNumericValue`, provide a better fallback, and also look into one curious aspect of `initial-value` of registered custom properties.| blog.kizu.dev
Back in August, I saw a Mastodon thread by Anne Sturdivant about how she was styling titles, in which she described a wish for a certain wrapping behavior. Curiously enough, I remembered one interesting aspect of flexbox that could help to achieve what she wanted, and shared it with her. For quite a while, I wanted to write an “observation” post about it — and, finally, here we are! Maybe you’ll find it useful one day too.| blog.kizu.dev
This is a very short post about a thing that I have wanted to share for quite a while. I am pretty certain that someone already wrote about this at some point, but hey. There is so much content everywhere that it might be useful to repeat stuff, making it more likely someone will stumble upon a solution to their problem.| blog.kizu.dev
In a few of my latest CSS experiments and articles, I used one naming pattern for registered custom properties that I think worth highlighting in a separate blog post. This pattern allows us to create a set of generic custom properties, covering a wide set of use cases for computing and storing their values.| blog.kizu.dev
Registered custom properties are now available in all modern browsers. Using some pre-existing techniques based on them and complex container query length units, I solved a years-long problem of fitting text to the width of a container, hopefully paving the path towards a proper native implementation.| kizu.dev
Media queries are nice, but for many things, we don’t even need them: there is this great CSS property `color-scheme`, which allows us to make various things adapt to the current color scheme. We can even set it on a per-element basis. This post describes how we can use registered custom properties and style queries to read the current value of a `light-dark()` color for styling any non-color properties as well.| blog.kizu.dev
2023 was very productive for me in terms of experimenting with CSS and writing about it. I guess, escaping from reality by submerging yourself into your special interest can have positive results occasionally. Today, I will list everything I published about CSS this year, and write a bit of context about some of it.| blog.kizu.dev
The new year is here, and, with it, a season where people put out their CSS wishlists for the future. I did already read two of them: December’s CSS wishlist from Sarah Gebauer, and today’s “Tyler’s CSS Wish List for 2024” from Tyler Sticka. One thing caught my attention in Tyler’s list: an ability to vertically align to the middle of the font’s cap-height. I am thrilled to report that there are at least two relatively ok workarounds available in the most recent ...| blog.kizu.dev