CSS

Got an old “modal” design? Now might be the time to upgrade it to a

Blobs! Gooey weird shapes you can fill with any background and even animate.

Google Translate doesn’t change the `dir` of a site when translating from LTR to RTL… but you could.

When I first looked at the new color contract function in CSS, the words were reversed, so that’s notable. It’s contrast-color() now, and starting it’s life in Safari Technology Preview. Now it only takes one argument, a color, and you get back either black or white (rather than providing your own color choices). Once this […]

Rachel Andrew notes an excellent new feature of CSS that Chrome is dropping first: reading-flow and reading-order. There are CSS features that can move elements to places that make what the tabbing order (thus “reading order”) super different than what the visual order of the elements is. This can be an awkward jumpy-aroundy experience and […]

A container query can contain viewport units, meaning you can compare the window vs the element and make choices.

Use the `arc` command within the `shape()` function we can draw a line that follows a circle from one point to the next, controlling the direction.

In some random playing around, I saw that the ::first-letter pseudo-element is happy to match an emoji. And then initial-letter is happy to bump it up in size which feels like an easy way to make a kinda fun looking list that would survive syndication and such. Firefox doesn’t support initial-letter but whatever, it’s easily […]

Without the new property margin-trim, I’m forever doing :last-child { margin-block-end: 0; } and things like that to prevent an elements margin from combining with a parent elements padding to make too much space. The fact that we can avoid the extra awkward targeting and removal rule with this is great. I’ll stick by Coyier’s […]

Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.