The CSS I Knew Has Evolved: Advanced Features, New Identity

The world of frontend development has changed drastically since I began my journey as a front-end developer a decade ago. CSS itself has not only evolved in capabilities but also embraced a fresh, modern identity with a new logo that symbolizes this evolution.

Lucky for me, I didn't start in the dark days of table-based layouts, but I did witness the rise of Flexbox and the bittersweet death of float and clear CSS properties. If you’re unfamiliar with these terms, you might want to take a nostalgic look at Bootstrap 3’s grid system.

The death of Internet Explorer marked a turning point. The web technologies started evolving at lightning speed, making it both exciting and challenging to keep up.

Here’s a look at some modern CSS features I wish had existed when I started my journey as in web development. These advancements would’ve saved me countless hours of frustration and made CSS development a lot more fun.

Centering a Dev

There are plenty of memes mocking CSS for lacking an easy way to center a div element. Luckily, those dark days are gone we now have the single CSS property place-content

centring div meme

An online meme about centering div

Centering Vertically and Horizontally

Using Grid, you can center elements effortlessly:

.is-centered {
  display: grid;
  place-content: center;
}

Alternatively, Flexbox offers another simple solution:

.is-centered-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

Vertically Centering a Block-Level Element

With the introduction of the align-content property for block layouts, you can now center a div vertically using align-content, which works properly without requiring a flexbox wrapper.

.is-vertically-centered {
    display: block;
    align-content: center;
}

Nested Selectors

Preprocessors also introduced nested selectors, which make styles more structured and readable. Without them, we were stuck duplicating selectors like this:

.button {
  color: red;
}

.button:hover {
  color: white;
}

Today, native CSS lets you write:

.button {
  color: red;

  &:hover {
    color: white;
  }
}

It’s cleaner, it’s readable, and it’s finally supported in all modern browsers.

:is() and :where()

Selectors just got a lot smarter with these pseudo-classes. They let you simplify complex styles that previously required lots of duplication:

article:is(.featured, .highlighted):is(:hover, :focus) > h2:is(.title, .subtitle) {
    color: blue;
}

Without (), the same CSS would’ve looked like this monstrosity:

article.featured:hover > h2.title,
article.featured:focus > h2.subtitle,
article.highlighted:hover > h2.title,
article.highlighted:focus > h2.subtitle {
    color: blue;
}

9k tip: The difference between :is() and :where() lies in specificity. While :is() inherits the specificity of its most specific argument, :where() always has zero specificity. perfect for low-priority defaults.

Container Queries

Responsive design has always revolved around viewport widths, but container queries take a more intuitive approach: responsiveness based on an element’s parent container.

@container (min-width: 700px) {
  .card h2 {
    font-size: 2em;
  }
}

This is a game-changer for modular and reusable components. Let’s start adopting it more widely, folks!

The clamp() Function

Once upon a time, I worked on a typography-heavy project that required fonts to scale fluidly with the viewport. My first instinct? Use something like font-size: 0.5vw; that would do the trick, right?

WRONG! It was a nightmare. We had to carefully control how the font resized relative to the viewport, which involved complex mathematical equations. Plus, we needed to ensure the text wouldn't become too large or too small.

Then I discovered a treasure—an article that addressed exactly this use case. It resulted in a monster of a Stylus-CSS mixin that handles all the corner cases (remember, it was the preprocessor era 🙃)

When I learned that the clamp() function is now supported natively, I was both excited and surprised, given its specific use case.

Now you can achieve similar results much more elegantly by combining the clamp, min, and max functions

.selector {
  width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
}

Honorable Mention: Modern Color Features

CSS color management has evolved dramatically, offering a plethora of new systems and tools. Features like color-mix() and support for LCH and LAB color spaces deserve their own article. stay tuned for that!

Resources: