Weekly Bookmarks 1

Published on:: October 15, 2023
Categories:: CSS⁴⁰, bookmarks¹⁵
Current music:: The Surrealist — Lux
Current drink:: Lapsang Souchong tea

How funny — in July I did start my blog but have not posted since then. Isn’t that the fate of most blogs?

As an attempt to have something to write about at least on a weekly basis, here is what I think I’ll do: gather some of the interesting stuff I noticed during the week and just post these with minimal comments. Some of it I shared in my Mastodon already, but I think it could be useful, even if for myself, to have a compilation here as well.

Let’s go!

CSS Techniques and News

“Emulate basic relative color syntax with color-mix() + the none keyword” by Lea Verou. Given color-mix() is already supported in all major browsers, this is a really important find: it brings some of the relative color syntax abilities closer to us — if you can use this with proper fallbacks in a progressive enhancement manner, you can already do it!
“CSS Type Casting to Numeric: tan(atan2()) Scalars” by Jane Ori. A very cool workaround for the absence of an ability to remove units from the lengths in CSS calculations. Works (with some hacks) in Chrome and Safari, not yet in Firefox (as it requires @property). Given the trick is very simple, I might try it in some of my experiments. If you want this natively — vote for this interop 2024 focus area proposal by Scott Kellum.
“[css-backgrounds] background-clip: border-area” — a proposal in CSSWG issues by Lea Verou. I think it makes a lot of sense, though it might be a bit tricky to use correctly due to the necessity to make sure the fallbacks would work and would not result in unreadable text.
“The Cascade is a newsletter about the past, present, and future of CSS” by Robin Rendle. Two issues are already there and are also available on Robin’s website in a non-newsletter format if you prefer it this way.

Not Exactly New, but Noteworthy

“Igalia Chats” — a podcast by Brian Kardell and Eric Meyer about the web, its history, browsers and standards. I just finished listening to all the currently available recordings, and I wish there were more in-depth discussions about the web of this kind.
“ImageOptim 1.9.1” by Kornel Lesiński — a very useful macOS app for image optimization, now native for Apple Silicon.
“Orion Browser” and “SigmaOS” — interestingly, there are now new browsers that are based on WebKit, which is refreshing compared to most of them being based on Chromium recently. Similarly, the “DuckDuckGo” browser, which exists on different systems, just uses the built-in engine, so on macOS it also uses WebKit.
“preact-custom-element” — a Preact helper that allows it to be used with web components. I tried it for a tiny thing I’m working on, and it works okay. There are a bunch of bugs here and there, but otherwise I’m pretty happy with how web components, Preact and HTM can work together. No transpiler needed, small footprint.

My Bug Reports

“Scroll-margin does not work for an element with a parent that has a non-visible overflow” — a bug I reported in Chromium. There are actually so many more issues with scroll-margin and overflow… I’ll need to find time to extensively research it, as I think there is a very big gray area in both specs and implementations.
“No transitions of inherited properties when the change is triggered by animations” — another bug I reported this week, this time for Firefox. Also, it is slightly in a gray area, where specs are not 100% clear about how it should behave, but the way Chrome and Safari handle it are much more useful for developers. This might be required for a lot of techniques based on scroll-driven animations to work in the future, but it could still be useful even without them.

That’s it! I’m doing this today, so maybe there are not as many links as I could’ve gathered if I would note them as the week goes… We’ll see if the next post in the series will have as many or more — maybe not, given how this time there were two very nice CSS techniques shared by Jane and Lea, and this does not always happen, haha.