Useful CSS to use in your next project

I recently redesigned my personal website at nuotsu.dev and utilized some niche and cutting-edge CSS techniques to create the design I envisioned. In this post, I'll walk through a few of the most interesting CSS tricks I employed.

Here's my redesigned personal website in an iframe 👇

Accounting for iPhone Viewport with env(safe-area-inset-*)¶

To properly handle the iPhone viewport, especially in landscape mode with the curved screen edges and the Home Indicator bar (i.e. the bar to swipe up to return to the homescreen), I used the env(safe-area-inset-*) CSS function in combination with the viewport-fit=cover meta tag.

This allowed me to add the necessary padding to avoid content being obscured by the iPhone's unique screen shape and Home Indicator area. By accounting for the safe areas on all four edges of the viewport, I was able to create an optimal full-screen viewing experience without any content being cut off.

Gradient Masking for Overflow Elements¶

For elements that overflow their container, I wanted to apply a nice gradient masking effect. I achieved this using:

ul {
  mask: linear-gradient(to right, black var(--via, 50%), transparent);
}

This masks the overflowing content with a gradient that fades out, creating a slick visual effect.

Use with backdrop-filter: blur() to create progressive blurs!

Using ch and lh Units for Typography¶

Instead of always relying on px or rem, I utilized the ch and lh units in places:

• ch equals the width of the "0" character
• lh equals the line height

Using these units helped maintain typographic proportions regardless of font-size.

Viewport Units to Handle iPhone Curvature¶

To place an element just below where the screen curvature starts on an iPhone in landscape mode, I used this clever combo of viewport units:

header {
  position: sticky;
  top: calc(100dvh - 100svh);
}

dvh and svh are new viewport units that account for dynamic viewport sizes, making them perfect for this use case.

Hover Styles Using :has()¶

The :has() pseudo-class is a powerful way to apply styles based on whether an element contains a match for the passed selector. I used it to do things like:

/* style the parent when a child is hovered */
li:has(span:hover) {
  background-color: var(--color-ink);
  color: var(--color-canvas);
}

/* style other elements when a table row is hovered */
body:has(tr[data-year='2025']:hover) li:not([data-year='2025']) {
  opacity: 0.5;
}

This opens up a lot of interesting styling possibilities based on hovering descendant elements.

Showing an Easter Egg in Landscape Mode¶

Using the orientation media query, I display a little "easter egg" message only when on a mobile device in landscape orientation:

@media (orientation: landscape) and (hover: none) and (width < 64rem) {
  body::after {
    content: "Did you find the easter egg?";
  }
}

This was a fun way to add a little whimsy for users who go landscape!

More CSS Magic¶

Those are just a few highlights of the interesting modern CSS I got to use in this redesign. It's an exciting time to be a web developer with all the new capabilities shipping in browsers! Let me know if any of these techniques were helpful to you.

Liked this content? Check out my SanityPress starter template to see more of my front-end development work in action!