Trending
Roma Komarov's Avatar

Roma Komarov

@kizu.front-end.social.ap.brid.gy

Inventing weird CSS things. CSSWG Member (previously: an invited expert). Frontend engineer working on Datadog's design system. Ask me about: #CSS, #Frontend […] πŸŒ‰ bridged from ⁂ https://front-end.social/@kizu, follow @ap.brid.gy to interact

71
Followers
8
Following
453
Posts
19.11.2024
Joined
Posts Following

Latest posts by Roma Komarov @kizu.front-end.social.ap.brid.gy

Preview
[css-properties-values-api] Make all the descriptors optional Β· Issue #994 Β· w3c/css-houdini-drafts https://drafts.css-houdini.org/css-properties-values-api-1/ For convenience I would talk about the CSS syntax, but the same could apply to the registerProperty() JS function as well. Currently, all...

(I tried to fight for this six years ago β€” https://github.com/w3c/css-houdini-drafts/issues/994 β€” great that the general mood changed and led to this being now accepted :blobcatmelt:)

11.03.2026 15:42 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

> RESOLVED: make all property descriptors in @property optional

https://github.com/w3c/csswg-drafts/issues/13211#issuecomment-4040028009

11.03.2026 15:27 πŸ‘ 5 πŸ” 1 πŸ’¬ 1 πŸ“Œ 0
Original post on front-end.social

My brain went all the way to thinking how I could work around that with what we have in CSS. And there is a lot we can hack there today already, haha. I am not sure if I will ever actually make a demo for some of it though β€” too many other things to poke at.

I wish I could just do all these […]

13.02.2026 23:00 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Original post on front-end.social

Re: keyboard shortcuts β€” my wish from a very long time ago was for CSS to have some pseudo-classes (or some kind of queries) that would tell you if some keyboard modifier is currently pressed. Like, if you press option/shift/ctrl etc β€” and the UI could respond to that.

Like, in macOS when you […]

13.02.2026 22:47 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Original post on front-end.social

There will also be need for something similar to https://github.com/w3c/csswg-drafts/issues/7017, or some other way to make the click-to-drag work for panning a scrollable container without JS β€” so you could either dedicate some area for this and exclude interactive elements, or still allow it […]

13.02.2026 22:45 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Original post on front-end.social

There are some very small movements towards something like that. For example, this issue by @flackr that was resolved on the last CSSWG F2F β€” https://github.com/w3c/csswg-drafts/issues/13207 β€” to make it possible to disable the default axis-locking that browsers do for containers that you can […]

13.02.2026 22:41 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
Original post on front-end.social

I wish CSS had native pan & zoom support. Basically, what maps, infinite canvases, etc. do β€” an ability for some container to be independently, infinitely (or with some constraints) zoomed and panned/scrolled around.

Elements inside could listen to the zoom level and transform, simplifying […]

13.02.2026 22:38 πŸ‘ 8 πŸ” 0 πŸ’¬ 2 πŸ“Œ 0

My next article will be for sure about Scroll-Driven Animations (as I promised in my last article), but I think now that they’ll go into interop, it is time to push for something that is not there yet β€” I think I will really try to work on my various multicol & exclusions drafts.

12.02.2026 22:36 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Yay, scroll-driven animations and style queries in Interop 2026!

Now, let’s look if there is something about typography and multicol…

…

:blobcatsadreach:

12.02.2026 22:34 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

Current state of this:

p {
text-transform: lowercase;

&::first-line {
text-transform: capitalize;
}
}

- Chrome: capitalized
- Firefox: all uppercase
- Safari: all lowercase

Also, works only with `::first-line`, a nested span will not work and keep things uppercase.

11.02.2026 11:45 πŸ‘ 3 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0
Original post on front-end.social

Listened to the @shoptalkshow, and there was a question about `text-transform: capitalize` not being able to _reduce_ the all-uppercase text. I think, for sure, there should be an issue about making this possible (`force-capitalize` or something?).

Meanwhile, what I tested is if there are […]

11.02.2026 11:43 πŸ‘ 3 πŸ” 1 πŸ’¬ 1 πŸ“Œ 0

That feeling when you get 50 items removed from your Bandcamp wishlist on Friday, and now more of the music that you’re used to listening to all the time is available on your local setup.

:blobcatuwu:

06.02.2026 21:37 πŸ‘ 0 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0
A photo of a black Carrion Crow standing in some short green grass mixed with a few fallen leaves and thin branches and sticks.

The crow looks a bit aside curiously.

The focus is on the crow, with the grass going out of focus rather quickly.

A photo of a black Carrion Crow standing in some short green grass mixed with a few fallen leaves and thin branches and sticks. The crow looks a bit aside curiously. The focus is on the crow, with the grass going out of focus rather quickly.

A photo from a short walk on 2026-01-31.
πŸ“· OM-3 & 75 mm Ζ’1.8

02.02.2026 17:52 πŸ‘ 1 πŸ” 2 πŸ’¬ 0 πŸ“Œ 0
Original post on front-end.social

This Friday is a Bandcamp Friday, btw.

For those who are planning to buy stuff there β€” the last time I tried, I only managed to buy like 10% of what I planned, as with the way it does stuff, my banks at some point started denying the requests, lol. Because it kinda does one purchase per […]

02.02.2026 13:27 πŸ‘ 1 πŸ” 1 πŸ’¬ 0 πŸ“Œ 0

Basically: β€œWe have a circularity? Let’s do a CSS-only while loop until we happen not to have it!”

01.02.2026 17:23 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Was thinking about a problem and found a hypothetical solution that will require a continuous random in CSS (one that is different each time it is recalculated for any reason).

01.02.2026 17:22 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

What would you say if my next article will be explicitly about breaking certain CSS rules? Not that my past articles did not do that… But hey, this time I will be explicit about that.

31.01.2026 14:47 πŸ‘ 1 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

RE: https://front-end.social/@kizu/115966776474014598

In case you missed it, I wrote a new article about my new CSS technique. If you worked with CSS for a while, you likely stumbled upon the problem it solves.

The article is long, so if you did not find an opportunity to read it yet β€” I hope […]

30.01.2026 18:09 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

`display: inline-grid lanes`

30.01.2026 11:22 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Original post on front-end.social

Random thought: if I ever redesign/rewrite my main website, I will likely need to keep all the old articles intact in the old design & markup, as I pretty often hack things around its current design & implementation, and would not want to make sure every article will still look the same with […]

27.01.2026 14:28 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

@sarajw Congrats, and see you there!

27.01.2026 14:11 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Original post on front-end.social

Also, as always, everything is written by my hand, months of research, etc.

…And I have a few more articles to write already. I hope I’ll manage to finish them faster, haha. But almost always, when you start writing an article, even if you think you know what your destination is, it moves. You […]

27.01.2026 13:06 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0
Original post on front-end.social

As usual, the credits!

- @fantasai for the www-style thread

- yisibl for opening the shrinkwrapping CSSWG issue.

- @vasilis, @argyleink, @simevidas, @leaverou, @mia, @5t3ph who, among others, contributed to this issue.

- @AmeliaBR for a helpful Tardis metaphor.

- @css for his article on […]

27.01.2026 11:22 πŸ‘ 1 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
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.

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]

27.01.2026 11:16 πŸ‘ 12 πŸ” 6 πŸ’¬ 1 πŸ“Œ 1

- [x] proofreading (likely, still errors and typos, but eh)
- [x] typography pass (same)
- [x] checking if all sidenotes are in the correct places (only at the default resolution lol)
- [ ] making fallback videos
- [ ] sleep
- [ ] probably finishing the fallback videos
- [ ] release?

26.01.2026 23:40 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

I lied: I added one more example. But not another sidenote. Unless you’d count the captions for the examples that look like sidenotes but are not numbered…

26.01.2026 21:50 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0
A crop of a screenshot of the gap between the main part of the article and a column with sidenotes, focusing on the number β€œ22.” near one of the sidenotes.

A crop of a screenshot of the gap between the main part of the article and a column with sidenotes, focusing on the number β€œ22.” near one of the sidenotes.

Sidenotes.

26.01.2026 20:05 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

5k more pixels of article’s height, and I think the text and examples are done… This evening, after work, will be spent by proofreading everything, making fallback videos for all examples, checking if everything works as I expect it… :blobcatreading:

26.01.2026 15:36 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0

I am not saying I came up with container queries without containers, but.

Ok, I need to finish that one article, then another, and only then, _maybe_, get to that one. But should I?

25.01.2026 19:47 πŸ‘ 0 πŸ” 0 πŸ’¬ 0 πŸ“Œ 0

Me: wtf, why doesn’t this element get its intrinsic dimensions right?

Also me: added inline-size containment to this element earlier.

25.01.2026 09:11 πŸ‘ 0 πŸ” 0 πŸ’¬ 1 πŸ“Œ 0