We continue our journey through the transformative world of modern CSS upgrades!

color-scheme

You may be familiar with the prefers-color-scheme media query to customize dark and light themes. The CSS property color-scheme is an opt-in to adapting browser UI elements including form controls, scrollbars, and CSS system colors. The adaptation asks the browser to render those items with either a light or dark scheme, and the property allows defining a preference order.

If you’re enabling adapting your entire application, set the following on the :root, which says to preference a dark theme (or flip the order to preference a light theme). 

:root {
    color-scheme: dark light;
}

You can also define color-scheme on individual elements, such as adjusting form controls within an element with a dark background for improved contrast.

.dark-background {
    color-scheme: dark;
}

accent-color

I’m sure that at some point you’ve wanted to change the color of checkboxes or radio buttons. What you’ve been looking for is accent-color!

With this property, you can modify the :checked appearance of radio buttons and checkboxes and the filled-in state for both the progress element and range input. The browser’s default focus “halo” may also be adjusted if you do not have another override.

:root {
  accent-color: mediumvioletred;
}

Consider adding both accent-color and color-scheme to your baseline application styles for a quick win toward custom theme management.

width: fit-content

One of my favorite CSS hidden gems is the use of fit-content to “shrink wrap” an element to its contents.

Whereas you may have used an inline display value such as display: inline-block to reduce an element’s width to the content size, an upgrade to width: fit-content will achieve the same effect. The advantage of width: fit-content is that it leaves the display value available, thereby not changing the position of the element in the layout unless you adjust that as well. The computed box size will adjust to the dimensions created by fit-content.

Let’s see how it works

.fit-content {
  width: fit-content;
}

overscroll-behavior

The default behavior of contained scroll regions – areas with limited dimensions where overflow is allowed to be scrolled – is that when the scroll runs out in the element, the scroll interaction passes to the background page. This can be can be pretty frustrating for your users.

Use of overscroll-behavior: contain will isolate the scrolling to the contained region, preventing continuing the scroll by moving it to the parent page once the scroll boundary is reached. This is useful in contexts such as a sidebar of navigation links, which may have an independent scroll from the main page content, which may be a long article or documentation page.

.sidebar, .article {
  overscroll-behavior: contain;
}

text-wrap

One of the newest properties (as of 2023) is text-wrap, which has two values that solve the type-setting problem of unbalanced lines. This includes preventing “orphans,” which describes a lonely word sitting by itself in the last text line.

The first available value is balance, which has a goal of evening out the number of characters per line of text.

There is a limitation of six lines of wrapped text, so the technique is best used on headlines or other shorter text passages. Limiting the scope of application also helps limit the impact on page rendering speed.

:is(h1, h2, h3, h4, .text-balance) {
  text-wrap: balance;
​
  /* For demonstration */
  max-inline-size: 25ch;
}

The other value of pretty specifically addresses preventing orphans and can be more broadly applied. The algorithm behind pretty will evaluate the last four lines in a text block to work out adjustments as needed to ensure the last line has two or more words.

p {
  text-wrap: pretty;
​
  /* For demonstration */
  max-inline-size: 35ch;
}

Hope this helps you! Have I missed anything? Let me know in the comments below :)

In the ever-evolving landscape of web development, the language of design undergoes constant refinement. CSS, the style sheet language that breathes life into the digital realm, is no exception. Sometimes, improving your CSS just takes a one-line upgrade or enhancement! Learn about 10 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience. Fasten your seatbelts as we embark on a journey through the transformative world of modern CSS upgrades!

aspect-ratio

As of September 2021, the aspect-ratio property is stable in evergreen browsers and is the only property needed to define an aspect ratio. For an HD video, you can just use aspect-ratio: 16/9. For a perfect square, only aspect-ratio: 1 is required since the implied second value is also 1 .

.aspect-ratio-hd {
  aspect-ratio: 16/9;
}
​
.aspect-ratio-square {
  aspect-ratio: 1;
}

An applied aspect-ratio is forgiving and will allow content to take precedence. This means that when content would cause the element to exceed the ratio in at least one dimension, the element will still grow or change shape to accommodate the content. To prevent or control this behavior, you can add additional dimension properties, like max-width, which may be necessary to avoid expanding out of a flex or grid container.

/* Applied to the flexbox children which have a size constraint from their parent */
.aspect-ratio-square {
  aspect-ratio: 1;
}

object-fit

The use of object-fit causes an img or other replaced element to act as the container for its contents and have the contents adopt resizing behavior similar to background-size.

While there are a few values available for object-fit, the following are the ones you’re most likely to use:

• cover – the image resizes to cover the element, and maintains its aspect-ratio so that the content is not distorted
• scale-down – the image resizes (if needed) within the element so that it is fully visible without being clipped and maintains its aspect-ratio, which may lead to extra space (”letterboxing”) around the image if the element has a different rendered aspect-ratio

In either case, object-fit is an excellent property pairing with aspect-ratio to ensure images are not distorted when you apply a custom aspect ratio. Let’s look at an example

.image {
  object-fit: cover;
  aspect-ratio: 1;
​
  /* Optional: constrain image size */
  max-block-size: 250px;
}

margin-inline

One of many logical properties, margin-inline functions as a shorthand for setting the inline (left and right in horizontal writing modes) margin.

The replacement here is simple:

/* Before */
margin-left: auto;
margin-right: auto;
​
/* After */
margin-inline: auto;

text-underline-offset

The use of text-underline-offset allows you to control the distance between the text baseline and the underline. You can use this offset to clear descenders as well as improve legibility, particularly when links are grouped in close proximity, such as a bulleted list of links.

This upgrade may replace older hacks like a border or pseudo-element, or even a gradient background

a {
    text-underline-offset: 0.25em;
}

outline-offset

We’ve been using different hacks including box-shadow or perhaps a pseudo-element to supply a custom outline when you wanted distance between the element and outline on focus?

The long-available outline-offset property may be one you missed, and it enables pushing the outline away from the element with a positive value or pulling it into the element with a negative value.

In the example below, the gray solid line is the element border, and the blue dashed line is the outline being positioned via outline-offset.

.outline-offset {
  outline: 2px dashed blue;
  outline-offset: var(--outline-offset, .5em);
}

One key point is that outlines are not computed as part of the element’s box size, so increasing the distance will not increase the amount of space an element occupies. This is similar to how box-shadow is rendered without impacting the element size as well.

Stay tuned for part 2!