CSS

The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.

The definitive guide to using public CSS Custom properties to configure web components externally. Surely no one will ever write about this topic again.

The CSS corner-shape property (very new! only in Chrome Canary!) is useful in basic use cases, for advanced shape making, and the superellipse() function is *extra* powerful.

There's a newish CSS feature called hyphens that specifies how you want words to be hyphenated when the text wraps. But if you use it, you're going to need to make sure you're also correctly identifying the language. And to understand why that matters, we need to talk about words and syllables.

subgrid in CSS is really handy for getting a nice level of design detail in place, especially in terms of maintaining a nice reading line, as Andy shows in this article.

Styling the space between layout items — the gap — has typically required some clever workarounds. But a new CSS feature changes all that with just a few simple CSS properties that make it easy, yet also flexible, to display styled separators between your layout items.

Heydon Pickering takes a fresh look the Every Layout Sidebar layout, 6 years on, to see if modern CSS selectors can improve it.

If you’ve ever tried to implement consistent shadows across multiple platforms and design tools, you may have noticed that they don’t look the same. Thankfully, it is possible to get them all to match.

CSS can be unpredictable — and specificity is often the culprit. Victor Ayomipo breaks down how and why your styles might not behave as expected, and why understanding specificity is better than relying on `!important`.

Have you ever wished you could write simple CSS to declare a color, and then have the browser figure out whether black or white should be paired with that color?

If you write a lot of CSS, you are familiar with those moments when you aren’t quite sure how to accomplish what you want to accomplish.

– The personal website of Sara Soueidan, inclusive design engineer

Tips and tricks on utilizing the CSS backdrop-filter property to style user interfaces. You’ll learn how to layer backdrop filters among multiple elements, and integrate them with other CSS graphical effects to create elaborate designs.

Exploring the modern attr() in CSS

Learn about CSS carousel features by changing options and seeing code change.

Last week, I finally had a reason to use the newish :is() CSS pseudo-class, and wow is it glorious! Today, I want to show you how it can dramatically reduce selector complexity. Let’s dig in! What :is() does The :is() pseudo-class accepts a comma-separated list of selectors, and can be used to group them together. For example, these two selector strings do the same thing… h1, h2, h3, h4, h5, h6 { font-weight: bold; } :is(h1, h2, h3, h4, h5, h6) { font-weight: bold; } You’re probably look at this and thinking…

It's not just a shorthand for anchor()

An interactive guide to learn CSS Relative Colors.

CSS functions like :is(), :not() and :has() are powerful tools that make it much easier to select elements specifically. We've written before about how ::where…

The & is a powerful addition to CSS, allowing us to craft selectors without repetition and helping organization and understanding.

We've been able to get the length of the viewport in CSS since... checks notes... 2013! Surprisingly, that was more than a decade ago. Getting the

Learn how overflow: clip works in CSS.

How’d you like to use CSS to easily create a border from an image or gradient?

It's now possible to animate to or from height: auto and other intrinsic sizes.

A new CSS function that returns one of two color values based on the current color scheme.

One of my favorite not-so-new aspects of CSS is the :empty pseudo-class. You can use this to target elements that have no children—either child elements or whitespace and text nodes—and style them differently than they would be otherwise. For example, imagine you have some CSS to layout items in a row using flexbox… .grid-flex { display: flex; gap: 1rem; } .grid-flex div { background-color: #ffdc00; border: 1px solid #665800; color: #665800; padding: 1rem 2rem; text-align: center; } And a row of items generated from an API or database or something.