This property lets you control the space above and below text, for example <h1>, <button> and <p>. Every font produces a different amount of this block directional space which contributes to the element's size. This chaotic space contribution is not easily measured, and has been impossible to control until now. The font knows, now CSS knows!

A few months ago, I shared a blog post outlining the current state of the customizable select prototype and asking for developer feedback. Since then, a lot has changed! And for the better. There were a few things re-named, and significant changes to the user agent stylesheet. Now that this feature has evolved and is closer to shipping, here is a list of updates since the RFC.

I was pleasantly surprised by the results in Chromium browsers at medium and large container widths. Hyphenation seems conservative and readable, yet there are no unsightly gaps or “rivers” between words. Safari and Firefox hyphenate a bit more frequently, but not distractingly so.

We have a sliding effect where the blue rectangle adjusts to fit perfectly with the text content over a nice transition. If you are new to anchor positioning, this example is perfect for you because it’s simple and allows you to discover the basics of this new feature.

10 years after scroll-driven animations were first proposed, they’re finally here — no JavaScript, no dependencies, no libraries, just pure CSS.