• 10 New CSS Features You Might Not Know About (2021 Edition)
• By Nick Schaferhoff
• The Nuggets translation Project
• Permanent link to this article: github.com/xitu/gold-m…
• Translator: Hoarfroster
• Proofread by: Baddyo, Nia3y

Without CSS, modern Web applications would not be possible. Markup language (STYLESheet language) Be responsible for making the site visually appealing, visually pleasing, and with every element in its place. But did you know that new CSS features are emerging all the time?

Over the years, CSS has moved beyond setting background colors, borders, text styles, margins, and box models. Modern CSS can now provide functionality that used to require JavaScript or other workarounds!

In order to celebrate the evolution of CSS, in this article, we want to take a look at some amazing features that you may not have known about coming out in 2021. We’ll highlight the great features of modern CSS available to Web designers and developers, discuss use cases and browser support, and provide a simple example.

Let’s get started!

New CSS features: What can CSS do now

These are some of the amazing features of CSS today.

Custom properties and variables

Note: Custom Properties and variables are the same thing, see MDN Web Doc

Custom properties basically allow us to define alternatives to CSS properties for use in our designs. An example will give you an idea of why this feature is useful:

Typically, when building a theme, we choose a color scheme and then declare those colors as necessary.

a {
    color: #cd2653;
}

.social-icons a {
    background: #cd2653;
}

.wp-block-button.is-style-outline {
    color: #cd2653;
}
Copy the code

The problem with this approach is that if we want to change a color, we have to change it everywhere that color is used. Although the code editor can do this easily with search and replace, it’s still annoying. Especially if we just want to do a quick test and have to undo everything again.

Better solutions

Custom attributes solve this problem. With their help, we can easily assign the color scheme we just described to a variable, and then just enter it as a CSS property each time we use it, as shown below:

:root {
    --global--color-primary: #28303d;
}

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

.social-icons a {
    background: var(--global--color-primary);
}
Copy the code

This way, every time we want to make a change to the color scheme, we only need to make the change in one place. Isn’t that cool? In the past, we needed to use a preprocessor like Sass to use variables, but now it’s a native CSS feature.

As you saw above, custom properties are also very easy to use. Define variables at the beginning of the document under the :root selector (note that variables should be preceded by a double hyphen –, that’s why they’re called custom attributes, they’re also case sensitive!). . We can then use them throughout the document through the var() function.

If you want to change a variable, simply change the declaration under :root.

How compatible is this CSS feature, browser support is very good:

@supports

Next, there is a CSS rule similar to media queries. But instead of using it to write specific styles based on screen size or device type, we apply specific styles based on CSS properties and values supported by the user’s browser.

What’s the use of that?

As you’ll see in this article, not all browsers and devices support all CSS capabilities. Although we can usually handle this problem with elegant downgrading, in some cases, using the latest technologies can seriously damage the style structure of our site if we don’t specifically include support for them.

In addition, @supports can be used to add additional functionality or styling to more modern browsers that support specific functionality (this is why the queries used @supports are also called “functional queries”).

How do I use functional queries

If you are familiar with media queries, it is very easy to use support checking. The usage method is as follows:

@supports (display: grid) {
    .site-content {
        display: grid; }}Copy the code

As you can see, it’s nothing more than a rule declaration followed by an attribute or property-value pair to be checked in square brackets, plus the CSS declaration we usually use to specify which style rules to apply when the condition is met.

The example above indicates that if the browser supports CSS grid functionality (more on this later), apply display: grid; Style elements to.site-content.

It is also important to note that @supports supports the use of the operators NOT, and, and OR (can also be used in combination) to create more specific rules, such as elegant degradation of browsers that do not support that particular feature:

@supports not (display: grid) {
    .site-content {
        float: left; }}Copy the code

In order to be able to use the @Supports feature properly, you need to know which browsers support it (a kind of metadata, I know). The good news is that ** all modern browsers support **.

However, because the purpose of these queries is to enable or disable functionality that older browsers cannot handle, make sure you write them correctly. To use function query, create function query conditions for browsers that support function query. It’s no use asking the browser to ignore something in a way it doesn’t understand.

Flexbox clearance

Flexbox is another CSS layout module that we’ve already discussed. The long-standing disadvantage of Flexbox is that it does not support gaps, I mean, defining the spacing between rows and columns.

Fortunately, browser support for CSS functionality is improving. Now we can start creating gaps in the grid layout, Flexbox layout, and multi-column layout using the gap, row-Gap, and Column-gap attributes.

Here’s a quick example of creating gaps in Flexbox:

.flex-gap-test {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 16px;
}

<div class="flex-gap-test">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>
Copy the code

Here’s the effect:

Although we can achieve the same layout with margins, it requires more markup and workarounds than simply declaring the gap size.

Content visibility

Content-visibility is a cool new feature in CSS that can improve web site performance. It basically works like lazy loading, and it works not just with images, but with any HTML element. We can use it to achieve lazy loading of websites.

It’s also super easy to use. Just apply it to the element of our choice, as follows:

.content-below-fold {
    content-visibility: auto;
}
Copy the code

Content-visibility supports three values. The default is Visible, at which point the element loads as usual. We can set it to hidden, meaning that the element will not be rendered whether it is visible or not. When set to Auto, elements outside of the visible area are skipped and rendered only when they appear on the screen.

This is pretty cool stuff, right?

One thing that may also be important in this case is to consider containing -intrinsic-size. Because the setting is content-visibility: hidden; The size of the element is actually zero, so we can apply the theoretical height and width to the hidden element so that the browser can take it into account from the start, rather than when rendering the element. This way, we can avoid sudden layout changes during scrolling.

In terms of browser support, Content-visibility is still a bit poor, but it is moving in that direction, including -intrinsic-size.

I expect that once it is adopted more widely, it will be one of the most effective tools for speeding up the rendering process.

Transition, transformation, animation

In the past, if we wanted to move something around on a website, we usually had to turn to JavaScript (or animated gifs for the MySpace generation). But what you may not know is that CSS has long been able to do this. There are three main ways to achieve this:

• Transition – Supports smooth changes from one property value to another (for example, hover effects) rather than sudden changes.
• Transform — Supports moving, rotating, and scaling elements in 2D and 3D Spaces.
• Animation – Sets simple or complex animations in CSS and configures how and when they run.

Naturally, we don’t have room here to discuss all three sections in detail. If you’d like more information, be sure to check out the link above. However, let’s do some quick practice examples for each so that you get an idea of the possible effects.

CSS Transition

Here’s a quick example of CSS transitions:

div {
    width: 100px;
    height: 100px;
    transition: height 3s;
}

div:hover {
    height: 500px;
}
Copy the code

The code above increases the height of a div element to 500px in three seconds when someone hovers over it.

CSS Transform

Here’s an example of a CSS transformation — when someone hovers over an element, it rotates the element 30 degrees clockwise:

div:hover {
    transform: rotate(30deg);
}
Copy the code

CSS Animation

Finally, a short code snippet that shows how CSS animations are used:

@keyframes color-change {
    from {
        background-color: blue;
    }
    to {
        background-color: yellow; }}div:hover {
    animation-name: color-change;
    animation-duration: 3s;
}
Copy the code

Notice that we use @keyframes to name the animation and define its functionality, and then we need to apply the animation to the element using animation-name. Animation-duration controls how long it takes to complete, and there are many other properties like ~

If you want to try all of these, the good news is that browsers support them very well (see Transition, 2D Transform, 3D Transform, and Animation). Therefore, there are no barriers to playing around with CSS transitions, transformations, and animations.

Scroll to capture

Scrolling capture gives us the option of locking the user’s viewport to certain parts or elements of the site. This feature is useful for scenarios that create cool transitions and help users focus on the most important page elements while scrolling down the page. A simple demonstration can be found here.

This effect is evident in applications on mobile devices, but with scrolling capture, we can also bring it to websites.

It is also relatively simple to use in the most basic cases. We simply apply the scrollcapture type to the container and define where its children should be captured.

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

.container div {
    scroll-snap-align: start;
}
Copy the code

Of course, there are more features about its use. CSS Tricks already has a great article if you want to learn about it.

Then there’s browser compatibility, which is pretty good.

Note, however, that there is slightly different support for the Scrollsnap attribute. Therefore, be sure to examine your specific use cases.

: is and where

The last item on the list of new CSS features you may not know is: IS and: Where pseudo-classes, which allow us to reduce repetitive code in CSS styles by shortening the list of CSS selectors.

Such as:

.main a:hover..sidebar a:hover..site-footer a:hover {
    / * * /
}
Copy the code

And this:

:is(.main..sidebar..site-footer) a:hover {
    / * * /
}
Copy the code

In the same way: the where:

:where(.main..sidebar..site-footer) a:hover {
    / * * /
}
Copy the code

What difference does it make if the style tags are the same? The difference: IS is more specific. It takes the specificity level of the most specific element in parentheses. In contrast, :where is always zero specific. So it’s easier to cover by case.

Browser support for: IS and: Where is still a bit incomplete, but it’s getting better. So we’re ready to try them out.

Any other new CSS features worth checking out?

Like all other Web technologies, CSS is evolving. This means there are always new CSS features and new things to try.

In this article we’ve focused on a few features of modern CSS that we might not have noticed, and there are many more to discover. — If there’s anything else you’d like to share, please let us know and we’ll have fun. Other than that, have fun programming!

What’s your favorite modern CSS feature? Share it in the comments section below!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

---

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.