Articles & Experiments by Roman Komarov

Welcome! I’m Roman, a senior front-end engineer at Datadog, and a member of CSSWG. I love CSS, and most of the things I do, write, or think about are CSS-related. On this site, I collect my experiments and articles about it (and, occasionally, about some other topics).

All Articles

• Solving Shrinkwrap: New Experimental Technique

  January 27, 2026 with tags: #Anchor Positioning #Scroll Driven Animations #Future CSS #Experiment #CSS

  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-driven animations, we can adjust our element’s outer dimensions by measuring its inner contents, demonstrating that for many cases this can already work and might unlock a future native feature.

• Passing Data into SVG: Linked Parameters Workaround

  March 24, 2025 with tags: #CSS Variables #SVG #Experiment #CSS

  Twelve years ago, I started a draft for an article. I never published it: there were a few cross-browser issues, and the idea was raw and unpolished. I have many drafts like this in my archives. Sometimes, something new interacts with one of these older ideas and leads to something interesting. This article is about one such case: a hacky technique that allows us to pass some data from CSS to SVG and use it to adjust colors or almost anything else.

• Pure CSS Mixin for Displaying Values of Custom Properties

  January 27, 2025 with tags: #CSS Variables #CSS Counters #CSS Layers #Experiment #Practical #CSS

  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 property? Without any JS? In this article, I present a native CSS mixin that will output various values as pseudo-elements.

• Indirect Cyclic Conditions: Prototyping Parametrized CSS Mixins

  December 24, 2024 with tags: #CSS Variables #CSS Logic #CSS Layers #Experiment #Practical #CSS

  In my quest to push forward what is possible with custom properties in CSS, I discovered another application of cyclic dependencies. Combined with a prior technique based on custom cascade layers, we are now even closer to something that resembles native CSS mixins.

• Possible Future CSS: Tree-Counting Functions and Random Values

  October 22, 2024 with tags: #TreeCountingFunctions #RandomValues #Future CSS #Experiment #CSS

  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.

• Fit-to-Width Text: A New Technique

  July 19, 2024 with tags: #Experiment #Typography #Practical #Future CSS #CSS

  Registered custom properties are now available in all modern browsers. Using some pre-existing techniques based on them and complex container query length units, I solved a years-long problem of fitting text to the width of a container, hopefully paving the path towards a proper native implementation.

• Self-Modifying Variables: the inherit() Workaround

  April 18, 2024 with tags: #CSS Variables #Style Queries #CSS Logic #Future CSS #Experiment #CSS

  Style queries will unlock many doors. An ability to alternate a value of any variable that I presented in my previous article might seem to be trivial by itself, but what if there is a hidden depth in how we can utilize it? One interesting case is the ability to emulate inherit() — a way to access the previous state of a custom property.

• Alternating Style Queries

  April 16, 2024 with tags: #Style Queries #Future CSS #Experiment #CSS

  With the container style queries on the horizon, it is a good time to do more experiments with them. In one of my recent experiments, I found out that style queries will allow us to do what the currently specified (but not implemented by anyone) function toggle() was supposed to.

• Layered Toggles: Optional CSS Mixins

  April 9, 2024 with tags: #CSS Layers #CSS Variables #CSS Logic #Style Queries #Experiment #Practical #CSS

  In this article, I am sharing the next evolution of space & cyclic toggles, which allows us to create and apply optional mixins in CSS with the help of custom cascade layers, available today in every browser that supports them.

• The Shrinkwrap Problem: Possible Future Solutions

  December 7, 2023 with tags: #Anchor Positioning #Future CSS #CSS Round #Experiment #CSS

  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 least for a few cases. In this article, I’ll demonstrate how we can use anchor positioning to neatly decorate wrapping text or elements in flex or grid contexts.

• Scroll-Driven State Transfer

  October 16, 2023 with tags: #Scroll Driven Animations #Future CSS #CSS Variables #Experiment #Practical #CSS

  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.

• New Blog: blog.kizu.dev

  July 9, 2023 with tags: #Blog

  I did create a new work-in-progress blog where I would post random things. I wanted to create a more personal space for a while, and it would allow me to separate less polished posts from the elaborate articles on my main site.

• Position-Driven Styles

  June 28, 2023 with tags: #Scroll Driven Animations #Future CSS #CSS Variables #Experiment #Practical #CSS

  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. Styling flex and grid rows and columns, staggered animations, wrap detection, and more — all in my new article.

• Fit-to-Width Text

  June 21, 2023 with tags: #Scroll Driven Animations #Future CSS #Experiment #Typography #Practical #CSS

  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 exploring the experimental implementations of the latest specs.

• Cyclic Dependency Space Toggles

  June 14, 2023 with tags: #CSS Variables #CSS Logic #Style Queries #Experiment #Practical #CSS

  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 this article, I present you with the technique I recently discovered.

• Future CSS: Wishes Granted by Scroll-driven Animations

  May 30, 2023 with tags: #Scroll Driven Animations #Position Sticky #Future CSS #Experiment #CSS

  Stuck state for sticky headers? “Proper” solution for scrolling shadows? Highlighting the currently shown sections in a Table of Contents? All these things could become possible with the new scroll-driven animations spec. Today, I gather and explain some of my experiments with this new CSS feature.

• React Hook Component

  April 1, 2023 with tags: #Practical #Experiment #React #TypeScript

  After 16+ years of experimenting with CSS & HTML, I am a bit tired. Time flies, and new technologies emerge. What would you say if, from now on, I will start doing my wild experiments with, let’s say, React and Typescript instead? In my new article, I’ll show you how easy it is to have conditional hooks in React — and more!

• Future CSS: Anchor Positioning

  March 15, 2023 with tags: #Anchor Positioning #Future CSS #Experiment #CSS Variables #CSS

  Anchor positioning might be one of the most exciting features coming to CSS. It is currently available under an experimental flag in Chrome Canary, and after playing with it for a bit, I couldn’t stop myself from sharing what I found. In this article, I will show you some of my experiments.

• Obscure CSS: Restoring Visibility

  December 22, 2022 with tags: #Practical #CSS Variables #CSS

  One of the things I love about CSS is how some of the properties hide a lot of depth inside. For that reason, visibility was always one of my favorites. In this article, I will talk about one of its interesting aspects and will propose an idea: what if we would never use visibility: visible?

• Obscure CSS: Implicit List-Item Counter

  May 31, 2022 with tags: #Practical #CSS Counters #Typography #CSS

  A few years ago I wanted to share one little-known CSS feature — a built-in list-item counter for ordered lists. But then there were a few browser issues preventing us from using it fully. Now, given that most of those bugs are fixed, we can try starting using them for our lists.

• A Bit of Performance

  February 25, 2019 with tags: #Practical #Blog #Performance #JS #Fonts

  I was digging into some of the performance issues during my work for a few weeks, and I thought that it can be interesting to see how those could be applied to my site. I was already quite happy with how it performed (being just a small static site) but managed to find a few areas to improve.

• My Grid Layout

  January 23, 2019 with tags: #CSS Grids #Practical #CSS #Design

  My site’s design came through a lot of iterations, including the latest complete rewrite and a partial redesign, but its layout is something I used for a while. In this article, I’ll describe what I tried to achieve with it and how it was re-implemented using CSS Grids.

• Implementing Algolia Search

  November 6, 2018 with tags: #Practical #Blog #Meta #JS

  For a new site update I have implemented a site-wide search, and in this article, I would write about the solution I have used for this, as well as would talk about what had to be done and what issues are left.

• Grid Projection Naming

  October 18, 2018 with tags: #CSS Grids #Practical #CSS

  CSS Grids specification contains a lot of different things. And, for some of them, there exist multiple ways of how you can achieve them. In this article, I’ll write about one trick with grid-template-areas that could help you name your intersecting columns or rows.

• My Site, Version 14.0

  October 18, 2018 with tags: #Blog #Meta #CSS #Design

  A New version, new tools, new techniques, new everything — I had a lot of fun in rewriting and re-coding my site, and I think there could be some interesting stuff inside. In this post, you’ll find some words about it alongside a not-so-precise changelog.

• Variable Order

  February 15, 2018 with tags: #Experiment #CSS Variables #CSS #HTML

  Is it possible to sort some data using only HTML and CSS? The answer is “Yes”, and in this article you would see one experimental way to achieve this with CSS variables and an order property. Even if it is not practical and bad for accessibility, it is still fun.

• Counters and Stones

  January 4, 2018 with tags: #Experiment #CSS Logic #CSS Counters #CSS

  HTML&CSS-only gomoku game? Binary logic in CSS via counters? So many combinators, Edge stops to understand what is even going on? All of this and a bunch of other weird CSS stuff in the experiment that I started back in 2013.

• Flexible Overflow

  November 28, 2017 with tags: #Practical #CSS Flex #Responsive #CSS

  Flex display mode allows us to create a lot of interesting interactions. In this article I’ll show how to use it to implement a responsive block which could substitute one content with another, all based on which one would fit inside the container.

• Bemto-Components

  November 23, 2017 with tags: #Project #Practical #React #BEM

  Working within a React stack and using Styled Components, I found out that I still miss a lot of aspects of BEM. This lead to me starting a new side-project which not only allows to use BEM-style elements and modifiers, but also enhances the overall developer experience.

• Keyboard-Only Focus

  June 27, 2017 with tags: #Practical #Accessibility #Bugs #CSS #HTML

  After playing a lot with HTML & CSS, I present you with a very robust and practical solution to one of the most annoying problems: keyboard-only focus on interactive elements. All thanks to tabindex in HTML and almost to no CSS.

• Label-to-Input States

  May 31, 2017 with tags: #Experiment #HTML #CSS

  Sometimes there are very unusual mechanics hidden deep in the interactions of HTML and CSS. In this article I show one of those — the nuances of how HTML labels interact with inputs and CSS applied to them.

• Controlling the Specificity

  December 21, 2016 with tags: #CSS Specificity #Future CSS #CSS #