Modern CSS to add to your CSS reset stylesheet

by Rob O'Leary on
A pigeon-holed style series of boxes houses collections of coloured paper

A CSS reset provides a consistent baseline set of styles that you can use across projects. As CSS evolves, there are more opportunities to improve your baseline styles. Here are 2 such cases:

CSS
/* 1. Improve line wrapping */

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

p {
  text-wrap: pretty;
}

/* 2. Animate intrinsic sizes */
:root {
    interpolate-size: allow-keywords;
}

Line wrapping

When a block of text is too long to fit on a single line, the default behaviour is to move the words that overflow onto the next line. This process repeats until none of the lines overflow. This default algorithm works well most of the time, however sometimes it produces somewhat ugly results. The standout scenario is when the last line has a single word, also known as an orphan.

a heading with 2 lines with a single word on the second line

If we even out the length of the lines, it is more legible:

a heading with 2 even length lines

We can do this with the text-wrap property!

For headings, it is recommended to use the balance value. It tries to make each line of text roughly the same length. The balance value has cut-off of 10 lines of text – that is why it is not advised to use it on paragraphs.

showing one heading with normal wrapping and a single word on the second line. a second heading is using text-wrap: balance, and it has 2 even lines.

For paragraphs, it is recommended to use the pretty value. This algorithm ensures that the final line of text has at least two words. It is faster but less comprehensive than balance.

The MDN docs for this property warn that using text-wrap: pretty can have a negative effect on performance. My experience is that the impact is imperceptible. Still, it’s a good idea to test this yourself and see how it performs on projects you are working on. I doubt this property will cause performance issues for most projects.

These 2 values for text-wrap are a recent addition. They can be used as a progressive enhancement. Browsers that don’t support it will fall back to the default behaviour. At the time of writing, these 2 values are supported as follows:

Animate intrinsic sizes

For a longgg time, intrinsic sizing keywords such as auto and min-content could not be animated. A common wish for CSS developers was to have a way to animate an element that is hidden or just added to the page, that has a height of zero initially, to whatever their natural intrinsic size is. UI components such as drop down menus and disclosure widgets are common examples. Often you hear people talking about this as the “transition to auto” or “animate to auto” problem.

The interpolate-size property enables animations and transitions to use intrinsic sizes through the allow-keywords value.

CSS
/* Opt-in the whole page to animations on instrinsic sizes */
:root {
    interpolate-size: allow-keywords;
}

This is a nice progressive enhancement to include in your CSS reset. Browsers that don’t support it will fall back to using no transitions. Currently, browser support for interpolate-size is limited to Chrome and Edge.

To give a super simple example of its usage, let’s say we want to have a section that limits text content to 3 lines, and we want to allow the user to reveal the rest of the content by pressing a “show more” button. A smooth transition would look like this:

Here is the demo:

A more germane example is to add a nice transition to the opening and closing of the <details> element, the native disclosure widget.

Tags