@kizu.dev
Inventing weird CSS things. CSSWG Member (previously: an invited expert). Frontend engineer working on Datadog's design system. I'm here only for mentions + posting links, follow me on mastodon for more: https://front-end.social/@kizu
For me it's usually the latest thing I did, which is, in this case, kizu.dev/shrinkwrap-s... :D
(which also requires SDA, but couldn't work without anchor positioning in most cases)
It should be possible to do with just a `view()` timeline, without JS :)
Something like codepen.io/kizu/pen/KwM...
A screenshot of one of the article’s examples. On a white background, there are several boxes visible in a three-dimensional view. The one in the back has rounded corners, green background and a pink outline, and is shorter. The one in the middle is longer, going the full width of the screenshot, and has a pink background. The one in the front has the following text: “I am a Longer Header; I Will Wrap & Look Bad! Oh no! What Can We Do?”, wrapped after the ampersand and balanced.
I wrote a new article: “Solving Shrinkwrap: New Experimental Technique”
https://kizu.dev/shrinkwrap-solution/
In this article, I present my new technique for solving a #CSS problem that was deemed impossible — true shrinkwrapping of an element with […]
[Original post on front-end.social]
.content { position: relative }
.badge { bottom: calc(100% + 8px) }
But yes, anchor positioning is much much better for this, of course :D
I opened a new CSSWG issue about using mixed percentages inside the `progress()`!
https://github.com/w3c/csswg-drafts/issues/13315
I often want to have some API as `--limit: 50% + 100px`, but in #CSS the `%` is often not available, or you might want to evaluate it against _something else_.
I […]
Yep, I also wrote a post about it with some workarounds using regular container size (if you have containment) and style (more clunky, but without side effects) queries — blog.kizu.dev/named-contai...
New blog post: “Build Bridges”.
https://blog.kizu.dev/build-bridges/
This is a very quick shout-out to the Bridgy Fed project by @snarfed.org.
If you know people who are only present on one of the networks and are not bridging their accounts — nudge them to do so!
#IndieWeb #BlueSky #Fediverse
New blog post: “Responsive Cyclic Margins”.
https://blog.kizu.dev/responsive-cyclic-margins/
The title of this post might not seem like a big deal, but the problem I will talk about was pretty fun to work out: how do you make a margin between elements responsive based on the available space in […]
Yes, SDA can work for something like this, but in a pretty hacky way: kizu.dev/position-dri...
At #CSSday I heard from someone on the Chrome team that it is possible that they will look into #CSS linked parameters. For example, for passing them into #SVG.
Do you need this too? Are you tired of bundles with hundreds of inlined SVG icons as jsx?
Write about your use cases! Either here, or […]
New blog post: “Functional Capturing”.
https://blog.kizu.dev/functional-capturing/
Chrome currently has an experimental implementation of custom #CSS functions in Canary, and also recently shipped `if()` in stable version.
In a small series of blog posts, I’ll write about a few things I found […]
This one actually does not use them — it uses container query and captured custom properties :D
The one with SDA was in my previous article — kizu.dev/fit-to-width...
A photo of a screen with a code block from the article. The photo is angled, with parts of the code going out of focus. Some visible parts include an `atan()` function, some CSS variables, `round()`, calc(), and `rgb()` with calculated values.
New article: “Passing Data into SVG: Linked Parameters Workaround”
https://kizu.dev/svg-linked-parameters-workaround/
Twelve years ago, I started a draft for an article I never published: there were a few cross-browser issues and the idea was raw and […]
[Original post on front-end.social]
(the bug itself is also pretty weird, in that it might be a symptom of some more serious underlying issue with SDA, so probably better to look into it earlier than later)
(I will still look into some other issues I saw, but most of them stemmed from this bug, but not all)
For visibility, I replied to Jen on Mastodon with one bug I found and managed to isolate: front-end.social/@kizu/114185...
The bug itself: bugs.webkit.org/show_bug.cgi...
This bug affects most of my demos, so I would prefer to wait until it will be fixed before further testing :)
Around half of my SDA examples (kizu.dev/tags/scroll_...) work (great!) in 213.
Should I report the specifics for those that don't, or better to wait until 214 and check there?
Mm, with the value based on `em`, things seem to work perfectly in my example: because we scale the font-size proportionally after laying things once, anything that uses `em` will scale at the same rate, so both the line will continue to fit and the proportions between elements inside the line stay.
In the example at the start of the thread, it is totally ok to keep the inner elements with not increased size, and the whitespace between them growing: there are always ways to shoot yourself in the foot when you're an author, and we can always get used to weird stuff once we learn how it works.
Cases where the elements inside have calculated dimensions like `calc(30px - 1em)` are much harder, but that's an edge case where it is ok to not get the proper “fit to width” behavior and to bail out earlier, either bumping not to full width, or not doing anything if the result is narrower.
Mm, the way I see it: we take a line, separate it into fragments, check which depend on the font-size of the container, subtract the combined width of the static fragments, and calculate the fit-to-width based on the rest.
Old example (with one static element, a square): codepen.io/kizu/pen/Rwz...
Earlier today #cssday 2025 ticket sales opened. The going is brisk; early birds will likely sell out today.
cssday.nl/tickets.html
Am I using macOS exclusively for more than 17 years? Yes. Do I still remember the alt+0151 shortcut to write the em-dash on Windows? Also yes.
Our Design Systems team at Datadog is looking for a Frontend Staff #Accessibility Engineer. That's the team I am in :)
Ideally, in-office in Paris, France, but some other remote and in-office options are possible: careers.datadoghq.com/all-jobs/?s=...
You're welcome to DM me with any questions!
That would be great! Even better if it was possible to do the same for just any custom properties, including not registered — even without a known type, it is possible to check if it matches a certain type and calculate it, see kizu.dev/preview-mixin/ :)
New blog post “CSS Mixins Everywhere”
https://blog.kizu.dev/css-mixins-everywhere/
On Monday, I published a new article: “Pure CSS Mixin for Displaying Values of Custom Properties”. It is a long one, but you don’t have to read it fully to get something out of it, as I also published an npm […]
And a shorter bluesky edition of credits: @lea.verou.me, Anders Hartvoll Ruud, @anatudor.bsky.social, @geoffgraham.me, @janeori.propjockey.io.
(I think bridgy could do this automatically in a bridged message for some, but not when content is overflowing, hmm)
bsky.app/profile/kizu...
Actually, I decided that I won't post links to my articles here — I will just repost the posts from my bridged account, like for this one: bsky.app/profile/kizu...
Reasons: Mastodon allows for more text in both the post's content, and alt text, so I would rather not spend time shortening both.
A photo of a screen, a bit tilted, and showing an example with a list of multiple values followed by their computed values with a dotted outline. Above, a bit out of focus, the source code for this example's HTML can be seen: a list, with list items having inline styles, each starting from `--preview` and the rest being too blurry to read. The text visible on the example itself (the one with the values and computed values): — 1rem = 18px. — 1em = 23px. — 1lh = 36px. — 1rad = 57.296deg. — 100vw = 1920px. — 𝝅 ≈ 3.142. — 𝝉 ≈ 6.283. — var(--PINK)… and the rest is out of frame.
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 […]
[Original post on front-end.social]
Event announcement for the CSS Café meetup: 'A Solution for the Visual and Source Order Disconnect.' The graphic includes a chalkboard-like background with a pink CSS Café logo in the top right. The title is prominently displayed in bold white text. Event details follow: 'Feb 6th 2025 | 5 PM CET by Rachel Andrew.' A photo of a speaker (Rachel Andrew) is shown on the left, framed like a Polaroid. On the right, there is a visual representation of boxes labeled 1–4, showing a reordering process. At the bottom right, there’s an image of a cup of coffee. The theme suggests accessibility and layout discussions with a casual, café vibe.
Join us for the first CSS Café meetup of the year! 🎉
@rachelandrew.bsky.social will show us a new solution for the visual vs. source order disconnect in CSS: the upcoming reading-flow property! 🌐✨
www.meetup.com/css-cafe/eve...
