Elektrine lite

← Feed

Roma Komarov

kizu@front-end.social

<p>Inventing weird CSS things. </p><p>CSSWG Member (previously: an invited expert).</p><p>Frontend engineer working on Datadog’s design system. </p><p>Ask me about: <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="tag">#<span>CSS</span></a>, <a href="https://front-end.social/tags/Frontend" class="mention hashtag" rel="tag">#<span>Frontend</span></a>, <a href="https://front-end.social/tags/DesignSystems" class="mention hashtag" rel="tag">#<span>DesignSystems</span></a>. </p><p>Located in France. He/him.</p>

Posts

  • Post #2114246

    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 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.

  • Post #1785927

    What was the last thing you wanted to do with #CSS but couldn’t?

  • Post #1754476

    This time, going to #CSSDay on Tuesday and going back on Sunday because there will be a full-day pre-event and a post-event (https://cssday.nl/schedule.html). It is almost a CSS Week now.

  • Post #1180447

    Selectors in CSS are fast, but not when your app has too many DOM nodes and the selector in question is a non-optimal `:has()` — that can still introduce significant performance regressions in practice. `:has()` should be your last resort — very often, using static templating or even JS instead could be a better idea. Bad: `.foo:has(.bar)` Ok: `.foo:has(&amp;gt; .bar)`. Even the `:has() &amp;gt; …` should also be avoided with not precise selectors like `&amp;gt; *` or `&amp;gt; :first-child`...

  • Post #811180

    I don&amp;#39;t know who needs to hear it, but I just test out an attempt to conditionally chain more than 10000 elements one to each other with anchor positioning, and in Chrome it works. Neither Safari nor Firefox don&amp;#39;t currently work well with even a few chained elements, but, I guess, I now have a good benchmark :blobcatknife:

  • Post #708249

    New blog post: “Fixing Baselines”. https://blog.kizu.dev/fixing-baselines/ Do you know how to center things in CSS? In year 2025? Easy! You just… align… or justify…, ok, maybe just place? your content… or items? …Forget it, this post is not about alignment. Or is it? This post is about another common alignment concept that might seem simple: baseline alignment. In it, I share a technique I have already used for twelve years. #CSS #Typography

  • Post #662737

    I was struggling to find a solution for a problem for a while. Turns out, the solution was to double the number of scroll-driven animations I was using. It would’ve been great to do this with fewer of them, but hey, I’ll take what I can.

  • Post #648678

    &amp;gt; RESOLVED: make all property descriptors in @property optional https://github.com/w3c/csswg-drafts/issues/13211#issuecomment-4040028009

  • Post #484876

    Decided to try matrix (for Nth time). For now, in a “lazy” mode: instead of looking for a good instance to join, using the “main” one for now. @cinnyapp seems like the best client so far — custom emojis/stickers is a must when going from something like a discord/slack, and it works very well as an installed web app on the desktop/iOS so far. If anyone wants to try chatting there — feel free to send me a DM here with your matrix address :)