CSS

Set a variable in Pug, then create an inline script which sets that variable for using in JavaScript and use setProperty to pass it to CSS.

If you’ve applied `container` to an element, know that, for the next little while, that makes a new “formatting context” in Safari, and does not in Chrome or Firefox.

Safari is first to drop text-box in CSS, which plenty of people are excited for as it takes care of aligning text in many cases without the use of fragile magic numbers. They say: Now you can declare which font metric you want the browser to consider the edge of the text box when calculating […]

It’s quite fun to have an element react to another element scrolling in an unexpected way!

A “game” where you enter the right CSS to move to the next level, teaching you CSS anchor positioning along the way. In the vein of Flexbox Froggy, which I know clicked with a ton of people. Made by Thomas Park, who’s company Codepip actually makes a ton of these experiences.

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.