Recent CSS Bookmarks 16

Published on:

May 18, 2024

Categories:

CSS⁶¹, bookmarks²¹

Current music:

Every Gentle Air — The Sower

Current drink:

Sencha tea

Another big batch of CSS bookmarks: more than a month worth of them. As usual, with that number of them (32!), I grouped them into eight sections.

Colors and Themes

• “On compliance vs readability: Generating text colors with CSS” by Lea Verou — a detailed article about a technique that uses the relative color syntax to approximate the future color-contrast() function.

• “Recursion! In the stylesheet” by Noah Liebman — an article about how we can use color-mix() to retrieve some color from a specific point in any linear-gradient, using recursively nested color-mix() for more complex cases.

• “What I’ve learned about CSS color-scheme and friends.” by Anne Sturdivant — a detailed post about how she did set up light and dark mode in her blogs.

• “CSS Color Modules and Changes, Part I” by Anne Sturdivant — a compilation of information about various color features, new and old, with some thoughts around them.

• “What if you had real control over Light Mode / Dark Mode on a per-site basis?” by Bramus — a post about the experimental Web Preferences API and a Chrome extension Bramus did create that allows to use this API to switch between themes on sites that support them. Hopefully, browsers will provide this natively — I too think that it is the job for the browser to provide controls for changing themes, similarly to how it provides control over the font-size and zoom.

• “What’s Going On in Dark Theme / Light Theme Land” by Chris Coyier — a post with some thoughts and links (including those two above) about theming and scheming.

CSS Layouts

This month is full of talks about the future of CSS “Masonry” layout. There is a prototype implementation in Safari and Firefox, and an alternative proposal from the Chrome team. Both sides did post their posts presenting their arguments, and asking for the developer feedback in the CSSWG issues. It is a lot!

• “Help us invent CSS Grid Level 3, aka ‘Masonry’ layout” by Jen Simmons — an article by the WebKit team, asking many questions, and providing multiple masonry use cases.

• “An alternative proposal for CSS masonry” by Rachel Andrew — an article from Chrome’s team, explaining their alternative proposal.

Masonry was not the only layout-related topic in the last month, there were some other articles as well.

• “Printing music with CSS Grid” by Stephen Band — an article about using CSS grids to create a layout for music sheets. I don’t agree with the choice of using data-attributes to pass data to CSS (inline styles and custom properties are a much better choice), but otherwise a nice approach to an unusual use case.

• “Handling The Indentation of a Treeview Component” by Ahmad Shadeed — a post with an exploration of several implementations of nested tree lists, specifically, how spacing was done in them.

Typography

• “Use CSS to boost the font size of emoji with no extra markup” by Terence Eden — a post about how we can modify some font parameters by applying a unicode-range to a @font-face, with an example of emoji fonts and changing their size while not affecting other typefaces.

• “One line of CSS to make San Francisco more accessible” by Mike Mai — a post and a CodePen about how it is possible to apply stylistic alternates to a font (if it provides them) to make it more accessible. Only some fonts will provide this as an option, and there are some alternative ways to do the same mentioned in the thread.

• “Are Web-Safe Fonts still relevant in 2024?” by Oliver Schöndorfer — a post about how the old concept of “web-safe fonts” cannot be applied today, especially due to which fonts are available on the popular mobile platforms.

• “‘Multiplexed’ Fonts Have a Cool Superpower” by Chris Coyier — a post about multiplexed fonts and how they can be used in places where we could want some dynamic font feature’s change not result in a layout change.

• “Fluid Design with CSS Round” by George Francis — a post about one use-case for a round() function for a dynamic line-height that conforms to a certain grid.

Future CSS

• “Time-based CSS Animations” by Yuan Chuan — an article about how we could use transitions on the registered custom properties to create a timer which could be used as the source for transitions and animations. @property is almost here, and with it so many of different techniques, including this one!

• “Introducing the CSS anchor positioning API” by Una Kravets — a detailed article about anchor positioning in the state it is shipping in Chrome 125.

Selectors

• “Combining CSS :has() And HTML <select> For Greater Conditional Styling” by Amit Sheen — an article about how we can style things based on the value of some select using the :has() and other selectors in combination with it.

• “Testing HTML With Modern CSS” by Heydon Pickering — a post about how we can use complex CSS selectors to visually highlight various issues in HTML.

• “How would you build Wordle with just HTML & CSS?” by Scott Jehl — a post presenting one way we could use form validation selectors to approach building a Wordle clone.

• “Misconceptions about CSS Specificity” by Bramus — a post explaining a few things people often misunderstand in relation to specificity.

• “Superior Range Syntax” by Matthias Zöchling — a post about how the new syntax for container and media queries allows for more precise and reliable comparisons.

Shapes and Effects

• “The Modern Guide For Making CSS Shapes” by Temani Afif — an article with an impressive collection of different shapes and descriptions of how to achieve them in CSS, including many useful tricks and explanations for some of the trigonometry that frequently goes with them.

• “CSS Tricks To Master The clip-path Property” by Temani Afif — an article presenting one good way to approach the clip-path’s polygon() value by always starting from a rectangle.

• “Things That Can Break aspect-ratio in CSS” by Chris Coyier — a post with an overview of different things that could “break” the aspect-ratio property’s effect in CSS.

• “Pure CSS halftone effect in 3 declarations” by Ana Tudor — a thread about a technique to achieve the halftone effect by overlaying gradients and using a contrast filter on them, with multiple live examples.

Everything Else

• “Your page can’t change media features” by Kilian Valkhof — a post about one important aspect of how media queries work, and how the page itself will never change them (yet).

• “The slow death of CSS vendor prefixes” by Ollie Williams — a post about how even though modern browsers stopped introducing new prefixes for properties and values, some of them are still necessary for achieving some effects that do not yet have a more standard implementation.

• “Chill Scroll Snapping: Article Headers” by Chris Coyier — a post about an idea to use scroll-snap for snapping headers. Not sure the mandatory is the best choice there, but I can see a case for optional snapping in some designs.

My Articles

I did publish three articles on my main site in April:

• “Layered Toggles: Optional CSS Mixins” — an article about a technique where we can use @layer, rever-layer and cyclic toggles to create reusable CSS mixins.

• “Alternating Style Queries” — an article about a technique using container style queries that allows us to alternate some styles based on their nesting.

• “Self-Modifying Variables: the inherit() Workaround” — an article with a technique based on the one described in the previous article that allows us to use style queries as a way to implement something similar to the inherit() function.

If you did miss any of them, I highly recommend you to check them out.