CSS in Depth Addendum

As I wrote the both editions of CSS in Depth, I worked hard to stay on top of emerging features in CSS and where browsers were at in regards to adding support. The book writing process is lengthy, so this sometimes involved making my best estimates about what features would have browser support in at least one major browser by the time the book went to print.

This approach enabled me to be one of the first books to print covering significant CSS features like grid (in the first edition), @scope, nesting, and color blending (in the second), among many other smaller features. Overall, I’m happy with the way I handled this, and I’m proud to have such a cutting-edge book available now.

However, there are a few smaller features I left out of the second edition that I now wish I hadn’t. I was aware of them while writing, but I simply underestimated how rapidly browsers were going to implement them. Some of these had not even been proposed when I started on the second edition, and yet they already have at least some browser support, only 18 months later.

If you’ve read, or plan to read, CSS in Depth, here are three brand new features that didn’t make it into the book, but I think are worth knowing (and the chapter numbers in the Second Edition where I would put them).

New text-wrap options ¶

The text-wrap property now supports two new values, balance and pretty.

Applying text-wrap: balance to an element will adjust line wrapping of text so each line is roughly the same length, rather than putting as much text as possible on each line but the last. This is most useful for headings or other short pieces of text.

Using text-wrap: pretty will mostly behave like text-wrap: wrap, except it will prevent an “orphan” (a lone word on its own line) from the last line of each paragraph.

For a deeper look at these, check out this article from Stephanie Stimac. Browser support is still pretty new, but progressive enhancement is easy. You can pretty safely add this sort of code to your stylesheet, and it will improve the typography in browsers that support it:

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

Where it belongs: Chapter 12, Typography and Spacing

Easier dark mode with light-dark() ¶

We have a lot of power in CSS now to support both light and dark mode based on user preferences. I cover aspects of this in several places throughout my book, but some of the techniques used are a little verbose.

The light-dark() function allows you to provide a color for both light mode and dark mode in one single line:

.widget {
  background-color: light-dark(#eee, #222);
  color: light-dark(#222, #eee);
}

This sets near-black text (#222) on a light gray background (#eee) in light mode, but reverses the colors in dark mode. The browser decides which of the two values to use based on the current value of the color-scheme property.

See Adam Argyle’s article for several examples and more details on this function. This is in the latest version of all major browsers now, but it’s probably a bit too soon to rely on it quite yet, at least without some sort of fallback plan.

Where it belongs: Chapter 11, Color and Contrast

Anchor positioning ¶

Anchor positioning is a brand new method that allows you to place an absolutely positioned element relative to another element. Where older methods required placement to be relative to some ancestor element, this allows much more flexible positioning.

This feature is a bit more complicated than those above, and require a deeper dive to fully understand. Here is a CSS anchor positioning guide I recommend.

This feature emerged rapidly. It was first proposed in May of 2023, and arrived in Chrome only a year later. We’re still waiting on other browsers to add support, but this is a feature worth keeping an eye on.

Where it belongs: Chapter 6, Positioning and Stacking Contexts