Weekly Bookmarks 10

Published on:

December 24, 2023

Categories:

CSS⁵⁵, bookmarks²⁰

Current drink:

Lapsang Souchong tea

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.

• “12 Days of Web” curated by Stephanie Eckles — now with all articles. As previously, I will put the related links inside the <details>, as a way not to spoil the topics for you.

  This week’s 12 Days of Web’s articles (5 links)

  • “View Transitions” by Chen Hui Jing — an introduction to view transitions. I’ve yet to properly play with them, as I’m mostly waiting for them to be available for regular page transitions. And when I did try them, I found out that they’re something that you have to design in-advance, and it might not be a good idea to try and apply them to existing web-sites without putting any thought into it.
  • “CSS Nesting” by Kilian Valkhof — a round-up of various aspects of native CSS nesting. It feels so good to finally use it after years of preprocessors!
  • “Scroll-driven Animations” by Michelle Barker — an introduction to some of the common use cases for the scroll-driven animations, showcasing some simple but festive examples. I did already write 4 articles about them, and not planning to stop — though I tend to explore the less common use cases.
  • “Responsive SVGs” by Nils Binder — a nice exploration of how we can make the SVGs responsive. There are many interesting details, some of which I had to stumble myself when doing my examples involving SVG in my “Future CSS: Anchor Positioning” article (specifically, for the last example of the “Four Quadrants” section, and for the example in the “Using the Connections”).
  • “Container Style Queries” by Manuel Matuzović — an introduction to the style queries. During this year’s CSS Day many speakers did mention style queries as something that could solve one or another problem. We need more articles about them! And we need them in all browsers as well, the sooner — the better.

  ---

  Note: I did not list two posts about JS; if you’re interested in them — look for them on the website for yourself!

• “The mysterious case of using CSS animation-composition: accumulate on a scale transform” by Bramus — an explanation of one curious detail from one of the last week’s “12 Days of Web” articles.

• “New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem” by Šime Vidas — a deep dive into viewport units, their interactions with classic scrollbars, some other related contexts, and how we can work with them.

• “CSS-based state management” by Mayank — an exploration of how CSS custom properties can be used to store state, utilizing the way inheritance works in CSS.

• “Border images in CSS: A key focus area for Interop 2023” by Dipika Bhattacharya — an MDN article about border-image. As the title of the article says — this property was one of the focus areas for this year, and browsers did a lot of progress on fixing interop issues with it. This is still a rather challenging property to work with, but this article does a good job of talking through its fundamentals.

• “Intent to Prototype: CSS calc-size() function” by David Baron. Can’t wait to play with it! An ability to have a transition between unknown width or height is literally the most reacted to issues in CSSWG repo. For now, there is only a CSS Grids trick from Chris Coyier, but having this available natively will be wonderful.

• Firefox 121.0 Release Notes — among others, I want to note two notable CSS-related features: addition of text-wrap: balance, and, more importantly — :has() selector, which is now available in all stable versions of major browsers! Maybe not yet a time to put it into production, but a time to start learning about it. There are many articles about it already (someone should make a round-up!), and at least two were written specifically due to the release:

  • “Can I :has stuff?” by Sarah Gebauer — in which she explores the basics of it.

  • “Locking scroll with :has()” by Robb Owen — in which he looks at one of its possible use cases: detecting when we need to “lock” the scrollbar based on some condition (I can already think of using it with :popover-open from the Popover API)

• Safari Technology Preview 185 Release Notes — again, I want to focus on just two points: align-content in normal flow (which was already present in Chrome Canary, and now we could test it in Safari TP thanks to a contribution by Elika J. Etemad), and a relatively stable implementation of @scope! Here are two related articles from this week:

  • “How Do You Vertically Centre an Element in CSS? (Even More) Easily!” by Michelle Barker — an overview of this new possibility.

  • “CSS Scope Issues” by me — a post and links to four CSSWG issues I created after testing the @scope in Safari.