What is new in CSS? (Part 2)

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 mush more than box-model, background-colors and borders. And just like Javascript, new features are shipped all the time.

This is part two on the topic of highlighting some nice CSS features from 2021 and upcoming ones during 2022. The first part you will find in a previous vibe. Ok, let’s dive right into it!

:has()

Ever found yourself wanting to style a parent of an element? :has() makes that possible. Or one other case. What if we could style a label that follows by an invalid input? There are many possibilities with this one.

It would look something like this is we would like to style an img if it’s parent section also contains an h3.

section:has(h3) img {
  border: 5px solid lime;
}

Browser support

The browser support isn’t good. None of the big once has this implemented yet. But you can play around with it in Safari Technology Preview. I’m really longing for :has()!

@when/@else

It’s pretty much as you could guess an at-rule for CSS conditions, similar to if/else. It can really make your CSS more simple in terms of readability as well.

@when media(min-width: 960px) and supports(display: grid) {
  /* This style will apply for viewports over 960px, where the browser also supports grid */
} @else {
  /* And this will style for browsers that do not */
}

Browser support

This one is still under discussion to be implemented. But it’s one to keep your eyes open for.

Container queries

I’m really excited about container queries. It will help us to build responsive web in an more dynamic way. Today we have media queries so that we kan adjust our design according to the viewport. But that isn’t always that spot on. With container queries we can tell the children to adjust when the parent is a certain size.

Here is one example. when the parent is more then 500px we switch to a horizontal layout of the child component.

.some-container {
  container: inline-size;
}

.child {
  display: flex;
  flex-direction: column;
}

@container (inline-size > 500px) {
  .child {
    flex-direction: row;
  }
}

The container property is short hand for container-type and container-name. Container type can be four different types.

container-type: width;
container-type: height;
container-type: inline-size;
container-type: block-size;

This is a really nice article if you want to read more on this topic.

Browser support

When it comes to browser support we could hope for more. But it is coming. In Chrome, Edge and Opera you can can try it out behind flag. Or you could use Safari Technology Preview as of now.

accent-color

If you want an easy way to apply your brand colors to form fields like checkboxes, radio buttons and progress bars accent-color is your friend. Many time we as developers hide the actual input and work with pseudo-elements instead. Now we can keep the default input but get them in your brand color.

Here are a few example how you can accomplish this in an easy way.

:root {
  accent-color: deeppink;
}

form {
  accent-color: aqua;
}

input[type="radio"] {
  accent-color: rebeccapurple;
}

Play around

Browser support

The browser support is fairly good. It is in Edge, Chrome, Firefox and Safari Technology Preview.

Cascade layers

There are more then one factor that determine which style will be applied to your elements. Two example is selector specificity and order of appearance. CSS within a layer lower down will still take precedence over code in a higher layer, even if the higher layer has more specificity. Cascade layers give us a way to manage the cascading of CSS in a more direct way.

It works similar to z-index, but for cascading.

/* Create the layers, in the order you want them */
@layer base, theme, highlight;

/* Append the CSS to each of the layers */
@layer base {
  /* Markup goes here */
}

@layer theme {
  /* Markup to 'theme' layer goes here */
  h1.title {
    color: black;
  }
}

@layer highlight {
  /* Markup to 'highlight' layer goes here */
  h1 {
    color: hotpink;
  }
}

The h1 on the page will have a hotpink color, despite that the specificity in the theme layer is higher, because the of the order of the layers.

Browser support

Browser support for this one is also fairly good. It is in Edge, Chrome, Firefox and Safari Technology Preview.

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. In two vibes we have gone over 10 different CSS features that can help us in our daily work. Some of them we can dive right right into and some we have to long for a bit longer.

I hope you have met new favorite once.