Roma’s personal blog
For me, 2025 was a much less productive year than 2024. A mix of industry and world frustrations, personal issues, and just certain people being mean — all of that made me live on borrowed spoons for most of the year. This post won’t have any of that, of course, but will contain a roundup of everything I wrote about CSS, so if you missed something — it is a good way to catch up!
For the third time, third year in a row, I managed to write a post for every day of November. I was tired at the end, and postponed writing many posts until the end of the day, but it felt easier than the last two previous years.
This is a very quick shout-out to the Bridgy Fed project by Ryan Barrett. If you know people who are only present on one of the networks and are not bridging their accounts — nudge them to do so!
This is another post about a small design tweak that I made around two years ago to both my blog and main website. I never shared it, because, well, it feels very small. But I liked it a lot, and I don’t think I could ever come back, so why not write about it? I wonder if you ever, while visiting my websites, noticed this tiny aspect of it?
This is me documenting the way I am handling some of the more complex conditional rendering in Astro’s JSX. Well, not strictly _JSX_ — but its “Component Template” part of `.astro` components and assigning them to variables.
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.
The title of this post might not seem like a big deal, but the problem I will talk about was pretty fun to work out: how do you make a margin between elements responsive based on the available space in their parent, and such that it does not collapse in a `min-content` context?
One of the things that might flight under many people’s radars is the incoming `inherit()`. Not the `inherit` keyword — we had it for quite a while already. Now it is available in Chrome Canary with the “experimental web platform features” flag, so, if you want, you can go play with it!
I am back with reposting some of my old photos from my Pixelfed, but now in my blog. I did not fix the API issue that prevented me from doing it the last time, but made a workaround that worked well enough.
I don’t have a topic for today, so I decided to ramble a bit on a random topic: wondering how the two things in the title of today’s post can live at the same time in me. I have a tendency for perfectionism. At the same time, I often surround myself with various degrees of chaotic mess.
This whole week, I am switching between writing posts in this blog and working on my next article for my main site. My blog has a much more modern setup for writing posts. The old setup? It is an abomination. I really would like to rewrite everything that I have there to use the same architecture I am using for my blog.
With yesterday’s post, — “Anchoring to a Containing Block” — I started to use `@scope` for my CSS code examples.
Today I stumbled upon a CSS issue that I and some others had in the past: an inability to use an anchored element’s containing block with anchor positioning. At least — to do so easily. This post is about how we can actually do so with just a few small changes to your usual anchor positioning setup.
I am continuing working on my new article, and while making examples for it, I stumbled upon a crash in Safari — both in its stable version and in Technology Preview. I managed to reduce it to a minimal reproduction and reported it — and in this post I want to encourage you to create minimal reproductions of any bugs you encounter too — for more than one reason.
I always liked to pay a lot of attention to how I format my CSS, with the roots of it coming from the conventions that Vadim Makeev shared when we worked together in ~2007–2008. Currently, I don’t have spoons for formatting my CSS, but I try to polish my CSS examples that I put them in my articles, and, sometimes, for the components I am working on. If I were to give one advice for formatting CSS,…
I wanted to share for quite some time how I prepare photos before uploading them to Pixelfed, and now is a good opportunity to do so. There were a few things I noticed that made a difference in how pictures are displayed there.
I’ve used Obsidian for quite a while. While my vault’s contents are a chaotic mess, it really helps me to be the place where I can put my notes and then find them when the need arises. I use a bunch of community plugins to improve a few workflows. And some of them I use more than others! That is a post about them!
TPAC 2025 just ended, and I am positively tired. Attending it remotely, my sleep schedule is chaotic right now. I have many ideas for CSS-related posts in my list of ideas for November, but almost all of them require at least some amount of research and crafting demos. Well! I found one note that I wanted to expand on, and which sounds tiny enough to be able to finish it in my altered state.
This is a post about another design tweak that I adopted while iterating on my site’s and blog’s designs over the years. I use it a lot, and really like how it feels and works — and I invite you to consider trying it as well.
There exists a not well-known CSS property: `tab-size`. It sets the width, in spaces, of the tab indentation, usually found in code blocks of authors who use tabs instead of spaces (good job, authors). However, who says that this value should be static?
I was doing some styling recently, and I wanted to know if my element was inside a certain container. While I could reuse the same selector that I used to apply the container with, this did not feel right: what if I were to apply the same container via a different selector? Or have a version of that element where the container is removed via some modifier? Can we somehow use just the container’s…
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, and will take this as an opportunity to share it.
I am a bit out of it — did not sleep for quite a while, but not managing to fall asleep properly now. Staying in Europe and not going to this year’s TPAC, I am trying to shift my waking hours to match Japan. Not very successfully so far. Well, time to repost some older photos from Pixelfed!
A long time ago, back in LiveJournal, sometimes people embedded various music players in their posts. It was fun! I already had a “Current music” field added to most of my posts, but now I also added a way to enrich this field by adding an optional Bandcamp track reference, and spent my evening updating existing posts in the blog to have it.
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.
In the last few days, coincidentally, I saw two cases where the obscure `box-decoration-break` CSS property could help. This might be a good sign that it is worth it to remind everyone about its existence!
Zombie Styles (noun): Dormant styles that break the UI after a configuration change.
In which I continue a series of posts about my initial experiments with custom CSS functions. This one is about a not very useful (but fun) nuance about their arguments.
This is a quick post about a pattern that I use more and more: a way to connect elements that require named custom or dashed identifiers for various CSS features.
Well… It is November, but I am sharing photos from my walk from this March. I already published them on my Pixelfed account almost right after taking them, but I really want to continue posting them here as well.
For the third time, I am attempting to write a blog post for every day of November. I managed to do it for 2023 and 2024. I won’t promise I’ll manage to post every day this time, but I’ll try.
In which I present the current state of things and share links and descriptions of issues I opened in the CSS Working Group’s GitHub following the Chrome team’s feedback.
Chrome currently has an experimental implementation of custom CSS functions in its Canary version. In a small series of blog posts, I’ll write about a few things I found interesting in the current prototype implementations of functions and conditions. This post is about one feature of custom functions that I will likely use all the time, but which might not be obvious at the first glance.
When working on another blog post, I noticed that my blog’s styles were broken in Chrome Canary. What happened? A change in how “short-circuiting” of custom property fallbacks works.
A bit less than a year ago, I published my “Fit-to-Width Text: A New Technique” article. Since then, CSSWG resolved to start working on it, and, following this, two things happened: a discussion of its potential accessibility issues, and an intent to prototype it from Google. I have some thoughts, feedback, and ideas about both of these, so here is a post!
Today, Chrome published two “intents to ship”: for the new CSS `if()` function, and for custom CSS functions. I informally object to this.
On Monday, I published a new article: “Pure CSS Mixin for Displaying Values of Custom Properties”. It is a long one, but you don’t have to read it fully to get something out of it, as I also published an npm package that allows you to use the mixin described in the article right away. But then… I wondered. What if this mixin was available _everywhere_ in my browser?
I have a big backlog of photos, and now that I have an ability to embed them in my blog, I will occasionally do so! I am initially posting them on Pixelfed, and this post was originally published there. Pixelfed is cool, maybe you should join it, and post photos there, and not _somewhere else_. If you’re publishing them on your site — reposting them on Pixelfed could also be a good idea.
This was another productive year for me. After 2023, I was afraid that I couldn’t get anywhere close. After all, innovation is hard, and you never know if you will stumble over something exciting. Looking back at 2024, I can safely say that I managed to continue doing what I was doing. And, as it will be obvious from the post, there were things that would be difficult to top.
Two days ago, I published a new article. In that article, I presented a way to prototype native CSS mixins with what we have in CSS today. Three days ago, Lu Wilson published an experimental colour format: Splash. When I read about it, I immediately saw what I’d want to do with it: prototype a mixin.
While I did not do everything from the “To Do Next” of my last update, I did most of it. Now, if I provide a caption in the markdown, it will render as a ` ` with a ` `.
After the yesterday’s “Observation: CSS Math Eval” post, I got a mastodon reply from Valtteri Laitinen. In this post, I modify my example with `CSSNumericValue`, provide a better fallback, and also look into one curious aspect of `initial-value` of registered custom properties.
There is a calculator that uses JS in the post. If you wonder: “What is special about it” — there was one problem that I wanted to solve: evaluating some math expression from user input in a very safe way. I know, there exist external libraries people did already write which could do this job well enough. But I wanted something minimal and with no dependencies. And hacky. Enter CSS, registered…
In today’s CSSWG meeting, there was one issue about the new value of `text-wrap-style` property — `avoid-orphans`. There was agreement in the meeting that we should look for a better name, and open a separate issue about this, which I did, as well as opened another one — about the `orphans` and `widows` properties.
Miriam Suzanne asked: “What are your favorite little day-to-day use cases for the CSS `:has()` selector? Anyone using it in their reset yet?” While I don’t have “day-to-day” cases at work (`:has()` falls outside our browser support for now, and we’re careful around its performance issues), I am using it in a few places for my blog’s CSS. So, I decided to list _all_ the places in my blog’s styles…
When I updated how I am doing scroll markers for the table of contents in this blog, I stumbled upon one curious interaction that I previously did not think deeply about. That interaction: how anchor navigation behaves with elements that have sticky positioning. Initially, this behavior baffled me, and I considered this a bug. But I wondered: are there any legit use cases for this weird behavior?
Since my last post about this, I did some progress on embedding Pixelfed images in my blog. There are still many things I want to implement before I could start using this properly, but this seems like a good checkpoint in my work on the feature.
There is such thing as picture bots that post images every hour. I subscribe to a few of these that post red pandas, and opossums. They’re all cute! While I like these kinds of bots, I noticed several problems with them. In this post, I share my idea for a potential solution of them.
I spent this evening thinking a bit more about what I want to do with my bookmarks. Nothing really done, but this time I experimented with Obsidian to see if it could be a good way to store them, add metadata to them, and so on. I tried a few plugins and, at first glance, managed to get rather close to a good starting point. No code to share yet, but I’ll mention the plugins that I tried.
Anchor positioning is cool! And there were many articles and posts about anchor positioning since I last mentioned it in my bookmark posts. Here they are!