StatusCake

Shiny, new CSS features to get to know

Ever since I started to learn how to code, CSS has excited me. As a very visually rewarding style sheet language, it has always been an instantly gratifying language to work with.

The CSS landscape at the moment is ever-changing. There are many new features that have been released recently, so I thought I’d have a look around and summarise those that caught my eye, concisely in this post.

As with many fun new things to play with, browser support on some of these (at the time of posting this) is fairly limited. I’ll make sure to outline these alongside each of the features.

Container Query Length Units

At the dawn of CSS, we were blessed with the classic pixel units (px). Then came along the relative units we are all familiar with (rem and em) and more recently, vh and vw, which gives us the power to set our elements’ length based upon the user’s viewport height and width. But very recently it was announced that CSS is to get another unit of measurement, that is Container Query Length Units. 

If you hadn’t heard of them until now, container queries are similar to media queries. However, instead of being based upon the size of the user’s viewport, the styles can be changed according to the size of one of the element’s parent containers. Now in the same way that vh and vw are relative to the size of the viewport, container query units are relative to the size of their container.

Currently (I’m saying this as it’s still in draft), the proposed units are:

  • cqw (Container Query Width) – 1% of the container’s width
  • cqh (Container Query Height) – 1% of the container’s height
  • cqi (Container Query Inline) – 1% of the container’s inline size
  • cqb (Container Query Block) – 1% of the container’s block size

Then we have two bonus units that are:

  • cqmin (Container Query Minimum) – the smaller value of cqi and cqb
  • cqmax (Container Query Maximum) – the larger value of cqi and cqb

You can keep track of the progress of this in the CSS spec here.

Browser Support

Container Query Length Units units are only currently supported within an experimental flag in Chrome Canary, so if you want to try it out, make sure to enable it by opening up your chrome flags, searching for ‘Enable CSS Container Queries’, and checking the checkbox.

Flexbox Gaps

Now you may have already come across the gap property in CSS, but very recently this has been upgraded to not only work with CSS grid but also flexbox. 

Gaps are most commonly used in grid layouts, to introduce consistent spacing between rows and columns (and therefore items) within the grid. This translates over to flexbox in a very similar way. Gone are the days of adding margin around elements within a flex parent, then having to remove margin-left on the first element of the row and margin-right of the last, to ensure a pixel-perfect match to your designs. The new gap property adds spacing just between elements within a flex container.

The syntax for the gap property is fairly straightforward:

  • row-gap – to set the horizontal spacing between elements within a flex container
  • column-gap – to set the vertical spacing between elements within a flex container
  • gap – shorthand for row-gap and column-gap together. If just one value is set for this, it applies the gap in both directions.

Browser Support

Support for the use of gap within flexbox is fairly widespread at the moment. Although it is worth noting that there is no support for Internet Explorer.

New Selectors – :is() and :where()

Now, these are a part of the CSS spec that I’ve been excited for, for a while now.

We’ve all been there, where we need to target a certain type of child element which may have multiple different parent elements, eg:

Well, times are-a-changin’. :is() is a CSS function that takes a comma-separated list of selectors, and acts as a shorthand way of selecting a certain child element – with any number of parent elements – to style (as seen in the example above). This is the way you would write the above CSS using :is():

One interesting thing to note is that if one of the items in the list of selectors you’re passing to :is() or :where() is invalid, the rest of the items will parse as normal and nothing will fail. Although it’s good to know that this currently isn’t as forgiving in Safari at the moment.

A great use case would be for styling deeply nested elements (eg. to change the font colour of multiple elements within a table).

Now, the syntax for both :is() and :where() is exactly the same, however, the difference between them comes down to specificity. :is() takes the specificity of its most specific argument, whereas :where() always has 0 specificity – similar to the universal selector (*).

Browser Support

Browser support isn’t too much of an issue with the :is() and :where() selectors. As with the previous feature, Internet Explorer isn’t (and probably will never be) supported.

Conclusion

It’s great to see these exciting new features coming to life and shows that some good things are on the horizon in the world of CSS. The potential of container query length units is huge in changing the way we write responsive code. On the same note, :is(), :where() and the use of gaps within flexbox make our work a lot easier and are definitely a step in the right direction. All in all, these are very positive changes and I look forward to seeing what else is to come.

If you haven’t already taken a look at my previous blog post about Design Systems with React and Storybook!

Share this

More from StatusCake

monoliths
Engineering

Microservices vs Monoliths explained

6 min read If you’re a dev you’ve no doubt, come across people talking about monolith and microservice application architecture. Perhaps you are involved in designing a new system and have been asked to consider both architectures. The conversations are often regarding how microservices are the successor to monolith architecture, but today I’m going to try and layout why it’s not as simple as one being better than the other.

black friday
short-reads

Why you should have a website monitoring tool ready for Black Friday

2 min read It’s not all fun and games as a company owner during the biggest sales season of the year; unfortunately, you’re more likely to suffer website issues than on an average day. Find out how you can keep your website performing at its best during Black Friday right here!

SSO
short-reads

Why Google SSO is so important

3 min read Do you know what an SSO is? Do you know if you’re currently using one? Here’s everything you need to know about an SSO and what the benefits are to using them.

affiliate marketing
How To

How to make money online for beginners

5 min read In this article, we are going to look at some of the options to help you start making money online as a beginner from home, with the flexibility and a small investment depending on the model that you want to pursue and right for you.

design patterns
Engineering

3 useful design patterns every developer should know about

7 min read The term “Design Pattern” describes a well-known and battle-tested solution to a problem that developers tend to encounter again and again when developing software. Here’s our step-by-step guides to the most useful ones!

Engineering

Shiny, new CSS features to get to know

4 min read The CSS landscape at the moment is ever-changing. There are many new features that have been released recently, so I thought I’d have a look around and summarise those that caught my eye, concisely in this post.

Want to know how much website downtime costs, and the impact it can have on your business?

Find out everything you need to know in our new uptime monitoring whitepaper 2021

*By providing your email address, you agree to our privacy policy and to receive marketing communications from StatusCake.