TIL: Two Modern CSS Features That Simplify Everyday Styling

CSS keeps evolving, and sometimes the most interesting improvements aren't flashy animations or entirely new layout systems. They're small features that remove workarounds we've been writing for years.

Two recent additions caught my attention: CSS typed arithmetic and margin-trim.

They solve completely different problems, but both make everyday CSS a little simpler.

1. CSS Typed Arithmetic: Dividing Values With Units

We've been using calc() for years to perform calculations like:

.container {
  width: calc(100% - 2rem);
  padding: calc(1rem * 2);
}

But until recently, there was an interesting limitation.

You couldn't divide two values containing units, even when those units were compatible.

For example:

/* Previously invalid */
calc(200px / 4px)

Mathematically, the result is straightforward:

200px / 4px = 50

The units cancel each other out, leaving a regular number.

CSS typed arithmetic now supports this behavior.

That means we can write:

:root {
  --viewport-width: calc(100vw / 1px);
}

If the viewport is 1440 pixels wide, --viewport-width evaluates to the unitless number 1440.

And because the result is a number, we can use it in properties that expect numeric values.

A practical example

Imagine we want an element's opacity to change based on the viewport width.

.hero {
  opacity: 1;

  opacity: clamp(
    0.4,
    calc(100vw / 1200px),
    1
  );
}

Here's what happens:

• At a viewport width of 480px, opacity becomes 0.4.
• At 900px, opacity becomes 0.75.
• At 1200px or wider, opacity remains 1.

No JavaScript, no resize event listeners, and no media queries.

The first opacity declaration also provides a fallback for browsers that don't support typed division.

This isn't necessarily something we'd use everywhere. Media queries and container queries are still better choices for many responsive layouts.

But being able to convert compatible CSS dimensions into unitless values opens up some interesting possibilities.

Browser support: With Firefox 158 joining Chrome and Safari, CSS typed arithmetic became Baseline Newly Available in October 2026.

2. margin-trim: Removing Unwanted Child Margins

Here's another familiar CSS problem.

Imagine a content container with several paragraphs:

<div class="content">
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</div>

We want spacing between the paragraphs, but we don't want extra margins at the beginning or end of the container.

A common solution looks like this:

.content p {
  margin-block: 1rem;
}

.content p:first-child {
  margin-block-start: 0;
}

.content p:last-child {
  margin-block-end: 0;
}

It works, but we need additional selectors just to manage spacing at the container's edges.

With margin-trim, we can simplify this:

.content {
  margin-trim: block;
}

.content p {
  margin-block: 1rem;
}

That's it.

The container trims the block-axis margins of its children where they meet its edges, without removing the spacing between paragraphs.

We can also be more specific:

.content {
  margin-trim: block-start;
}

This trims only the margin at the beginning of the container.

Or:

.content {
  margin-trim: block-end;
}

This trims only the margin at the end.

Where could this be useful?

Think about components containing dynamic content:

• Blog articles with headings, paragraphs, and lists.
• Cards with optional titles or descriptions.
• Rich-text content coming from a CMS.
• Reusable UI components where the first and last elements aren't always predictable.

Instead of constantly overriding child margins, the container can handle its own boundaries.

There is one important limitation, though.

Browser support is still incomplete. Chrome 155 introduced support in October 2026, joining Safari, but Firefox doesn't support margin-trim yet.

For production applications targeting Firefox, we should keep our existing spacing rules or provide a fallback.

Two Small Features, One Bigger Direction

What I find interesting about these additions isn't necessarily the amount of CSS they save.

It's how they change the way we approach familiar problems.

Typed arithmetic allows CSS to work with compatible dimensions more naturally.

margin-trim allows containers to manage their children's outer spacing without additional selectors.

Neither feature completely changes how we write CSS. And neither means we should immediately rewrite existing stylesheets.

But they're useful reminders that the platform keeps improving, often in ways that make our existing code simpler.

Sometimes learning a new CSS feature isn't about doing something entirely new.

It's about discovering that something we've been doing for years can now be done with less code.