Recent CSS Bookmarks 15

Published on:

April 4, 2024

Categories:

CSS⁴⁰, bookmarks¹⁵

Current music:

Follow The Compass — Mountains

Current drink:

Yunnan tea

First things first:

1. I think it is obvious that the “weekly” format just doesn’t work for me: sometimes there are gaps, I don’t want to always publish on the same day, and so on. Moreover, I ended up sharing predominantly the more recent articles and posts I read, rather than some of the more archived ones, so replacing the “weekly” with “recent” makes sense.

2. While it was a month since the last bookmarks post, I don’t want it to be monthly, but something that I post more often.

3. Almost always, my bookmarks are all about CSS. This will continue, and it should be ok to just put this into the “series” name. I could still include other topics, but the main topic will be CSS. And for bigger compilations like this one, I could always add sub-categories.

4. Some other people have a separate category on their sites where they share bookmarks one by one, or automatically publish groups of them. For me, at least for now, it is more enjoyable to have a more curated list in the way I’m doing it. Maybe I will do something differently in the future, we’ll see.

Now, to the bookmarks themselves, 23 of them this time.

Colors and Themes

I gathered four links about colors and themes that compliment each other.

• “Using relative colors” by Chris Mills — a new MDN guide to relative colors in CSS, which are currently available in Chrome and Safari, but not in Firefox.

• “Creating color palettes with the CSS color-mix() function” by Michelle Barker — in contrast to the previous guide, this article is about color-mix() which is newly available in all major browsers for around a year already.

• “CSS color-scheme-dependent colors with light-dark()” by Bramus — a post about two ways to handle light and dark colors: via Canvas and CanvasText keywords, and via a light-dark() function.

• “Setting And Persisting Color Scheme Preferences With CSS And A ‘Touch’ Of JavaScript” by Henry Bley-Vroman — an article about using :has() for :checked <select>’s <option>s as a way to change the page’s color scheme.

Container Queries

All aspects of them, including container query length units and style queries!

• “An Interactive Guide to CSS Container Queries” by Ahmad Shadeed — a detailed article about the basics of container queries with many interactive examples. And multiple non-card use cases! I particularly liked one timeline example that combines a regular container query with a style query applied via a :has() quantity selector.

• “Add Superpowers to Your CSS Variables with Style Queries” by Jared White — a post about one use case for container style queries, where we could use them for reusable media query values, among other things.

• “Algorithmic Functional CSS” by Nathan Knowler — a post about using algorithms that let the browsers provide inputs to them, with an example of a dynamic spacing scale based on container query length units.

Accessibility

A few articles about various aspects of CSS in relation to accessibility.

• “On popover accessibility: what the browser does and doesn’t do” by Hidde de Vries and Scott O’Hara — an article about the ways Popover API interacts with accessibility of the popovers and their associated buttons.

• “The problem with data-attributes for text effects” by Mandy Michael — a post advising against using content property with attr() to get a duplicated text due to potential accessibility issues.

• “You Want border-color: transparent, Not border: none” by Dave Rupert — a post about an important aspect of styling borders (or absence of them) accessibly with the forced-colors mode in mind.

• “The Case for Defining Base Font-size” by Mike Mai — a post about not using absolute units for the font-size on the root of your document, and a way to ensure this with CSS layers.

Grids

Ok, just two articles, but I just wanted to have a section for them. Grids are cool.

• “Building a Rock Solid Auto Grid” by Nils Binder — an article that goes step-by-step over a creation of a customizable grid, combining multiple CSS grid aspects.

• “Making room for long list markers with subgrid” by Noah Liebman — a post about how we can use subgrids to style lists in a way that will accommodate markers of any length.

Future CSS

Things that are not available in all browsers, but, hopefully, will be soon. Some of them could be used as a progressive enhancement, some of them — not.

• “What You Need to Know about Modern CSS (Spring 2024 Edition)” by Chris Coyier — while this compilation contains some things that are newly available in all major browsers today, many of these can be still tricky to use in production. Overall, a good summary of what CSS will allow us to do in the future.

• “Steal this popover code” by Adam Argyle — a post about a way to animate the entry and exit states of a popover via discrete display and overlay transitions, as well as a @starting-style rule.

• “How to Kill the Cascade” by Robin Rendle — an article describing one way to isolate the styles of some element in the light DOM by using an implicit @scope and all: revert-layer.

• “Animating clip paths on scroll with @property in CSS” by Brecht De Ruyte — an article about using scroll-driven animations for complex clip-path() that use multiple CSS variables.

Everything Else

These cover so many topics! I could probably spend more time thinking about how I could put these into different boxes as well, but oh well!

• “Modern CSS Tooltips And Speech Bubbles (Part 2)” by Temani Afif — a continuation of the article about doing speech bubbles with border-image and clip-path, this time making things more complicating as a way to solve having a border on the tooltips that goes continuously around the tooltip’s tip, solves via pseudo-elements and some math.

• “Some little ways I’m using CSS :has() in the real world” by Andy Bell — a post with several examples of how :has() can be used to solve various practical problems.

• “CSS Button Styles You Might Not Know” by David Bushell — a post about a few not very common things that can be used to adjust the button styles.

• “Creating 3x5.pics” by Anne Sturdivant — a case study for a specific index card blog design, using properties as aspect-ratio, text-orientation among more regular flex and grids, and describing the thought process behind some design and tech decisions.

• “Pure CSS element distortion (flattened 3D skew with matrix3d())” by Ana Tudor — a StackOverflow answer and a CodePen demonstration of a way to get a trapezoid transformation for an element by using a flattened 3D transform.

• “aspect-ratio Gotcha!” by Matthias Zöchling — a blog post about aspect-ratio in relation to images, and one aspect of it related to their dimensions explicitly set in the HTML attributes.