CSS

You can make a table responsive by letting it horizontally scroll. But if you do that, make sure any paragraph style text isn’t any wider than the screen.

What is a good contrast text color on a black background? White. What about on a white background? Black. What about on #f06d06? Less clear. Devon Govett posted a good trick to having CSS pick for you, which works across browsers today. Lea Verou has a much deeper dive. There is supposed to be a […]

Typically, buttons are either pressed or they aren’t. But as long as you handle it accessibly, you can make a group of radio inputs look like a multi-state button with some CSS trickery.

A halftone is a pattern of dots that vary in size and spacing. It’s a printing technique that you normally don’t see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be done in CSS alone, starting quite simply!

Jen Simmons introduces the hot-off-the-presses background-clip: border-area; which can produce some pretty compelling and real-world designs with a few lines of sensible CSS. I suspect our recent background-clip trickery would be simplified with this new value because we wouldn’t have to put a fake background over the padding-box to get the effect.

A CSS Custom Property can be used to tweak colors darker when shown on light and lighter when shown on dark, making them pop in both cases.

There are no obvious CSS properties or values for making a @keyframe animation wait between iterations, or have a pause before starting. But Nils Riedmann cooked up a clever way to do it using linear() animation timing. I think this is cleaner than faking it with multiple benign keyframe steps. Remember linear is not the […]

One approach to color modes it to do it all in CSS with prefers-color-scheme media queries and/or the light-dark() function. A user toggle can be a future improvement.

A single HTML `progress` element can have quite an elaborate design with custom colors, a tooltip showing the active %, and even an entrance animation.

Sacha Greif introducing the State of CSS 2024 results: Let me make a prediction: we’ll look back at 2024 as the turning point between “CSS Classic” and “New CSS”. That feels intuitively true to me, except we won’t use those names. Check out work done on CSS Levels which define CSS4 and CSS5 “eras” (which […]