Weekly Bookmarks 14

Published on:: March 5, 2024
Categories:: CSS⁴⁰, bookmarks¹⁵
Current music:: Exist Strategy — Broken Air
Current drink:: Yunnan tea

A bit later than usual, but I did finally read all the articles and posts about CSS that I bookmarked in the last week.

“Modern CSS Tooltips And Speech Bubbles (Part 1)” by Temani Afif — an article about a technique to implement tooltips with border-image and clip-path (and a bunch of math). I wish there was some native way to do some of this (maybe I should come up with a proposal for this or something).
“Going beyond pixels and (r)ems in CSS - Container query length units” by Brecht De Ruyte — a practical article about using container query length units.
“The New CSS Math: pi and other constants” by Daniel C. Wilson — an article about the new math constants: pi, e, infinity, and even NaN.
“CSS Foundations: What is IACVT?” by Bramus — a post explaining what “Invalid At Computed Value Time” is in CSS. A good read in case you want to understand how things work on a more foundational level.
“Case Study: lynnandtonic.com 2023 refresh” by Lynn Fisher — a detailed case study about another annual Lynn’s redesign of her website. A lot of ResizeObserver usage, CSS variables, and nice tiny details.
“Retrofitting fluid typography” by Richard Rutter — a case study of using utopia.fyi to implement fluid typography with custom CSS properties.
“Menus, toasts and more with the Popover API, the dialog element, invokers, anchor positioning and @starting-style” by Ollie Williams — an article about all the new features we will have in the future to work with popovers and dialogs which outlines many aspects we need to consider when implementing them.
“The value of live web design” by Chen Hui Jing — a post about designing live in the browser, and a list of CSS properties that might be helpful to learn and apply when doing it.
“CSS-only bottom-anchored scrolling area” by Kitty Giraudel — a short post about two ways of making scrolling containers start from bottom. One of them was new to me: I did not know that using flex-direction: column-reverse did work like that!
“An HTML Switch Control” by Anne van Kesteren and Jon Davis — a post about the new switch control introduced in Safari 17.4.