As front-end technologies have evolved, CSS has gone beyond background colors, borders, text styles, margins, and box models. Modern CSS can provide a range of functionality that in the past you would have needed JavaScript or workarounds to implement, but now CSS properties are becoming JS, and directly changing new CSS features allows you to implement some of the functionality that JS can only implement.

New features of CSS: What can modern CSS do

These are some of the amazing features CSS has today

Custom properties/variables

Custom properties basically allow you to define proxies for CSS properties in one central place for use in your design. The best way to understand why this is useful is to look at an example.

Typically, when building a theme, you choose a color scheme and declare those colors each time.

a {
	color: #cd2653;
}

.social-iconsa {
	background: #cd2653;
}

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

The problem with this approach is that if you want to make a change to one of the colors, you have to change every instance of it. While the code editor can easily do this with search and replace, it’s still annoying. Especially if you just want to do a quick test and turn everything around. There are better solutions

Custom attributes solve this problem. With their help, you can assign the color to a variable once and then use it as a CSS property each time, like this:

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

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

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

That way, when you want to make changes, you only need to make them in one place. Cool, right? In the past, you needed a preprocessor like SASS to use variables; now it’s a native CSS feature.

As you saw above, custom properties are also very easy to use. Define your variables under the :root selector at the beginning of the document (note the double hyphen – before the variables, that’s why you define them as custom properties, and they’re case sensitive!). . You can then use them throughout the document through the var() function.

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

As for the degree of adoption of this CSS feature, browser support is very good:

@supports

Next, we have a CSS rule similar to media queries. However, @supports does not make CSS rules conditional on screen size or phone type, but allows you to do the same based on the 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. While you can usually handle this with fallback declarations, in some cases, if you don’t specifically include support for older technologies, it can wreak havoc on your site.

In addition, you can use @supports to add additional features or styles to more modern browsers to handle them (that’s why queries that use @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. Here’s how to use it:

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

As you can see, it’s just a simple rule, followed by parentheses for the attributes or attribute value pairs you want to check. After that comes the usual CSS declaration of what rules to apply if the conditions are met.

The example above indicates that if the browser supports CSS grid (more on that later), it should display: grid; Apply to elements with the.site-content class.

It is also important to note that @supports understands the not, and, and or operators (which can also be combined) to create more specific rules, such as providing fallbacks for browsers that do not support that particular feature.

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

In order to use @supports properly, you need to know which browsers support it, and the good news is that all modern browsers do.

However, because the goal of these queries is to enable or disable features that older browsers cannot handle, make sure they are constructed correctly. This means that if you want to use a feature query, create it for a browser that supports feature queries.

Flexbox Gaps

Flexbox is another CSS layout module we discussed in detail earlier. One of its long-standing weaknesses is the Flexbox gap, which is the interruption between rows and columns that can be defined.

Thankfully, browser support for this CSS feature is improving. You can now use gap, row-Gap, and Column-gap to create Spaces in Layouts created using Grid, Flexbox, and multi-column Layouts.

Here’s a short example of how it looks 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

Page display:

While the same layout can be achieved with margins, it requires more markup and workarounds than simply declaring gap sizes.

content-visibility

Content-visibility is a cool new CSS feature that improves site performance. It works basically like lazy loading, except not for images, but for any HTML element. You can use it to block any part of the site from loading until it is visible.

It’s super easy to use, just apply it to an element of your choice, like this:

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

Content-visibility has three values. By default, it is set to visible, in which case the element is loaded as usual. Alternatively, you can set it to Hidden, in which case the element will not be rendered whether it is visible or not. On the other hand, when set to Auto, elements outside the visible area are skipped and rendered as soon as they appear on the screen.

Pretty cool stuff, right?

Contain -intrinsic-size Because the setting is content-visibility: hidden; The element is actually zero in size, which allows you to apply a theoretical height and width to the hidden element so that the browser can take it into account from the start, rather than at element rendering time. This way, you can avoid sudden layout changes during scrolling.

Browser support for Content-Visibility is a little sketchy, but it’s getting better. The same is true of support for containing -intrinsic-size.

Once adopted more widely, I predict it will be one of the most effective tools for speeding up the rendering process.

Transitions, Transforms, Animations

Back in the day, if you wanted things to move around on your site, you usually had to resort to JavaScript (or animated GIFs, for those of the MySpace generation). What you may not know, however, is that CSS has also had the power to make things move over the years. The three main tools for doing this are:

  • Transitions – Allows you to make Transitions from one attribute value to another (such as hover effects) smooth rather than abrupt.
  • Transformations Transformations Transformations — you can move, rotate, and scale elements in 2D and 3D Spaces.
  • Animations — Set up simple or complex Animations in your CSS and configure how and when they should run.

Naturally, we don’t have the space to cover all three in detail here. However, let’s do some quick examples for everyone to give you an idea of what is possible.

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

When someone hovers over an element, the mark slows the div height increment to 3 seconds.

CSS conversion

The following is 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 animations

Finally, a short code snippet to show CSS animations:

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

Notice how you use @keyframes to name the animation and define its functionality, and then use animation-name to apply it to the element. Animation-duration controls when to complete, among other similar properties.

If you want to try all of this, the good news is that the browser support is very good, so there are no barriers for you to arbitrarily rotate CSS transitions, transformations and animations.

Scroll to capture

Scroll Snapping gives you the option to lock a user’s viewport to a part or element of your website. It is useful for creating cool transitions and helps users focus on the most important page elements as they scroll down the page.

This effect can be seen a lot in mobile applications, but you can also bring it to a website by scrolling capture.

At the most basic level, it’s relatively simple to use. You simply apply the scrollcapture type to a container and define where its children should be captured.

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

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

Browser compatibility is good.

Note, however, that the support for all available scrollcapture properties is somewhat uneven. Therefore, be sure to examine your specific use cases.

: is and where

The last items on our list of new CSS features that you may not know are: IS and: WHERE pseudo-classes. They allow you to reduce CSS markup duplication by shortening the list of CSS selectors.

For example, compare:

.maina:hover,
.sidebara:hover,
.site-footera:hover {
	/* markup goes here */
}
Copy the code

To this:

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

The same thing applies to :where:

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

If the mark is the same, what difference does it make? The difference is: IS is more specific. It takes the degree of particularity of the most special element in parentheses. By contrast :where is always zero in specificity. So, it’s much easier to cover it further down.

The browser app is still a little shaky, but it’s coming. So feel free to start experimenting.