Roma Komarov
LightNews LightNews
banner
kizu.front-end.social.ap.brid.gy
Roma Komarov
@kizu.front-end.social.ap.brid.gy
59 followers 8 following 360 posts
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
Posts Replies Media Videos
kizu.front-end.social.ap.brid.gy
New blog post: “Border: 2px double”.

https://blog.kizu.dev/border-2px-double/

I wanted to write a different post today, but did not have time to finish it, oops.

So let me tell you one pretty useless but fun #css fact.
A screenshot of three figures showing a rendering of a square for Chrome, Firefox, and Safari. Chrome renders it as two solid lines with transparent space between them. Firefox is similar, but it fills the space between lines with gray color. Safari renders it as one solid thick line, but with grey artifacts in corners.
November 26, 2025 at 10:26 PM
kizu.front-end.social.ap.brid.gy
New blog post: “Photo Walk, April”.

https://blog.kizu.dev/walk-april-2025/

I am back with reposting some of my old photos from my Pixelfed, but now in my blog.
A close-up photo of a bundle of pink flowers on a branch (likely, cherry blossom). Some of their features and curves are in focus, but the background is highly blurred.
November 23, 2025 at 8:09 PM
kizu.front-end.social.ap.brid.gy
CSSWG out of context
A screenshot of a GitHub projects board, showing a “Quick Masonry issues” header with a “Masonry Switch Syntax” below.
November 12, 2025 at 5:41 AM
kizu.front-end.social.ap.brid.gy
New blog post: “Uneven Inline Paddings”

https://blog.kizu.dev/uneven-inline-paddings/

Today, I want to share one tiny design tweak you can do to your content styles. I have used it in my blog’s design for a while, and recently decided to improve it a bit […]

[Original post on front-end.social]
November 10, 2025 at 2:33 PM
kizu.front-end.social.ap.brid.gy
That feeling when
A screenshot of a crop from eight lines of CSS containing a bunch of calculations involving sine and cosine with numerous custom properties.
August 17, 2025 at 5:23 PM
kizu.front-end.social.ap.brid.gy
Thinking about typography
A photo of a pile of five books of different sizes. The top one is “Type Tricks. Layout design” by Sophie Beier, below it is “Thinking with Type” by Ellen Lupton, below is “Universal Principles of Typography” by Elliot Jay Stocks, below is “Layout Essentials” by Beth Tondreau, and the last one is “Typography Essentials” by Ina Saltz.
July 11, 2025 at 11:01 AM
kizu.front-end.social.ap.brid.gy
You'd think this is a joke, but
A screenshot of GitHub's UI showing a code search input with "<div class=\"inline\"" (content of search in double quotes, with double quotes around the inline class escaped with backslashes), and a part of its filters showing “76.8k” results in the Code tab. A screenshot of GitHub's UI showing a code search input with "<div class='inline'" (content of search in double quotes, with single quotes around the inline class) and a part of its filters showing “112k” results in the Code tab.
May 28, 2025 at 7:37 PM
kizu.front-end.social.ap.brid.gy
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]
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.
March 24, 2025 at 4:42 PM
kizu.front-end.social.ap.brid.gy
Firefox Nightly, 137.0a1 (2025-02-08) → about:config → set `layout.css.style-queries.enabled` to `true` → many demos of #css container style queries start working! :blobcatlove:

For example, all the demos from my […]

[Original post on front-end.social]
A screenshot showing a `layout.css.style-queries.enabled` field with the value `true`. Above it, a search field with “css.sty” in it.
February 8, 2025 at 8:48 PM
kizu.front-end.social.ap.brid.gy
I'm sorry, how much memory my Firefox with 5 tabs open is using?
A screenshot of a Mac OS “Force Quit Applications” alert with a “Your system has run out of application memory.” title and “To avoid problems with your computer, quit any applications you are not using.” paragraph. It is showing a “Firefox Nightly” line with a “77,37 GB” near it.
February 5, 2025 at 3:26 PM
kizu.front-end.social.ap.brid.gy
Grass was greener etc., but both can be true: we were more naive, and the grass was green. It is interesting to go back in memory and analyze things, dissecting the nature of your memories and trying to fish for the good that there was.

Pictured: me, ~20.5 […]

[Original post on front-end.social]
A photo of a young man with long hair, sitting on a green grass with green trees in the background. He wears a green turtleneck, suede sneakers, and a green-orange hairband out of beads. He sits without glasses, looking at the sky with a slight smile.
February 3, 2025 at 11:42 PM
kizu.front-end.social.ap.brid.gy
https://bugzilla.mozilla.org/show_bug.cgi?id=1945342 :blob_cat_aww:
A screenshot of the top-left corner of Mozilla Bugzilla, showing a header of a newly open Bug 1945342, opened 2 hours ago and updated 10 minutes ago. The title says: “Prototype style() queries.”
February 1, 2025 at 11:55 PM
kizu.front-end.social.ap.brid.gy
!!!
A screenshot from GitHub showing the following comment from css-meeting-bot, posted “now”: The CSS Working Group just discussed [css-multicol] Overflow in the block direction for continuous media, and agreed to the following: RESOLVED: start specifying column-height Below is a collapsed details tag with the “The full IRC log of that discussion” summary element. Below, is a “Tada” confetti emoji reaction from the person who made the screenshot.
January 30, 2025 at 11:35 PM
kizu.front-end.social.ap.brid.gy
border-shape: bloop (featuring `--radius-blob`s from @argyleink's open props)
https://codepen.io/kizu/pen/mybvzxJ

Did not remember how border-radius interacts with overflow, and there is a significant difference between Chrome+Safari vs Firefox.
January 29, 2025 at 6:38 PM
kizu.front-end.social.ap.brid.gy
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]
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.
January 27, 2025 at 10:34 AM
kizu.front-end.social.ap.brid.gy
@Jbasoo Mastodon now has exclusive lists: when the option “Hide these posts from home” is set, the main timeline won't contain the posts from people in that list. I have an “Overflow” list that I sometimes add someone if I feel that I don't want to unfollow […]

[Original post on front-end.social]
A screenshot of the Mastodon UI: on top is a left-pointing arrow with a title “Overflow”. Below, two buttons: “Edit list” and “Delete list”. Below, a toggle switch turned on with the label “Hide these posts from home”.
January 9, 2025 at 11:08 AM
kizu.front-end.social.ap.brid.gy
@argyleink I used it for many examples in this article: https://kizu.dev/tree-counting-and-random/ — and wrote an article about this back in 2017 :D https://kizu.dev/label-to-input/

One of my favorite obscure HTML&CSS interactions.
January 6, 2025 at 6:03 PM
kizu.front-end.social.ap.brid.gy
@nicolaschevobbe BTW, a tiny bug report: when there is not enough vertical space, it does not overflow well :D
A Firefox devtools screenshot of the bottom of the tooltip, showing the content spilling out of it.
December 25, 2024 at 3:37 PM
kizu.front-end.social.ap.brid.gy
That feeling when you just play with colors (nerd sniped by @leaverou)

https://codepen.io/kizu/pen/azowXwm
A screenshot of a Firefox devtools for a `background` property which has a `rgb(var(--rgb))` value (visible as pink). The tooltip is shown for the `--rgb` custom property, showing the `var(--r3), var(--g3), var(--b3)` on top, and then a very long computed value taking the rest of the screen.
December 25, 2024 at 3:09 PM
kizu.front-end.social.ap.brid.gy
I wrote a new article: “Indirect Cyclic Conditions: Prototyping Parametrized CSS Mixins”

https://kizu.dev/indirect-cyclic-conditions/

In my quest to push forward what is possible with custom properties in #css, I discovered another application of cyclic […]

[Original post on front-end.social]
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.
December 24, 2024 at 6:30 PM