Roma Komarov

Inventing weird CSS things.

CSSWG Member (previously: an invited expert).

Frontend engineer working on Datadog's design system.

Ask me about: #CSS, #Frontend, #DesignSystems

Located in France. He/him.

Public Key

npub1r6ju958fxhaelfm9ze5gl039zhtywp8wjwkr406pnzc45yjnwmnq6m40lw

NIP-05 Address

kizu@front--end-social.mostr.pub

Profile Code

nprofile1qqspafwz6r5nt7ul5aj3v6y0hcj3t4j8qnhf8tp6haqe3v26zffhdespzemhxue69uhhyetvv9ujumn0wd68ytnzv9hxgufw9am

Publishing to

relay.nostr.band

Author Public Key

npub1r6ju958fxhaelfm9ze5gl039zhtywp8wjwkr406pnzc45yjnwmnq6m40lw

Show more details

Last Notes

2025-06-10 17:16:11

The `prefers-reduced-transparency` is a nice media feature in CSS, time to start using it more.

2025-06-03 14:49:17

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 interesting in their current prototype implementations.
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.

2025-04-01 14:47:17

Not a joke: CSSWG has resolved to start working on fit-to-width text in css-fonts-5!
https://github.com/w3c/csswg-drafts/issues/2528#issuecomment-2769621512
#CSS #Typography

2025-03-29 22:06:06

- reply

@nprofile…xq7g Random semi-related memory unlocked: a completely unbounded password prompt on some PC when I was in school, where it accepted key presses for arrow buttons. Of course, only the CLI prompt where you created the password accepted them, but not the place where you had to enter it later, meaning I locked myself out right away.

2025-02-20 08:42:07

Ok, but imagine native polar coordinates flow in #CSS?
The flow starts from the center. We have something like an “origin” angle, from which each element starts in the inline direction (going around the circle), which can be set on the parent, but overridden on the children.
Block direction goes outwards.
Outside its flow, the polar container is sized by all its content, so adding stuff can move its center down.
Etc.

2025-02-17 11:01:39

Do you think `var(--foo)` is too verbose in #CSS?
With custom functions, you could do
@function --foo() {
result: var(--foo);
}
And then call `--foo()` instead, saving you 3 precious symbols.
(I'm sorry)

2025-02-07 23:34:33

- reply

@nprofile…383v Could be fun to make the 12th one, but with the ladder moving as well, so the ball always stays in the frame :)

2025-01-20 19:07:54

- reply

@nprofile…kgua Small note: your post says it is in French, so people who did set up their clients to not show languages they do not understand might not see this one as well (although, I am not sure how this works when boosting? but still, for a better reach it would be better for the post's language to match the content)

2025-01-16 18:58:55

- reply

@nprofile…383v you think very highly of them. It will be `<div c=white bg=black d=flex h=200px m=2em p=40px>`

2025-01-09 13:08:33

- reply

@nprofile…383v It was a lot! Not having animations, flex, grid, gradients, border-radius, custom properties, media queries… and then on top of this much more prominent interop issues with IE etc :D

2025-01-09 12:39:27

- reply

@nprofile…383v I remember hacking this with transitions when we had them in browsers, but did _not_ have animations just yet :D We had to have some user input to actually trigger it, as we did not have starting-style, but yeah, it was fun doing complex animations with just transitions, orchestrating multiple of them on different elements through delays.

2025-01-07 09:51:11

While it does not change anything really, it is fun that #CSS is Turing complete.
There were many ways it was already it (which usually required user input, either via button presses, or via mouse hover, like in @nprofile…44rr's https://dev.to/janeori/expert-css-the-cpu-hack-4ddj), but with scroll-driven animations even that won't be necessary, as we could just lift any state up (and we even have a very convenient way to store states with scroll-snap like in https://johannesodland.github.io/2023/06/18/scroll-persisted-state.html by @nprofile…6vnm).

2024-12-18 22:20:12

- reply

@nprofile…383v @nprofile…nkhr This, plus when we will get an ability to dynamically create idents (resolved today! https://github.com/w3c/csswg-drafts/issues/9141), we could use a single custom property/attr() to get the “seed” for all inner anchors of some element without scoping, and then just by using this one ident get any of the inner parts from outside.

2024-11-26 22:30:55

- reply

@nprofile…5zlq Seems pretty stable

2024-11-19 22:29:53

New blog post: “Recent CSS Bookmarks 20: Just Three Links”
https://blog.kizu.dev/recent-css-bookmarks-020/
Writing one post a day is hard! I had an idea for an observation but did not have an opportunity to write it up properly. Come on, me, these should not take that long!
That means I am falling back to the idea I reserved for cases like this one: where I cannot quickly come up with a post on the spot. That is: share just a few recent bookmarks!

2024-11-16 22:44:39

New blog post: “The Problem of Embeddable Interactions”
https://blog.kizu.dev/embedded-interactions/
When I created my blog, I implemented the same thing I did on my main site: a custom element that links to the #Mastodon post where I shared the link to the post, and which also shows the number of replies, favorites, and boosts.
I saw others implement this as well. Now, people are also adding the same for reactions on bluesky as well.
I won’t do it.

2024-11-14 22:59:25

New blog post: “A good way to hide non-defined custom elements”
https://blog.kizu.dev/non-defined-custom-elements/
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.
#CustomElements #CSS

2024-11-09 22:21:59

New blog post: “My Mastodon Starter Pack”
https://blog.kizu.dev/my-mastodon-starter-pack/
Sometimes, I invite someone to join #Mastodon, and I end up sharing the same links and information repeatedly.
Following the “manual until it hurts” #IndieWeb practice, after repeating the same things a few times, it is time to “automate” it. Well, in this case, just put everything into one blog post, I guess.

2024-11-04 08:35:23

- reply

@npub16mu…qy4m @npub1xpy…yjva Should be there soon-ish: the change is already in Firefox Nightly, and in the most recent Safari Technology Preview.

2024-11-04 08:29:52

- reply

@npub16mu…qy4m @npub1xpy…yjva In this case, the speed is a good thing: the sooner there is a change, the smaller is the impact. Less chance someone will write new code relying on the old behavior.

2024-11-04 08:24:45

- reply

@npub16mu…qy4m @npub1xpy…yjva Yep, a recent change. Issue: https://github.com/w3c/csswg-drafts/issues/10544, resolved in July, but still has a “Needs edits” label, so the specs might not be up-to-date about it yet.

2024-10-31 10:04:08

Here, I solved it:
display: masonry-grid;

2024-10-22 08:17:36

I wrote a new article: “Possible Future CSS: Tree-Counting Functions and Random Values”
https://kizu.dev/tree-counting-and-random/
Many exciting things were added to #CSS specs over the years, but some have yet to be implemented by browser engines.
In this article, I spotlight two features from Level 5 of the CSS Values and Units Working Draft, describe how we can prototype them with what we have in CSS today, and provide several interactive demos of their use cases.
https://cdn.masto.host/frontendsocial/media_attachments/files/113/349/926/182/002/228/original/316a27ec50bfaa5e.mp4

2024-09-27 21:53:42

- reply

@npub16mu…qy4m Yep, it is also based on actual events for me :D

2024-09-27 20:59:56

That feeling when you just use `--x` keyframes to change a `--x` custom property for a `--x` scoped timeline from an anchor named `--x`, while debugging its value via a `--x` counter.

2024-09-20 22:46:49

I wish I were good* at design.
* I can do something tolerable if I iterate on it over the years, but I can never come up with anything interesting on the spot, or come up with good examples for the use cases.

2024-09-18 19:42:13

If no one else would submit `::first-letter` and `initial-letter` to #Interop2025, I will.

2024-09-18 19:42:13

If no one else would submit `::first-letter` and `initial-letter` to #Interop2025, I will.

2024-09-12 09:19:42

- reply

@npub19lt…qfjk it is probably possible to aperiodically tile some finite number of elements, but not do a proper pattern, as it requires recursively adding new tiles and choosing their positions.

2024-09-01 22:30:00

BTW, I still think that we should be able to freely (as in `<length>`) define the size of the scrollbars (as well as disable the overlay ones freely).
And it _must_ be normative, reserving the corresponding space. If the system cannot draw such a scrollbar, it should be free to draw the closest (rounded down?) to the dimension chosen by the author, but the space reserved should be static as defined.
Or else.

2024-09-01 14:02:30

Whenever I see arguments against `cursor: pointer` on the buttons that say that the OS does not change a cursor for the buttons, I want to remind people what these “modern” OSes do to scrollbars (removing buttons, making them overlays, completely hiding sometimes).
When was the last time an OS innovated the UI&UX? A closed system is not something to look at in the search for good patterns.

2024-08-29 13:21:16

My new post: “Querying the Color Scheme”.
https://blog.kizu.dev/querying-the-color-scheme/
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.

2024-08-24 16:09:04

- reply

@npub13q3…hr6l Yeah. Quick attempt at this: https://codepen.io/kizu/pen/bGPMmLq — with custom markers and subgrids :D And an @supports fallback, though noticed that Safari does not like the svg background for some reason.

2024-08-12 08:57:54

- reply

@npub13q3…hr6l 100%, throwing the baby out with the bathwater. For all these things thrown out, both the authors and the users need to have some generalized way to opt back in.

2024-07-31 13:09:11

- reply

@npub16mu…qy4m Note: it is possible to get the width of the scrollbars in a much more simple and cross-browser way via container queries: https://github.com/w3c/csswg-drafts/issues/4691#issuecomment-1715388016

2024-07-31 13:05:35

What are your most wanted #CSS features that are already in the specs, but no browser cares to implement or at least prototype them?
I have too many of these, but the most recent things I wanted are the division with units like `calc(1em / 1px)`, custom properties in container queries, and `attr()` with ` <attr-type>`.

2024-07-21 10:32:10

Do you have any unsolved #CSS problems that you want to be eventually solved?
And what do you think is impossible, and we probably will never get?

2024-07-19 17:09:56

- reply

@npub16mu…qy4m https://kizu.dev/fit-to-width/ — I wonder how far off your idea is! :D

2024-07-19 07:22:27

Sometimes I wake up with an idea for an experiment, and sometimes I get some ideas when I go to bed.
Yesterday I just couldn't sleep because of it, so had to rush back to my setup from the bed, and test it.
It worked. An article incoming.

2024-06-19 10:16:41

New post: “Custom Properties and CSS-Wide Keywords”.
https://blog.kizu.dev/variables-and-css-wide-keywords/
I did some tests with custom properties in #CSS, and how they work (or don’t) with the CSS-Wide Keywords (`initial`, `inherit`, `unset`, `revert` and `revert-layer`).
As the result, I did create a PR adding a few Web Platform Tests, and opened two bugs in Safari and Firefox.

2024-06-18 12:04:56

A question for fellow #typography enthusiasts: let's say we want to have oldstyle numerals and small caps for abbreviations.
What do we do when either of those appears at the beginning of a sentence?
Do we make the first letter/digit “uppercase” by making it use the regular style, or do we undo those styles for the whole number/abbreviation?

2024-06-09 14:16:02

Can someone remind me why we don't have block-size containment?

2024-05-29 21:54:02

- reply

@npub16mu…qy4m Nope, page up + page down on the keyboard for the vertical movement :) Can do keyboard + trackpad in 4s when not using the trackpad for pre-positioning.

2024-05-29 21:32:55

- reply

@npub16mu…qy4m 5s. It needs to have a more precise timer :)
https://cdn.masto.host/frontendsocial/media_attachments/files/112/526/511/273/982/102/original/212b048c0e2beec6.mp4

2024-05-16 22:02:05

We really need to gather various #typography related #CSS properties that are scattered across different browsers without full support (or with just partial support) and make it into an #interop2025 focus area.
Like `ascent-override` (please, Safari!)
Or `font-size-adjust` (come on, Chrome!)
Or… `initial-letter` (hey, Firefox!), though, there are also so many `::first-letter` issues!
Or `text-box-trim` & `text-box-edge` (ok, these are only there in Safari TP)
And so on, and so forth.

2024-05-10 15:53:49

I really don't like the JS API of the view transitions, with the necessity to _wrap_ all the actions in the `startTransition`, rather than having an ability to manually mark the “before” and “after” points. Like, why don't we have an `endTransition` or something similar?

2024-05-09 13:03:52

Let's say I want to have a web component.
Whenever I use it, I would like to provide a custom callback to run in its context, defining it in HTML.
Is there an idiomatic way to do so? The way I'm thinking of is to use `currentScript`:
<my-element>
<script> document.currentScript.myCallback = () => console.log('Hey!');</script>
</my-element>
And then call this `myCallback` from inside the `connectedCallback`.
Is there anything better (apart from using a unique `id` for this)?

2024-03-15 16:27:49

- reply

@npub13q3…hr6l “Proposals & Standards”?
I, personally, don't think of “proposals” as of something that did not go through, more as a starting point on the timeline.
Also, how important is catering for the non-web folks, especially for a two-word name? Just “Web Standards” might be good enough, especially when the page itself describes things in more details.

2024-02-14 22:14:32

- reply

@npub13q3…hr6l Congrats!
Not sure how I missed the `clamp()` one! No more hacks with infinity :D https://blog.kizu.dev/clamp-to-infinity/
(I'll need to update the post and mention that issue & spec update)

2024-02-03 13:21:15

I'm using Firefox for almost 3 months now, and I did not encounter any serious (blocking) compat issues on sites requiring me to switch the browser to something else.

2024-01-07 10:38:32

New post: “Notes on Using Logical Properties and Values”
https://blog.kizu.dev/logical-props/
@npub14dn…25dq asked today: “is it time to forget about physical properties like margin-top and left?”
I have some thoughts occasionally on this, and decided to write them down as a list: maybe I’ll update it later with other related things, we’ll see.
At the bottom of this post, I’ll also list several useful resources — don’t forget to check them out!
#CSS

2024-01-05 16:30:20

- reply

@npub19kd…4jdw Button, button, button, button, button
Argh! Div, a div!
Div! A div, oooh its a div!

2024-01-04 11:35:33

- reply

@npub19lt…qfjk Something might be said about cheap open worlds built by corporations overworking the developers & “free” mobile games built on copycatting and the exploitation of dark patterns vs. a one-off indie game made by four people.
Though, I really dislike the “price per hour” arguments for almost anything. Different genres are different, the developers' circumstances are different. If someone values their money that much, it is also always possible to find out how long something is on average.

2023-12-21 12:34:49

- reply

@npub1zyl…t54n @npub1nuj…9wkn Managed to reproduce: it is the `main.index article:hover` that sets `color: var(--detail-color)`, with the `--detail-color` seemingly randomly generated on page load?
https://cdn.masto.host/frontendsocial/media_attachments/files/111/618/413/680/741/136/original/69bd0cc31520d473.png

2023-12-02 21:58:51

- reply

@npub1zyl…t54n It was mostly intended as a joke, but if you did try it, and it didn't work out — understandable! (also, regardless, I don't think having all 24 for all the days is required for such a calendar)

2023-12-02 21:28:41

- reply

@npub1zyl…t54n
> 20 hour delay
Idea for the next year: an advent calendar of advent calendars: there appears to be almost enough to share one per day!

2023-11-28 18:25:03

- reply

@npub1xed…yg9w I just had to, for science, look up if you can add a doctype via js.
You can:
document.prepend(document.implementation.createDocumentType('html', '', ''))
Not sure what to do with this knowledge now.

2023-11-20 19:15:59

- reply

@npub1zyl…t54n Huh, with the links it is weird: looked into the source, it looks like they have an unaccounted for closing div which closes the `.content` part, making the rest of content to not have the underline on links.
The issue, I guess, is that they thought it was ok to remove the underlines from everything outside the content, and promising the captions but not providing them is not a good thing, yes.

2023-11-20 19:04:22

- reply

@npub1zyl…t54n (just checked — it seems there are now underlines, and a video transcript)

2023-11-17 19:49:28

New post: “Observation: Snappy Scroll-Start”.
https://blog.kizu.dev/snappy-scroll-start/
Two days ago, I published my previous observation: “Range Input’s Thumb and Emerging CSS”, where I promised to share another observation later.
Here it is! In it, I would share how we can work around the absence of the `scroll-start` property in #CSS.

2023-11-02 12:51:49

Twilight DOM

2023-10-16 17:54:31

In my fourth article about scroll-driven animations, I explore how we can transfer the state of one element to a completely different place on a page by connecting them with a unique identifier in #CSS via a timeline-scope.
“Scroll-Driven State Transfer”
https://kizu.dev/scroll-driven-state-transfer/

2023-10-15 15:59:31

- reply

@npub13q3…hr6l The #CSSDay hashtag here on Mastodon was active enough.

2023-10-10 21:31:50

- reply

@npub13q3…hr6l Actually, looking into it, it seems that there are at least parsing tests that involve none, a lot of them: https://wpt.fyi/results/css/css-color/parsing/color-valid-color-mix-function.html?label=master&label=experimental&aligned&q=color-mix%20none
But it seems rather hard to work with the history of such tests that contain a lot of subtests, as there is no way to narrow down the list to a certain subset, or easily see the history of a particular subtest.

2023-10-10 21:01:24

- reply

@npub13q3…hr6l
Quick testing with browserstack: all oldest versions of browsers mentioned on CanIUse as supporting `color-mix` (exception: browserstack does not support Safari 16.2, so can test only from 16.5) render your CodePen as expected, so it seems that all the browsers do indeed support the `none` in the `color-mix` for quite a while.
https://cdn.masto.host/frontendsocial/media_attachments/files/111/212/705/513/003/556/original/6dd7130299f3c13c.png
https://cdn.masto.host/frontendsocial/media_attachments/files/111/212/709/039/737/663/original/00fda875493efa9c.png
https://cdn.masto.host/frontendsocial/media_attachments/files/111/212/714/299/364/336/original/c6644bebdf0d818d.png

2023-10-10 20:51:08

- reply

@npub13q3…hr6l I'll first need to learn how to do it properly, then would gladly do it, haha. I did start reading about how everything is set up with them recently, but did not have time to properly sit and dig deeper into it.

2023-10-10 20:43:59

- reply

@npub13q3…hr6l Needs more research for sure, but as it works in at least the latest Safari, Chrome and Firefox, it means that with each day we can be more and more sure to use it — the feature is there.
A bit sad that there seems to be no WPT tests that could show the progress though, but if someone has access to something like browserstack, they would be able to check the support rather easily.

2023-10-09 07:55:42

- reply

@npub13q3…hr6l Oooh, this is very nice! Given the `color-mix` is supported in all major browsers since this May, this can be already very useful in places where graceful degradation is acceptable!

2023-10-04 16:17:42

I highly recommend going and 👍 this #interop2024 issue by @npub183l…erjd — https://github.com/web-platform-tests/interop/issues/513
The ability to remove units when doing calculations in #CSS will be invaluable and has been present in the specs for quite some time, but no browser has implemented it yet.
I stumble upon its absence all the time, and the addition of this to CSS will unlock _so many things_!

2023-10-04 14:08:22

I just bought a ticket to #BorderNone in Nuremberg (https://border-none.net/2023/). While it is not a #CSS conference, at least its name is valid CSS, which is always a plus.
Also thinking of maybe trying #IndieWebCamp afterwards? Would it be too much of socializing for me? We'll see!
If you'll be there — say hi :)

2023-10-02 21:28:02

- reply

@npub1c35…9pmh *throws `display: inline` at Eric*

2023-10-02 21:28:02

- reply

@npub1c35…9pmh *throws `display: inline` at Eric*

2023-09-09 11:59:22

There should be more podcasts about CSS.

2023-06-14 09:02:35

Over the past few years, I wanted to be able to select a value from a list in #CSS by toggling a single custom property.
We have the “space toggle” for booleans, and hopefully, one day, we’ll get style queries, but what about today?
In my new article — “Cyclic Dependency Space Toggles” I present you with the technique I recently discovered.
I can't wait to see what you would do with it!
https://kizu.dev/cyclic-toggles/
https://cdn.masto.host/frontendsocial/media_attachments/files/110/541/711/000/541/021/original/6e0f3c5c294cf888.jpg

2023-06-08 22:36:19

To go sleep before the next day of #CSSDay, or… play with `text-wrap: pretty`?
Quick findings :
1. It is basically preventing the orphan word (the lonely word in the end) by moving an additional word alongside it.
2. The actual algorithm seems to take into account the length of the word & seemingly how the last two lines are composed.
3. There is no line limit compared to `balance`.
4. It only does this to the final lines: cases in the middle with a lonely word are not handled.
/cc @npub16ce…rq62

2023-05-26 16:44:31

- reply

@npub19lt…qfjk As others mentioned — a grid should work the best. But there are nuances :)
https://codepen.io/kizu/pen/rNqbVEW?editors=1100
Some notes:
1. If we'd apply the grid to the wrapper element, we need to set the role explicitly, otherwise some browsers could ignore the role (tested in VO in Safari and Chrome).
2. It is better to keep the dots, which could be visually hidden, otherwise screen-readers could read the first part until the “?” as one sentence.