Recent CSS Bookmarks 15
- Published on:
- Categories:
- CSS 45, bookmarks 17
- Current music:
- Follow The Compass — Mountains
- Current drink:
- Yunnan tea
First things first
-
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.
-
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.
-
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.
-
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 aboutcolor-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: viaCanvas
andCanvasText
keywords, and via alight-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 withattr()
to get a duplicated text due to potential accessibility issues. -
“You Want
border-color: transparent
, Notborder: none
” by Dave Rupert — a post about an important aspect of styling borders (or absence of them) accessibly with theforced-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
andall: revert-layer
. -
“Animating clip paths on scroll with
@property
in CSS” by Brecht De Ruyte — an article about using scroll-driven animations for complexclip-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
andclip-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 aboutaspect-ratio
in relation to images, and one aspect of it related to their dimensions explicitly set in the HTML attributes.