What is new in CSS? (Part 1)

Some of the new CSS Features the latest years has given us and some upcoming ones.

It’s a fact. The modern web wouldn’t be what it is without CSS. It is there to make the web interesting, make sure every element stays where it supposed to and make nice understandable layouts. Modern CSS has so much more than box-model, background-colors and borders. And just like Javascript, new features are shipped all the time.

This post intend to highlight five nice CSS features from 2021 and upcoming ones during 2022. Are you comfortable? Have your popcorn near? Ok, lets go!

Custom properties/Variables

Custom properties allow you to define a variable in a central place to use in your design. Keep in mind that we now are talking about pure CSS and can now do this without a preprocessor like SASS.

Before we hade to do something like this.

.some-container {
  background-color: #be03fc;
}

a {
  color: #be03fc;
}

And now this is possible.

:root {
  --global-highlight-color: #be03fc;
}

.some-container {
  background-color: var(--global-highlight-color);
}

a {
  color: var(--global-highlight-color);
}

This was maybe not a big problem in a small project, but when the project evolves and get bigger the old trick with find-replace isn’t that nice any more. Especially not if we have used hex, RGBA and RGB in different places.

Browser support

The browser support is pretty good. IE doesn’t support this but every other big ones do.

Gap

When CSS grid came we learned all about gap as a concept. But did you know you can use it for flexbox as well? You can use row-gap, column-gap or just simple gap if you want the same space for rows and columns.

We used to solve this with margins, but it took way more markup and it was harder when the children wraps to row number two.

.some-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

<div class="some-container">
  <img />
  <img />
  <img />
</div>

Browser support

The browser support is good. IE doesn’t support this but every other big ones do.

content-visibility

Okay, this one is cool. It helps to improve site performance and make the initial page load faster.

Today many pages are long, and our users are used to scroll. No worries. But we are rendering very much content that the user can’t see in the viewport. Content visibility works something like lazy loading and enables the user agent to skip the rendering of an element, including layout and painting, until it’s needed, shown in the viewport.

It looks something like this:

.some-container {
  content-visibility: auto;
  contain-intrinsic-size: 200px 500px;
}

And takes three values.

content-visibility: visible;
content-visibility: hidden;
content-visibility: auto;

Visible has no effect and will render the element and it’s children as normal. Hidden means that the element will not render it’s content. Similar to display: none, but it preserves rendering state, so when shown again it will render quicker. Auto is where the real magic happens. If the element is not relevant to the user, the content will not be rendered. But unlike display:none it is still available for user-agent features. Which simply means that we don’t loose accessibility.

As you can see in the example I throw in another property called contain-intrinsic-size. This lets us set a theoretical width and height to the hidden elements so that the browser can calculate from that when the elements is rendered. For example it is a way to avoid layout changes during scroll.

Here is more if you want to deep dive into the spec.

Browser support

The browser support isn’t there yet. It’s in the chromium based browsers, Chrome and Edge, but not yey in Firefox and Safari. But we will get there. And when we do it will be a really nice tool to speed up rendering.

Scroll snap

Scroll snap enables us to lock the users viewport to certain elements of the site when the user scrolls the page. This helps the users to focus on the most important parts.

Maybe your used to see this in apps, but now we can bring it the the web as well.

It’s pretty easy to get started with, just a few lines of code.

.container {
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

Here is a simple demo.

Browser support

The browser support is good. IE doesn’t support this but every other big ones do.

:is() and :where()

These are pseudo classes that helps us to avoid repetition in our CSS markup.

Before we had to do something like this.

.main a:hover,
.sidebar a:hover,
.footer a:hover {
  /* markup goes here */
}

And now this is possible.

:is(.main, .sidebar, .footer) a:hover {
  /* markup goes here */
}

:where(.main, .sidebar, .footer) a:hover {
  /* markup goes here */
}

They look the same but there is differences in specificity. :is() counts the specificity of the overall selector, whereas :where() has specificity value set to 0. Deep dive in to the differences to se som good examples.

Browser support

The browser support for both :is() and :where() is good. IE doesn’t support this but every other big ones do.

This was five CSS features. Have you met something new?

And now what?

Things are happening fast in the world of CSS right now, and many of the new stuff help us write better and cleaner code. We have more to talk about so there will be one more post on this subject coming up soon.