"Alvaro Montoro explains how the random() and random-item() CSS functions work. As it turns out, they're actually quite complex: width: random(--w element-shared, 1rem, 2rem); color: random-item(--c, red, orange, yellow, darkkhaki);"
"Stuart Robson talks about backdrop-filter. It's not a new CSS property, but it's very useful and hardly ever talked about. In fact, up until now, I thought that it was for the ::backdrop pseudo-element, but we can actually use it to create all kinds of background effects for all kinds of elements."
"font-variant-numeric: tabular-nums is another one. This property and value prevents layout shift when numbers change dynamically, as they do with live clocks, counters, timers, financial tables, and so on."
"Godstime Aburu does a deep dive on the Popover API, a new(ish) but everyday web platform feature that simplifies tooltip and tooltip-like UI patterns, but isn't without its nuances."
This collection covers both established and emerging CSS techniques for web developers. The random() and random-item() functions provide complex randomization capabilities for styling. Folded corners can be created using clip-path instead of images or box-shadow. The backdrop-filter property creates background effects beyond its original ::backdrop pseudo-element use. Font-variant-numeric: tabular-nums prevents layout shifts in dynamic number displays like clocks and financial tables. The Popover API simplifies tooltip and popup UI patterns with built-in web platform support. Anchor positioning offers new layout possibilities. Additional topics include scroll-triggered animations, customizable select elements, and the :open pseudo-class selector.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]