9 Ways to Upgrade Your Web Design with the Latest CSS

Stable Upgrades

1. Aspect Ratio: `aspect-ratio`

Have you used padding hacks to maintain the ratio of videos or images? Not anymore. With the `aspect-ratio` property, you can easily set the ratio.

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

.aspect-ratio-square {
  aspect-ratio: 1;
}

Using `aspect-ratio` keeps the layout stable while adjusting the content.

2. Object Fit: `object-fit`

If you’ve struggled to fit images or videos into a container, try using the `object-fit` property. This property helps images fit naturally into the container.

.image {
  object-fit: cover;
  aspect-ratio: 1;
  max-block-size: 250px;
}

Now images display in the desired ratio without distortion.

3. Logical Margins: `margin-inline`

Have you been setting `margin-left` and `margin-right` separately? Simplify with `margin-inline`.

/* Before */
margin-left: auto;
margin-right: auto;

/* After */
margin-inline: auto;

4. Underline Offset: `text-underline-offset`

Adjusting the position of underlines can improve readability, especially for text with many links.

a:not([class]) {
    text-underline-offset: 0.25em;
}

This property allows you to adjust the distance between text and underline for a cleaner visual effect.

5. Outline Offset: `outline-offset`

Set the distance between the outline and the element to make the focus state more noticeable.

.outline-offset {
  outline: 2px dashed blue;
  outline-offset: .5em;
}

Useful for making the focus state more prominent.

6. Scroll Margin: `scroll-margin-top`

Adjust the scroll position for anchor links on pages with fixed navigation.

[id] {
    scroll-margin-top: 2rem;
}

Set the scroll position to avoid overlap with fixed navigation.

7. Overscroll Behavior: `overscroll-behavior`

Prevent scroll from propagating to parent elements within scrollable areas.

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

This property helps isolate scroll areas, reducing user confusion.

8. Text Wrapping: `text-wrap`

Solve unbalanced line break issues with the `text-wrap` property.

:is(h1, h2, h3, h4, .text-balance) {
  text-wrap: balance;
}

Improve text readability with this property.

9. Scrollbar Gutter: `scrollbar-gutter`

Prevent layout changes caused by scrollbars.

:root {
  scrollbar-gutter: stable both-edges;
}

Reserve space for scrollbars in advance to maintain layout consistency.

Conclusion

There are many other modern CSS properties that can enhance your web design in various ways. Apply these properties to your projects and see how small changes can make a big difference.