Chrome currently has an experimental implementation of custom CSS functions in its Canary version. In a small series of blog posts, I’ll write about a few things I found interesting in the current prototype implementations of functions and conditions. This post is about one feature of custom functions that I will likely use all the time, but which might not be obvious at the first glance.| blog.kizu.dev
A bit less than a year ago, I published my “Fit-to-Width Text: A New Technique” article. Since then, CSSWG resolved to start working on it, and, following this, two things happened: a discussion of its potential accessibility issues, and an intent to prototype it from Google. I have some thoughts, feedback, and ideas about both of these, so here is a post!| blog.kizu.dev
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
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