A small thing I have started doing recently is trying to choose an app that I’m going to use for some purpose based on its presence in Mastodon.| Roma’s Unpolished Posts
I am sharing a CSS snippet I wrote for Obsidian, which makes the default Markdown display better for me by always showing the corresponding formatting symbols.| Roma’s Unpolished Posts
The first entry in my new blog: initial struggles and future plans.| Roma’s Unpolished Posts
Scroll-driven animations did land in stable Chrome 115, which means that a lot of the techniques I wrote about are now possible to use there.| Roma’s Unpolished Posts
I did participate in the IndieWebCamp Nuremberg 2023 and made a few updates to my main site and my less polished blog.| Roma’s Unpolished Posts
In an attempt to start writing more in my blog, I am gathering some of the bookmarks I found important in this weekly post.| Roma’s Unpolished Posts
The second installment of the things I deemed useful to bookmark in my blog.| Roma’s Unpolished Posts
Today’s post is sponsored by me not knowing what I’m doing. In other words: fiddling with how my blog is built. Given Astro is a relatively new framework, I struggled to find solutions to some probably simple things I wanted to do with it. In this post, I’ll document what I did find working for me, and maybe this could be of any assistance to others also struggling with Astro & its MDX integration.| Roma’s Unpolished Posts
If you see something that you think should work in every browser, but it does not work in every browser, what would you do? When I did encounter this issue a few months ago for the first time, I thought that maybe this was some obscure CSS specs limitation that did apply to my case. I was wrong. Today I investigated this further, and in this post would tell you what I found.| Roma’s Unpolished Posts
For some time, I struggled with some of the more complicated calculations in CSS. Not with their contents, but with how I would like to see them formatted.| Roma’s Unpolished Posts
After another time of me using `min()` (or was it `max()`?), I wondered: could I just always use `clamp()`, even if I need to have only the lower or the upper bound?| Roma’s Unpolished Posts
Today I’ll share my observation that I initially wanted to work more on, but just had to get out sooner rather than later: we can use the `currentColor` inside `color-mix()`! And with that, we could modify an alpha channel of a color only with CSS.| Roma’s Unpolished Posts
Two days ago, I published a post named “Dashed Idents for Everything”, in which I did say that we could just use dashed idents in place of custom idents in CSS. In one of the replies, Taylor Hunt did mention that on the MDN page for custom idents it did state that we _cannot_ use dashed idents instead. I did my research and created a PR for MDN content, which did fix this.| Roma’s Unpolished Posts
What do you think when you see --foo in CSS? Is this a custom CSS property? Maybe, but not necessary. It is a “dashed ident”, which is a variation of a “custom ident” (an author-defined identifier). In this post, I would explain why I’ve decided to always use one, but not the other, and would recommend you to do so as well.| Roma’s Unpolished Posts
Exactly a month ago, I started a thread on Mastodon about unlayered styles, which led to me bumping the corresponding CSSWG issue a bit more than two weeks ago. There was one CSS hack I did share in this thread which I did not yet write about in this blog, which I’m going to do now!| Roma’s Unpolished Posts
Technically, I tried Mastodon for the first time on April 06, 2017, and tried again a few times over the next few years, but it did not stick with me at the time. I have some hobbies, but I’m not that deep into them. Not as deep as I’m in CSS and front-end, and, at the time, it was rather lonely to not have the people I enjoyed following for years around. That did change when Miriam Suzanne opened the front-end.social instance, and my presence there is what I’m celebrati...| Roma’s Unpolished Posts
Today would be a quick “observation”, but a longer prelude. I did stumble upon what I’ll elaborate on today back in June, but for several reasons I did not share or write about this. Today, I saw Adam Argyle’s CodePen, and first forked it, using that technique, and now I’m writing about it as a way to share my observations more widely.| Roma’s Unpolished Posts
Two days ago, I wrote an “Unlayered Styles Issue” post, where I shared a link to my comment in a GitHub issue about unlayered styles. Since then, there was a brief discussion, after which the issue was reopened — yay!| Roma’s Unpolished Posts
I tried the Arc browser for a few months, and finally decided that I don’t really like it that much. Now, I’m starting to migrate (slowly) to Firefox Nightly.| Roma’s Unpolished Posts
I wanted to start contributing to the Web Platform Tests for a while, and a few weeks ago I finally got to read the documentation and push my first commit there, with another one following suit today.| Roma’s Unpolished Posts
This post is prompted by the website for the new “monaspace” family of fonts. The problem there is the scroll value for any of the overflow properties. Don’t use it.| Roma’s Unpolished Posts
I did post for every day of this month. In the spirit of this challenge, this is a short post, in place of something larger. A proper “wrap-up” will be at some later date — I’ll need to take some time off to think about all of this!| Roma’s Unpolished Posts
Today is the 22nd anniversary of my first HTML page on the web: November 4th, 2001. Quite a long time going! Initially, I wanted to post a longer history of my personal website(s), but looking at all the archives, that would be a much longer task, especially if I would like to show the screenshots and examples of what I had. For now, I’ve decided to write a shorter post.| Roma’s Unpolished Posts
I did not have an opportunity to write something useful today. So, I’ll write something random? After all, this is my less polished blog, in which I, at least initially, wanted to start posting less technical things. Well, did not do well on the “less technical” part, but so far, I actually managed to post every day of November. Surprised myself with this! In this post, I’m sharing some observations from this experience so far.| Roma’s Unpolished Posts
Today, Brian Kardell posted a question in his blog, in an entry named “Let’s Play a Game”. In the post, he asks to try to sort a list of the proposed focus and investigation areas to our liking, alongside some commentary. That’s what I’ll do!| Roma’s Unpolished Posts
In yesterday’s “weekly” I shared a new MDN docs page for @scope — a new CSS feature currently only available in Chromium-based browsers. Looking at it made me remember one issue that I had with the @scope, which was actually intended. I imagine this might be something many people would stumble upon, so here I am, sharing it.| Roma’s Unpolished Posts
For some reason, I had this misconception that Shadow DOM could not be used with regular elements, I only ever tried it with the custom ones.| Roma’s Unpolished Posts
Sorry again for not posting the weekly links — I’m not feeling myself well, so decided to write a shorter post today. I did update this blog’s design slighly!| Roma’s Unpolished Posts
Two days ago, I published my previous observation: “Range Input’s Thumb and Emerging CSS”, where I promised to share another observation later. Here it is! In it, I would share how we can work around the absence of the scroll-start property.| Roma’s Unpolished Posts
I already posted this week once about space toggles, but today I did use a variation of the technique, where it is not strictly space toggles, but something like space placeholders. The idea is: sometimes we want to make some properties extensible, which can be very useful for properties that do not have longhands, or for properties which can accept an unlimited number of values. CSS variables can be very helpful for coming up with your API, which allows controlling these prope...| Roma’s Unpolished Posts
Today I did encounter a bug, for which I would really want to use CSS Scopes, or Style Container Queries. But they’re not yet available in any cross-browser way. But the bug won’t wait! Thankfully, space toggles did save the day.| Roma’s Unpolished Posts
I did write a lengthy comment in a surprisingly (for me) closed issue about allowing authors (and users) to explicitly place unlayered styles in the cascade layer order. I won’t reproduce the comment here, so I invite everyone to read it on GitHub and participate in the discussion, provide your use cases, and so on.| Roma’s Unpolished Posts
In the last “weekly” I did share a link to the “The Monaspace type system”. For a few weeks, I was trying one of its fonts in VS Code. There were a few things that did not go very smoothly, so I have decided to share them in this post.| Roma’s Unpolished Posts
I learned a lot from IndieWebCamp and gathered a lot of links from the sessions I did participate in.| Roma’s Unpolished Posts
On one hand, I did miss two weeks of this “weekly” series. On the other, I did post every day from the start of the month. With the backlog through all these past weeks, I have maybe too much on my plate. So, this time, I’m only posting links related to CSS, as well as a quick list of everything I did write in this blog since the last weekly.| Roma’s Unpolished Posts
I did not have an opportunity to compile all the bookmarks I had for all the topics, so here is what I have decided to do: I’ll _try_ to post at least CSS-related stuff in every weekly. But, as long as I have a backlog of various things, I’ll group them by topic, and will add a section with things only related to this topic. This should allow me to go through the backlog without straining myself. Maybe.| Roma’s Unpolished Posts
There was not a lot of stuff this week on the CSS part, probably due to the Thanksgiving and all of that. But still something! Furthermore, continuing the “tradition” of including one more topic apart from CSS in my weekly, this time it contains some typography and design links.| Roma’s Unpolished Posts
A week ago, a “CSS `@scope`” article by Miriam Suzanne was published at “12 Days of Web” (curated by Stephanie Eckles). This article did clarify a few things for me, but also made me think of one potential usage of the `:scope` pseudo-class: “storing” the scoping root’s selector as a reusable entity, covering the use case which is available in some of the CSS preprocessors. However, when exploring this use case, I stumbled upon a few issues: this post is about ...| Roma’s Unpolished Posts
Twenty years ago, I created an account on LiveJournal. As I did write in my “Personal Site Anniversary & History” post, plenty of things did bloom from this. Highly likely, without LiveJournal I won’t be here as a web developer. Without it, I won’t be as good with CSS.| Roma’s Unpolished Posts
While working on another article, I stumbled upon a case that I never could achieve in any good way: an ability to select repeating groups of elements. Native CSS Nesting could help us, and we could even optimize it a bit, but I am arguing that we still require something like `:nth-sibling()` in CSS.| Roma’s Unpolished Posts
Today’s “weekly” is a short one! Mostly about CSS and HTML, no bonus topics this time.| Roma’s Unpolished Posts
I did not have a lot of time to read stuff outside my CSS comfort zone this week, so, once again, mostly CSS-related links. Also: a small announcement about my experiments!| Roma’s Unpolished Posts
I’m a bit tired after this week — I did speak about some of my CSS experiments at CSS Café on Thursday (later there’ll be a recording), so there are not as many links today, and, as usual, mostly only about CSS.| Roma’s Unpolished Posts
It is the last week for many advent calendars. I did not have an opportunity to follow most of them — this is why I did post links from only one of them, but I will catch up in the following weeks! Regardless, there were some good articles about CSS outside of advent calendars as well.| Roma’s Unpolished Posts
Adam Argyle asked today: “is it time to forget about physical properties like margin-top and left?” I have some thoughts occasionally on this, and decided to write them down as a list: maybe I’ll update it later with other related things, we’ll see. At the bottom of this post, I’ll also list several useful resources — don’t forget to check them out!| Roma’s Unpolished Posts
I did take a break from writing anything for the most of January. During this time, many people published tons of things, so this post will be very long. 50+ articles long.| Roma’s Unpolished Posts
I had a lot of fun and ideas reading this last week’s articles and posts about CSS: I’m so happy we have so many people sharing their findings!| Roma’s Unpolished Posts
Current music:toe — The World According ToCurrent drink:Yunnan tea| Roma’s Unpolished Posts
In the last few weeks, I received two invitations: an invitation to speak at the next CSS Day, and an invitation to join the CSS Working Group as an Invited Expert. Of course, I did accept both of them.| Roma’s Unpolished Posts
A bit later than usual, but I did finally read all the articles and posts about CSS that I bookmarked in the last week.| Roma’s Unpolished Posts
A compilation of 23 articles and posts about various topics: colors and themes, container queries, accessibility, grids, future CSS, and more.| Roma’s Unpolished Posts
Another big batch of CSS bookmarks: more than a month worth of them. As usual, with that number of them (32!), I grouped them into eight sections: Colors and Themes, CSS Layouts, Typography, Future CSS, Selectors, Shapes and Effects, Everything Else and My Articles.| Roma’s Unpolished Posts
I did some tests with custom properties in CSS, and how they work (or don’t) with the CSS-Wide Keywords (`initial`, `inherit`, `unset`, `revert` and `revert-layer`). As the result, I did create a PR adding a few Web Platform Tests, and opened two bugs in Safari and Firefox.| Roma’s Unpolished Posts
More than three months without sharing bookmarks. The backlog of articles to read grew and grew, becoming unmanageable. Instead of trying to go through the whole backlog in one go, I grouped all the bookmarks, and will post them group-by-group. Today, it is all about layouts.| Roma’s Unpolished Posts
Guess what? It is November. Last year, I went all out and published one post a day for the full month. On one hand, that was hard, and took its toll on me. On the other, I _did_ publish a bunch of stuff that would usually stay in the drafts. I don’t know if I will manage to do the same this month — but I want to try again.| Roma’s Unpolished Posts
If you have read any posts in this blog, you might’ve noticed the “Current music” field at the top. This is something I adopted back from when I was using LiveJournal. Until today, it was displayed just as a string. Today, I made it into a proper “category”: if I shared some artist more than once, its name will become a link to the list of all posts that share it.| Roma’s Unpolished Posts
One of the things I planned for the November: to not do _a lot_ of coding on the weekends, and try to post more personal stuff, keeping more technical stuff for the weekdays. Well, for today’s post I wanted to share some photos, and I started to wonder how I should do this. In the end, it _will_ involve code, but today I was mostly doing some exploration and planning.| Roma’s Unpolished Posts
After a large gap, continuing reading and sharing the recent CSS bookmarks I gathered. I’ll mostly go through more recent ones, but I’ll include one section with a few older ones as well.| Roma’s Unpolished Posts
I originally wanted to write about something else today but, for some reason, did not have any motivation for it. But hey, let me then do the best thing I could do otherwise: share some other people’s articles. It is always nice to think that there are others, who are interested in the same thing you are. In this post, I gathered 15 bookmarks about CSS container queries (and some other queries as well).| Roma’s Unpolished Posts
I spent the whole day at the first day of beyond tellerrand conference in Berlin, so I did not have an opportunity to work on a proper post here. I met many nice people! New and old faces, good talks. I have made many notes, and have many thoughts, but wanted to just quickly jot down one of them, mostly as something that I have been thinking about for quite a while already. That thing is — physicality.| Roma’s Unpolished Posts
One year ago, I moved to Firefox. I’m still using it (the “Nightly” version). Mozilla has made some questionable moves since then. But, each time I look at the alternatives, I am not entirely sure if there is any reason — for me — to move to something else.| Roma’s Unpolished Posts
Sometimes, I invite someone to join Mastodon, and I end up sharing the same links and information repeatedly. Following the “manual until it hurts” IndieWeb practice, after repeating the same things a few times, it is time to “automate” it. Well, in this case, just put everything into one blog post, I guess.| Roma’s Unpolished Posts
I have so many things I want to do with my blog! I’m already thinking about having a good way to embed Pixelfed images, and now I’m also wondering what could be the best way to handle bookmarks. Currently, I’m just posting them as compilations, manually marking them up in Markdown lists with links, writing descriptions, and then categorizing them. But the way I do it now is too limited: it is too manual, and it is difficult to build on top of it.| Roma’s Unpolished Posts
I was working on a different post today, but I got too deep into looking for a good example, realizing a bit too late that I won’t finish it today. So let me just improvise a quick post about a thing I have been thinking about for quite a while.| Roma’s Unpolished Posts
Do not use `transition: all` in CSS. Just don’t. I won’t go into all the details today about why it’s bad, but I will share one of the many issues it can cause. Let’s quickly focus on its interaction with the `visibility` property, specifically how transitions work with its inheritance.| Roma’s Unpolished Posts
After I published my “My Mastodon Starter Pack” post, it got boosted a bunch in Mastodon. This led to more people trying to read it, and some — not successfully. All because in this not very polished blog I used a lot of a bit too-modern CSS, for example, native CSS nesting. And — this resulted in the layout breaking quite substantially.| Roma’s Unpolished Posts
When I created this blog, I implemented the same thing I did on my main site: a custom element that links to the Mastodon post where I shared the link to the post, and which also shows the number of replies, favorites, and boosts. I saw others implement this as well. Now, people are also adding the same for reactions on bluesky as well. I won’t do it.| Roma’s Unpolished Posts
I often see complaints about people hyping up new web platform features while they’re not yet ready for wide use. I also was on the receiving end of similar complaints. When I publish my articles, I always have plenty of things in mind, not necessarily a set of rules, but rather guidelines and directions that I follow. In this post, I cover some of them.| Roma’s Unpolished Posts
Writing one post a day is hard! I had an idea for an observation but did not have an opportunity to write it up properly. Come on, me, these should not take that long! That means I am falling back to the idea I reserved for cases like this one: where I cannot quickly come up with a post on the spot. That is: share just a few recent bookmarks!| Roma’s Unpolished Posts
When I shared my “Observation: Inherited Visibility Transition” post, I mentioned that there was a CSS bug I encountered that I wanted to research and maybe fill later. Well. I thought it would be a quick thing, making into a quick post. Apparently, not!| Roma’s Unpolished Posts
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!| Roma’s Unpolished Posts
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.| Roma’s Unpolished Posts
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.| Roma’s Unpolished Posts
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.| Roma’s Unpolished Posts
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 with brief explanations why I’m using `:has()` there.| Roma’s Unpolished Posts
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.| Roma’s Unpolished Posts
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 ``.| Roma’s Unpolished Posts
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.| Roma’s Unpolished Posts
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?| Roma’s Unpolished Posts
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.| Roma’s Unpolished Posts
Today, Chrome published two “intents to ship”: for the new CSS `if()` function, and for custom CSS functions. I informally object to this.| Roma’s Unpolished Posts
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.| Roma’s Unpolished Posts
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.| blog.kizu.dev
Roma’s personal blog| blog.kizu.dev
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!| blog.kizu.dev
I’ve spent most of the day inside the delayed and cancelled trains (thanks, Deutsche Bahn). I did not have an opportunity to come up with a good post for today, but both yesterday (and a bit today) I hacked on my blog, as a part of the IndieWebCamp. I did the thing I wanted to do during this weekend: update my blog’s Table of Contents to be similar to what I have on my main site.| blog.kizu.dev
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.| blog.kizu.dev
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?| blog.kizu.dev
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 custom property, and `calc()`.| blog.kizu.dev
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.| blog.kizu.dev
Back in August, I saw a Mastodon thread by Anne Sturdivant about how she was styling titles, in which she described a wish for a certain wrapping behavior. Curiously enough, I remembered one interesting aspect of flexbox that could help to achieve what she wanted, and shared it with her. For quite a while, I wanted to write an “observation” post about it — and, finally, here we are! Maybe you’ll find it useful one day too.| blog.kizu.dev
This is a very short post about a thing that I have wanted to share for quite a while. I am pretty certain that someone already wrote about this at some point, but hey. There is so much content everywhere that it might be useful to repeat stuff, making it more likely someone will stumble upon a solution to their problem.| blog.kizu.dev
Today, I want to talk about two things, in the context of writing articles and sharing knowledge in general. One of them we don’t need to be afraid of, and another we need to do as often as possible. The first one is repetition. The second one — attribution. It could seem like an odd pair, but I’ll try to explain how they are connected.| blog.kizu.dev
In a few of my latest CSS experiments and articles, I used one naming pattern for registered custom properties that I think worth highlighting in a separate blog post. This pattern allows us to create a set of generic custom properties, covering a wide set of use cases for computing and storing their values.| blog.kizu.dev
Media queries are nice, but for many things, we don’t even need them: there is this great CSS property `color-scheme`, which allows us to make various things adapt to the current color scheme. We can even set it on a per-element basis. This post describes how we can use registered custom properties and style queries to read the current value of a `light-dark()` color for styling any non-color properties as well.| blog.kizu.dev
2023 was very productive for me in terms of experimenting with CSS and writing about it. I guess, escaping from reality by submerging yourself into your special interest can have positive results occasionally. Today, I will list everything I published about CSS this year, and write a bit of context about some of it.| blog.kizu.dev
The new year is here, and, with it, a season where people put out their CSS wishlists for the future. I did already read two of them: December’s CSS wishlist from Sarah Gebauer, and today’s “Tyler’s CSS Wish List for 2024” from Tyler Sticka. One thing caught my attention in Tyler’s list: an ability to vertically align to the middle of the font’s cap-height. I am thrilled to report that there are at least two relatively ok workarounds available in the most recent ...| blog.kizu.dev