Articles & Experiments by Roman Komarov

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.

Twelve years ago, I started a draft for an article.

Do you write CSS?

In my quest to push forward what is possible with custom properties in CSS, I discovered another application of cyclic dependencies.

Many exciting things were added to CSS specs over the years, but some have yet to be implemented by browser engines.

Registered custom properties are now available in all modern browsers.

Style queries will unlock many doors.

With the container style queries on the horizon, it is a good time to do more experiments with them.

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.

There is one old, yet unsolved, CSS problem: shrinking containers to fit the content when it automatically wraps.

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.

I did create a new work-in-progress blog where I would post random things.

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?

What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters?

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.

Stuck state for sticky headers?

After 16+ years of experimenting with CSS & HTML, I am a bit tired.

Anchor positioning might be one of the most exciting features coming to CSS.

One of the things I love about CSS is how some of the properties hide a lot of depth inside.

A few years ago I wanted to share one little-known CSS feature — a built-in `list-item` counter for ordered lists.

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.

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.

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.

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.

CSS Grids specification contains a lot of different things.

Is it possible to sort some data using only HTML and CSS?

HTML&CSS-only gomoku game?

Flex display mode allows us to create a lot of interesting interactions.

Working within a React stack and using Styled Components, I found out that I still miss a lot of aspects of BEM.

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.

Sometimes there are very unusual mechanics hidden deep in the interactions of HTML and CSS.

Specificity is one of the most unique and complex aspects of CSS.

CSS variables are very powerful, and they allow to do a lot of interesting things.

When I was working on my site’s new version, I tried to think more about how everything should look and read typography-wise.

Around one and a half month ago, on June, 23rdGo to a sidenote, I published a new version of my site.

The problem HTML specification has a lot of different restrictions.

The best solution for inline blocks were, well, inline-blocks.

Not so long ago I became a maintainerGo to a sidenote for Stylus CSS preprocessor.

Not that long ago Jekyll become that big — version “1.0” was released.

Here is one workflow thing I use all the time and I want to share — using keyboard shortcuts to switch between applications.

Hello!

Once I already shared this solution on the birdsite, but this time I’m going to write a bit more on it.

While I’m struggling to write a lengthy article, here is a small one, on a little Jekyll trick I use.

In a post on site relaunch I told I’ll write a lot of articles on Jekyll.

Every active element must have a set cursor on hover.

Hi there!

Oh hi.

One day in the last December, I tried to find out what we can do with the legend element.

Here’s an old idea, but recreated with pure CSS.

Try to hover this block from different directions /* Multi-directional hover by @kizmarh */ .b-block { position: relative; display: inline-block; overflow: hidden; width: 10em; height: 10em; vertical-align: middle; -webkit-transform: translateZ(0); } /* T…