Recent content in 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. 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. Read…
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…
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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! Read the full article on kizu.dev
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. Read the full article on kizu.dev
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`? Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
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. Read the full article on kizu.dev
Specificity is one of the most unique and complex aspects of CSS. And right now, the only way to control it are to add stuff to it. But what if we could have a way to reduce the specificity? I’ll look into the coming-up features of `: not ()` and how they could help us to achieve this. Read the full article on kizu.dev
CSS variables are very powerful, and they allow to do a lot of interesting things. But there are no native conditionals that we could use in CSS with them. In this article I’ll talk about one of the ways we can fake such conditions with calculations. Read the full article on kizu.dev
When I was working on my site’s new version, I tried to think more about how everything should look and read typography-wise. And one of the things I always had problems with was how to style inline code blocks. Most of the time we can see small colorful rectangles in place of them. And the more you put those things inside your text, the worse the reading experience becomes. This example is…
Around one and a half month ago, on June, 23rdGo to a sidenote, I published a new version of my site. Once again. It is rather hard to remember which version number it should be now. If we’d count it from the very start, from the times when I didn’t know how to markup pages properly, this would be the thirteenth version. Or something around that. Of course, that is if we won’t…
The problem HTML specification has a lot of different restrictions. And I have my doubts about the feasibility of many of those. One example which I stumble upon rather often — nested links. Spec straightly forbids such nesting: The a element […] Content model: transparent, but there must be no interactive content descendant. And if you’d do this, browser’s parser won’t understand you and, as soon…
The best solution for inline blocks were, well, inline-blocks. I used to like them because you could solve a lot of tasks with them. But they’re not ideal. They’re not capable of doing baseline vertical aligning right. And the problems come straight from the specs, just read the last two paragraphs to see the problems: “The baseline of an inline-block is the baseline of its last line…
Not so long ago I became a maintainerGo to a sidenote for Stylus CSS preprocessor. At the end of the last week, we released a new version — 0.41.0 — where we added some new features. And in the two earlier releases we added support for the hashes and polished it, so after all this work it is now possible to do a lot of interesting new things. In this article, I’ll explain one new techGo to a…
Not that long ago Jekyll become that big — version “1.0” was released. There are a lot of stuff in the changelog: there are new features, there are a lot of fixes. You can read what’s the most important in this article. I moved my site to this version. Well, not actually moved — everything worked anyway, but there were some stuff in a new version that I could use to make things in a better…
Here is one workflow thing I use all the time and I want to share — using keyboard shortcuts to switch between applications. I’m talking not about those system shortcuts — cmd+tab/alt+tab. They are awful — because they are modal. You can’t tell at any given time what would be the result of using such shortcut: those shortcuts switch focus between the recent used apps, so you need to remember which…
Hello! As I wrote in a post on the relaunch of my site, the main goal for the new version was to ease the process of adding new entries. However, beyond the technical side I completely forgot about what exactly I wanted to write in that easy and simple way. Until today everything I published on my site could be divided to two categories: “issues” and “experiments”. In “issues” I tried to publish…
Once I already shared this solution on the birdsite, but this time I’m going to write a bit more on it. The task is to get the text rotated by 90 degrees. The problem: it’s widely known that when you use transform, the block behaves similar to the position:relative — its place in the flow is not changed after the transformation, so the change is only visual. However, rather often you’ll need to…
While I’m struggling to write a lengthy article, here is a small one, on a little Jekyll trick I use. In Jekyll you need to use YAML front matter to add any metadata to the post or page. Actually, Jekyll “sees” only those files that have the YAML front matter, so it is a somewhat important thing. Most of the time this front matter would look like this: --- layout: docs title: Resources…
In a post on site relaunch I told I’ll write a lot of articles on Jekyll. That’s the first post in the series, an introduction. I won’t write on how to install Jekyll, how the files are structured there, and so on — there are already a lot of articles on that (look for some at the “links”). To describe Jekyll briefly, it’s a blog-aware static site generator. An awesome one. Read the full article…
Every active element must have a set cursor on hover. And it should be cursor:pointer in most cases. By active elements I mean links, buttons, selects, labels with checkboxes and radio buttons, and other similar elements. Those elements should be treated as “active” when clicking on such element results in any action. Thereby a menu item for the current page, checked radio button or disabled…
Hi there! That was a long way and I think I’m somewhere near the end — I’m relaunching my site. I can’t remember how many versions of it were there when it was entirely in Russian, but that would be the second version of my site in English. Oh, did I say I’m near the end? I lied. You know what is the main feature of this version? It’s rough. It’s terribly, awfully draft, it’s broken and…
Oh hi. I created this thing — bemto — some mixins for Jade that makes it easy and fun to write the code in BEM notation. I really love writing code in bem style and really like Jade, so I though that adding some bem to Jade would be a great little thing that at least I would use a lot. And I hope that it would be helpful to someone else too. Read the full article on kizu.dev
One day in the last December, I tried to find out what we can do with the legend element. I wanted to move it in the fieldset’s frame, and didn’t want to style it out ’cause the fieldsets with legend have this special behavior: the fieldset’s border gets the gap for the legend to fit in. So, I made some tricks to emulate different behaviors: move the legend to the right, center or even make…
Here’s an old idea, but recreated with pure CSS. Originally, I had an extra wrapper and two extra pseudo-elements on it. Later I decided to rewrite the code and to use just a single element (by using radial gradients). While this method is simple, there are some limitations: the background must be solidGo to a sidenote there are some positioning issues Side note: However, if you’d try…
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); } /* The blocks that would be hovered */ .b-block__hoverer { position: absolute; z-index: 1; width: 71%; height: 71%; transform: rotate(45deg); } /*…