Sign in

Roma Komarov

@kizu.dev
477 followers 60 following 27 posts

Inventing weird CSS things. CSSWG Member (previously: an invited expert). Frontend engineer working on Datadog's design system. He/him. I'm here only for mentions + posting links, follow me on mastodon for more: front-end.social/@kizu

PostsRepliesMedia
Roma Komarov @kizu.dev · 12/09/2026
Note that my more complicated technique is based on the same simple anchored technique I posted about in 2023 — kizu.dev/shrinkwrap-p... :)
kizu.dev
The Shrinkwrap Problem: Possible Future Solutions
There is one old, yet unsolved, CSS problem: shrinking containers to fit the content when it automatically wraps. While not intentional, anchor positioning allows us to come closer to solving it, at l...
151
Roma Komarov @kizu.dev · 25/08/2026
Work around with `tan(atan2())` by @janeori.propjockey.io: dev.to/janeori/css-... Capturing values: blog.kizu.dev/captured-cus... (and use cases like blog.kizu.dev/querying-the...) Decoupling the effects from scroll-driven animations: kizu.dev/position-dri... (often not really animations) etc etc
blog.kizu.dev
Captured Custom Properties
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...
040
Roma Komarov @kizu.dev · 02/08/2026
A pseudo “without HTML” — codepen.io/kizu/pen/yyg... Pseudo — as the paragraph is now `display: inline`, and in a real project that might not be feasible.
codepen.io
Skeleton as a style?
...
030
Reposted by Roma Komarov
Roma Komarov @kizu.front-end.social.ap.brid.gy · 22/07/2026
Oooh, Chrome thinks about prototyping a solution for basic cases for shrinkwrap: github.com/w3c/csswg-drafts/issues/… github.com/explainers-by-googlers/c… That would be great, as the only current CSS-only solution […]
front-end.social
Original post on front-end.social
022
Roma Komarov @kizu.dev · 15/04/2026
This issue that we resolved 2 weeks ago might interest you :) github.com/w3c/csswg-dr... But yeah, I think we need something more general, although a single anchor is often difficult to quantify into a length in abstract, _but_ we for sure need more there!
github.com
[css-anchor-position-1] allow anchor() within shape() · Issue #13716 · w3c/csswg-drafts
Not sure of the technical specifics or limitations, but being able to use anchor() as a position within shape() would be a godsend.
130
Roma Komarov @kizu.dev · 18/03/2026
Related: github.com/w3c/csswg-dr... (with a few use cases inside)
github.com
[css-values] Proposal: `children-count()` function · Issue #11068 · w3c/csswg-drafts
Problem In the #4559 it was resolved to add two new functions which are now in the css-values-5 WD: sibling-count() and sibling-index() as tree-counting functions (I'm using that issue as a templat...
252
Roma Komarov @kizu.dev · 16/03/2026
It seems to be this one: bugs.webkit.org/show_bug.cgi...
bugs.webkit.org
301919 – [css-anchor-position-1] Chained positioned elements don't find the correct anchors
101
Roma Komarov @kizu.dev · 21/02/2026
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)
kizu.dev
Solving Shrinkwrap: New Experimental Technique
In this article, I present my new technique for solving a CSS problem that was deemed impossible — true shrinkwrapping of an element with auto-wrapped content. By using anchor positioning and scroll-d...
050
Roma Komarov @kizu.dev · 02/02/2026
It should be possible to do with just a `view()` timeline, without JS :) Something like codepen.io/kizu/pen/KwM...
codepen.io
Fun shadow coding challenge (fork)
...
050
Reposted by Roma Komarov
Roma Komarov @kizu.front-end.social.ap.brid.gy · 27/01/2026
I wrote a new article: “Solving Shrinkwrap: New Experimental Technique” 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]
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.
2116
Roma Komarov @kizu.dev · 08/01/2026
.content { position: relative } .badge { bottom: calc(100% + 8px) } But yes, anchor positioning is much much better for this, of course :D
050
Reposted by Roma Komarov
Roma Komarov @kizu.front-end.social.ap.brid.gy · 08/01/2026
I opened a new CSSWG issue about using mixed percentages inside the `progress()`! github.com/w3c/csswg-drafts/issues/… 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 […]
front-end.social
Original post on front-end.social
011
Roma Komarov @kizu.dev · 13/12/2025
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...
blog.kizu.dev
Named Container Presence Check
I was doing some styling recently, and I wanted to know if my element was inside a certain container. While I could reuse the same selector that I used to apply the container with, this did not feel r...
030
Reposted by Roma Komarov
Roma Komarov @kizu.front-end.social.ap.brid.gy · 29/11/2025
New blog post: “Build Bridges”. 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
blog.kizu.dev
Build Bridges Build Bridges Build Bridges Build Bridges
# Build Bridges Build Bridges Build Bridges Build Bridges Published on: November 29, 2025 Categories: Fediverse 3, Mastodon 6, IndieWeb 11 Current music: 36 — _Inside (2:56AM Mix)_ {fallback} Current drink: Lemongrass, Ginger & Black Pepper tea This is a very quick shout-out to the Bridgy Fed project by Ryan Barrett. Its goal is to connect people across otherwise unrelated federated network: Fediverse, Bluesky, and even IndieWeb sites. After the exodus from more corporate and capitalist networks, people ended up in different parts of the web. Each segment could be well-connected inside, but if you want to participate _everywhere_ where people are now, you often need to create and maintain multiple accounts. I often see people reposting the same thing in multiple places — which is fine, but not everyone has the spoons to do so. Not everyone is also ready to create an account in a network they do not understand or do not like. That’s where Bridgy can really help: it is the _easiest_ and most straightforward way to connect your account to other networks. * If you’re on Mastodon or elsewhere in the Fediverse and want to make it possible for people from Bluesky to follow you, you can either log in with your account here or just follow the `@bsky.brid.gy@bsky.brid.gy` account from your client (you can use search to find it there via its handle). * If you’re on Bluesky, and want to make it possible for people on Mastodon and the Fediverse at large to follow you, you can either log in with your account here, or just follow @ap.brid.gy from Bluesky. That’s it. Bridgy works as opt-in — nothing is bridged without your consent, and by default it will only bridge your public posts. Here is, for example, my bridged account on Bluesky, where the posts from my Mastodon profile go automatically. And here is my bridged Pixey (Pixelfed instance) account where the photos from my Pixey gallery go. Bridgy even handles replies, DMs, and more. It is zero maintenance, and there is zero reason not to use it. If you know people who are only present on one of the networks and are not bridging their accounts — nudge them to do so! The more interconnected our web is, the more powerful it is. I find it awesome that vastly different networks can talk to each other thanks to projects like that.
001
Reposted by Roma Komarov
Roma Komarov @kizu.front-end.social.ap.brid.gy · 25/11/2025
New blog post: “Responsive Cyclic Margins”. blog.kizu.dev/responsive-cyclic-mar… 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 […]
front-end.social
Original post on front-end.social
111
Roma Komarov @kizu.dev · 20/06/2025
Yes, SDA can work for something like this, but in a pretty hacky way: kizu.dev/position-dri...
kizu.dev
Position-Driven Styles
After solving the fit-to-width text, stuck state for sticky elements, and scroll shadows, I wondered: how many other items from various CSS wishlists could I solve with scroll-driven animations? A lot...
040
Reposted by Roma Komarov
Roma Komarov @kizu.front-end.social.ap.brid.gy · 07/06/2025
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 […]
front-end.social
Original post on front-end.social
132
Reposted by Roma Komarov
Roma Komarov @kizu.front-end.social.ap.brid.gy · 03/06/2025
New blog post: “Functional Capturing”. 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 […]
front-end.social
Original post on front-end.social
112
Roma Komarov @kizu.dev · 30/05/2025
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...
kizu.dev
Fit-to-Width Text
What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! Join me as I continue ex...
010
Reposted by Roma Komarov
Adam Argyle @nerdy.dev · 11/04/2025
G̶o̶o̶g̶l̶e̶r̶… ex-Googler. nerdy.dev/ex-googler
nerdy.dev
G̶o̶o̶g̶l̶e̶r̶… ex-Googler. · April 10, 2025
My role at Google was eliminated.
4911637180
Reposted by Roma Komarov
Roma Komarov @kizu.front-end.social.ap.brid.gy · 24/03/2025
New article: “Passing Data into SVG: Linked Parameters Workaround” kizu.dev/svg-linked-parameters-work… 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]
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.
336
Roma Komarov @kizu.dev · 19/03/2025
(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)
110
Roma Komarov @kizu.dev · 19/03/2025
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 :)
front-end.social
Roma Komarov (@kizu@front-end.social)
@jensimmons I wanted to report a bunch of SDA issues I found in my demos, but I think maybe most of them are due to this bug: https://bugs.webkit.org/show_bug.cgi?id=289992 — as it basically breaks `r...
110
Roma Komarov @kizu.dev · 21/02/2025
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?
100
Roma Komarov @kizu.dev · 19/02/2025
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.
010
Roma Komarov @kizu.dev · 15/02/2025
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.
110
Roma Komarov @kizu.dev · 15/02/2025
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.
110
Roma Komarov @kizu.dev · 15/02/2025
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...
codepen.io
fit-text with the account for the optical size (one extra pass, working!)
...
110
Reposted by Roma Komarov
CSS Day @cssday.nl · 11/02/2025
Earlier today #cssday 2025 ticket sales opened. The going is brisk; early birds will likely sell out today. cssday.nl/tickets.html
cssday.nl
CSS Day 2025, 5th & 6th of June, Amsterdam
CSS Day is the conference for CSS designers, developers, spec writers, and browser vendors.
12519
Roma Komarov @kizu.dev · 10/02/2025
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.
010
Roma Komarov @kizu.dev · 03/02/2025
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!
careers.datadoghq.com
Job Openings | Datadog Careers
We're building a platform that engineers love to use. Join us, and help usher in the future.
030
Roma Komarov @kizu.dev · 30/01/2025
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/ :)
kizu.dev
Pure CSS Mixin for Displaying Values of Custom Properties
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 propert...
010
Reposted by Roma Komarov
Roma Komarov @kizu.front-end.social.ap.brid.gy · 29/01/2025
New blog post “CSS Mixins Everywhere” 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 […]
front-end.social
Original post on front-end.social
0103
Roma Komarov @kizu.dev · 27/01/2025
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...
020
Roma Komarov @kizu.dev · 27/01/2025
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.
010
Reposted by Roma Komarov
Roma Komarov @kizu.front-end.social.ap.brid.gy · 27/01/2025
I wrote a new article, and published a new package: “Pure CSS Mixin for Displaying Values of Custom Properties” 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]
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.
376
Reposted by Roma Komarov
CSS Café @css.cafe · 22/01/2025
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...
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.
01412
Reposted by Roma Komarov
Roma Komarov @kizu.front-end.social.ap.brid.gy · 31/12/2024
New blog post: “My 2024 in CSS” blog.kizu.dev/my-2024-in-css 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 […]
front-end.social
Original post on front-end.social
082
Roma Komarov @kizu.dev · 24/12/2024
As usual, the credits: - @lea.verou.me (conditions!) - @tldraw.com (schemes!) - @5t3ph.bsky.social (smol grid!) - @heydonworks.bsky.social (original question!) - @miriam.codes (mixins!)
020
Roma Komarov @kizu.dev · 24/12/2024
I wrote a new article: “Indirect Cyclic Conditions: Prototyping Parametrized CSS Mixins” kizu.dev/indirect-cyc... In my quest to push forward what is possible with #CSS, I discovered another application of cyclic dependencies. We are now even closer to something that resembles native CSS mixins.
A photo of the screen, zoomed onto a scheme that shows several blocks with solid and dashed arrows going between them. Most of the photo is out of focus, with the `--resize3` visible in the middle.
3365
Roma Komarov @kizu.dev · 30/11/2024
I created this account to mostly post links to my articles, and to have a handle for people to mention when they need to attribute something to me. My main account is, and will be on Mastodon: front-end.social/@kizu You can follow it here through the bridge: bsky.app/profile/kizu...
030