Weekly Bookmarks 4: CSS Edition

Published on:: November 12, 2023
Categories:: CSS⁴⁰, bookmarks¹⁵
Current music:: Neavh — Knothole
Current drink:: Yunnan

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 (last “weekly” had only IndieWeb bookmarks, so the last time I actually posted regular ones was on October 22), 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. That means that the next weekly would have some more non-CSS links to share!

CSS Techniques, Articles, and News

“Solved by CSS Scroll-Driven Animations: Style an element based on the active Scroll Direction and Scroll Speed” by Bramus — a very wild hack around scroll-driven animations, utilizing the inheritance of values set by animations from a parent to children, with transitions, allowing to detect the velocity and direction of the scrolling.
“Control Pixel Art Sprites With CSS Scroll-Driven Animations” by James Basso — a nice application of the above technique, used to adjust the direction of the sprites based on the scroll direction.
“Why You Should Use px Units for margin, padding, & Other Spacing Techniques” by Ashlee M Boyer — an article comparing the relative and absolute units when applied to spacing. I, personally, was convinced to start doing this, but, as a rule of thumb, only for the inline direction. Block direction is trickier, in my opinion, and not as important. But real testing is the thing everyone should do to check which units to apply in their cases.
“Some use cases for display: contents” by Mayank — a nice look at the contents value of the display property. Applying it to custom elements is one thing I was thinking for a while about. And while I don’t think we’d get something like the “Light DOM slots” through CSS in the way they suggest, there is a chance we’d get a ::contents pseudo-element one day. I wanted to compile a list of my use cases for it and post it to this issue, maybe I will find time to do this finally.
“View transitions and stacking context: Why does my CSS View Transition ignore z-index?” by Nic — an interesting exploration of some view transitions’ nuances. I’ve yet to seriously try them, so it is nice to already have people looking into them and gathering workarounds to the potentially common issues.
“Workarounds for buggy gradients” by Keith J. Grant — the new color spaces in CSS are cool, but there are still numerous issues in various browsers in how they’re applied and interpolated. This article provides a workaround to some of such issues. It is also a nice example of how writing about the issues you encounter, as well as your workarounds, can help everyone — Adam Argyle did use this article as something to motivate the engineers to look into this issue.
“OKLCH for better color in the browser” by Jason Lengstorf — a brief look at the OKLCH color space, with some examples and helpful links to some resources related to it.
“What are my CSS user preferences?” by Šime Vidas — a tiny test page that can help in understanding which of the CSS-detectable user preferences are currently applied in your browser.
“Intent to Ship: :has Selector” by Mozilla — finally! I’m delighted that the :has() pseudo-class is already available in Firefox Nightly, as now that I moved to it, I can use my CSS overrides. Nicolas Chevobbe did also share on Mastodon that they would also provide some nice touches in the Firefox DevTools, warning about the performance impact of the unconstrained :has() selectors.
“RESOLVED: The CSSWG supports this CG’s efforts in defining levels for CSS as a way for the community to understand batches of CSS features” in the issue by Jen Simmons — nice to see attempts to make CSS more “marketable”. I’m not entirely sure that the numeric naming is the best approach there, but it is good that there is at least some movement.

My Blog Posts

My previous “weekly” was on the November 1st, and I did post every day since… And I did skip all the weekly posts afterward. So, here is everything I wrote in this blog after the previous weekly!

If you did miss any of these — given them a go! Unlike the articles over at my main website, these are much shorter, haha.