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!
> Extremely annoying #CSS gotcha: container query units seem to be relative to the content-box dimensions. And there doesn't seem to be any way to make them relative to the border-box dimensions... which is what I need to solve other problems caused by container queries. 😭
On s'occupe de la partie serveur du site de loterie à partir de 10h30 sur ma chaîne #Twitch. Codage en #PHP maintenant que la partie #HTML/#CSS et #JavaScript est bouclée.
Hier j'ai fait un peu de #JS, ce ne fut pas si laborieux que ça. Voici comment seront choisis les numéros de ticket de loterie par les participants : https://youtu.be/vdTp7XzNmBE
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