Design

3 CSS Features You May Not Be Aware Of

August 7, 2020

CSS is required for the modern web to function. The markup language ensures that webpages look attractive, have a comfortable layout, and that each element stays in its proper place. However, did you know that new CSS features are released on a regular basis?

CSS has progressed well beyond background colors, borders, text styles, margins, and the box model over time. Modern CSS can perform a wide range of functions that formerly required JavaScript or workarounds.

To commemorate how far CSS has gone, we've put up a list of some of the wonderful new features that CSS will have in 2021 that you may not be aware of. We'll discuss about use cases, browser support, and give you a fast sample of what web designers and developers can achieve with current CSS.

Let's get this party started.

What Modern CSS Can Do: New CSS Features

Here are some of the incredible things CSS can do these days.

Custom Properties/Variables


Custom properties enable you to establish stand-ins for CSS properties in a centralized location for use in your design. An example is the greatest approach to understand why that is beneficial.

When creating a theme, you usually choose a color scheme and then define those colors whenever they are needed.

The difficulty with this method is that if you wish to alter one of the colors, you must alter every instance of it. Even while code editors can easily achieve this using search and replace, it's still inconvenient. Especially if you only want to run a fast test and then have to go back and reverse everything.

There is a Better Solution


This is no longer an issue because to custom properties. With their assistance, you may assign the desired colors to a variable once and then utilize that variable as the CSS property every time you use it, as shown below:

That way, if you want to modify something, you only have to do it once. Isn't it cool? To use variables in the past, you had to use a preprocessor like SASS; now it's a built-in feature of CSS.

Custom properties, as you can see, are also quite simple to utilize. Define your variables inside the :root selector at the start of the document (note the double hyphen — in front of the variables; this is what distinguishes them as custom properties; they are also case sensitive!). After that, you may use the var() function to use them across the document.

Simply edit the declaration under :root to alter a variable and you're set to go. Twenty Twenty-One is a Wordpress theme that makes extensive use of custom properties. I recommend reading our review if you want to see them in action.

In terms of how widely this CSS feature is used, browser support is excellent:

Flexbox Gaps


Another CSS layout module that we've gone through in depth is flexbox. Flexbox gaps, or the ability to set breaks between rows and columns, have long been one of its flaws.

Browser support for this CSS feature is improving, which is good news. Gap, row-gap, and column-gap can now be used to create space in layouts made with Grid, Flexbox, and Multi-Column Layouts.

Here's an example of how this may seem in flexbox:

And here it is on the page:


While the same layout may be achieved with margins, it necessitates a lot more markup and workarounds than simply declaring gap size.

:is and :where


The :is and :where pseudo classes round out our list of new CSS capabilities you may not be aware of. They help you to reduce CSS markup repetition by condensing CSS selector lists.

Compare this:

To this:

Same thing works here with :where:

What's the difference if the markup is the same? The difference between the two is that :is is much more specific. In the parentheses, it takes the level of specificity of the most particular element. The specificity of :where, on the other hand, is always zero. As a result, it will be much easier to override in the future.

Browser adoption is still sporadic, but it's improving. So go ahead and start experimenting with them.

Any Other New CSS Features Worth Looking At?

Cascading stylesheet markup, like all other online technology, is always changing. That means there are always new CSS features to learn about and new things to try out.

We looked at several examples of what CSS can already do today that you might have missed earlier. There's a lot more to it than that. We'd love to hear anything else you have to say. Apart from that, have fun coding!

Work With Us

Have a project? Create your website now.

We make high level websites