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, CSS Layouts, Typography, Future CSS, Selectors, Shapes and Effects, Everything Else and My Articles.
If you're only gonna watch one thing this weekend, watch this amazing talk about the history of styling in the web and the guiding principles of how browsers work with regards to styling by @mia from last week's 11ty conference.
We really need to gather various #typography related #CSS properties that are scattered across different browsers without full support (or with just partial support) and make it into an #interop2025 focus area.
Like ascent-override (please, Safari!)
Or font-size-adjust (come on, Chrome!)
Or… initial-letter (hey, Firefox!), though, there are also so many ::first-letter issues!
Or text-box-trim & text-box-edge (ok, these are only there in Safari TP)
It includes:
🔥 New #CSS Technique: How can we use widely supported CSS features to automatically pick a text color that is readable over an arbitrary background?
🔥 Original research: What lightness ranges correspond to what color contrast compliance & readability buckets? How are these affected by additional constraints (gamut, chroma, hue)?
Are there issues or surprises you've run into when using #CSS container queries in practice? Let us know, and we'll try to cover them in the @OddBird Winging It live stream tomorrow!
Unexpected things can happen when you add containment (some elements completely collapse)! @stacy and I will discuss #CSS Container Queries in the real world on @OddBird's Winging It livestream this Thursday:
Turn a simple input into single-digit inputs using a few lines of CSS. Useful for One-Time Password fields.
✅ No extra element (only one input element)
✅ Less than 15 CSS declarations
✅ Optimized with CSS variables
Can someone explain to me why we don’t have media queries for browser engines in #CSS? Just pride?
I get that we, in a perfect world, wouldn't need it - because the standards were strong enough. But I live in the real world, and would prefer not to write shit like this: