Weekly Bookmarks 12

Published on:

February 19, 2024

Categories:

CSS⁴⁰, bookmarks¹⁵

Current music:

Heather Woods Broderick — Cottonwood Bay

Current drink:

Yunnan tea

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!

• “How To Center a Div” by Josh W. Comeau — a detailed explanation of various ways we can center things in CSS, with many interactive examples.

• “Dynamic text color contrast based on background lightness with CSS/SVG filters” by miunau — an experiment about trying to get the contrasting color automatically for some other given color. Basically, what we might eventually get with the color-contrast(), but via using CSS or SVG filters instead.

• “How I Solved My Font Rendering Problem” by Michelle Barker — a post about how it is important to explicitly mention the font-weight range in the @font-face rule of a variable font.

• “How to fix the invisible scrollbar issue in iOS browsers” by Šime Vidas — an article about how iOS uses the top-level background color as the thing that defines the color of the overlay scrollbars, sometimes resulting in lack of contrast.

• “The chaotic neutral nature of font-size” by Rasmus Fløe — an article about adjusting the size of the fonts to be more logical with font-size-adjust or its workarounds, and a few related issues.

• “Scroll-Driven Animations: You want overflow: clip, not overflow: hidden” by Bramus — a post about how overflow: hidden could interact with scroll-driven animations and about one workaround for this.

• “CSS-only Auto-Collapsing Mobile Menu” by Georgiana Blantin — an article about discovering a technique to detect (and use) the position of some elements in a container by using scroll-driven animations, a bit similar to the technique that I called “Position-Driven Styles”.

• “The Fifty-Fifty Split and Overflow” by Ryan Mulligan — an article about one way to achieve a certain type of layout with two side-by-side columns, only one of which dictates the overall height of both.

• “Playing with Infinity in CSS” by Will Boyd — an exploration of the CSS infinity constant, with a few curious notes about how it works. Last November, I explored how it could be used in clamp() as a way to remove one of the boundaries in my “Observation: Clamp to Infinity” post, though just a few days ago we got a CSSWG resolution to have a native ability to define none to achieve the same effect, thanks to Lea Verou’s proposal.

• “Making the most of ligatures” by Mandy Michael — an article about the way we can control the rendering of ligatures in CSS.

• “The New CSS Math: pow(), sqrt(), and exponential friends” by Daniel C. Wilson — a quick overview of a few newly available CSS math functions.

• “Accent Color Access, Revisited” by Matthias Zöchling — a shot post inspired by a Mastodon post by Miriam Suzanne about the differences between accent-color and accentColor.

There were also a few articles about Tailwind and utility-first approach last week, but I don’t want to share them as is without providing my own opinion alongside, and I didn’t have an opportunity to fully work on it.

One thing, as a semi-spoiler for it: look at the above list of articles people did write about CSS in a span of a week, and think about how many things described in them are possible to achieve with today’s utility-first approaches.