8 state-of-the-art CSS features (and how to use them)

(Image credit: Getty Images)

CSS is constantly evolving and a host of exciting new features have been added to make the specification an even more powerful weapon in a web designer's toolset.

CSS Grid takes layouts to new levels not seen before, custom properties introduce the concept of variables while feature queries check for browser support. Media queries moves up a level with new accessibility properties, variable fonts offer maximum creativity with minimum code bloat while scroll snapping eliminates the need for JavaScript. Check out our cool CSS animation examples to see what you can create. Or, to build a site without code try these website builders.

If you’ve use a preprocessor like Sass, or indeed a programming language like JavaScript, you’ll no doubt be familiar with the concept of variables — values that are defined for reuse throughout your code. Custom properties enable us to do this in our CSS, without the need for preprocessors. Variables can be set at the :root level (creating global variables) or scoped within a selector. They can then be called using the syntax var(-›-myVariableName). For example, we might set a variable called --primaryColor like this:

/* On the root element (a global 
variable) */
:root {
	--primaryColor: #f45942;
}
/* Scoped to a selector */
.my-component {
	--primaryColor: #4171f4;
}

h1 {
	color: var(--primaryColor);
}

Custom properties are inherited, which has some very useful implications. One of those is theming. Take the above example: We can define a global variable ( #f45942 – a bright orangey red) for --primaryColor at the root level, so every instance where we use this variable the value will be red. But we’re also redefining the same variable within a selector, with a different value (#4171f4 – medium blue). So for every instance where we use the --primaryColor variable within that selector, the computed value will be blue.

h1 {
	color: var(--primaryColor, blue);
}

Custom properties differ from preprocessor variables in a few key ways. Preprocessor variables are compiled before your code is sent to the browser. The browser never sees that a value is a variable, it only sees the end result. Custom properties are computed in the browser. You can inspect them in modern developer tools, change the variable and see the resolved value. They are dynamic variables, meaning their values can be changed within CSS, or at runtime with JavaScript.

.my-component {
	display: grid;
}
@supports (display: grid) {
	.my-component {
		display: flex;
	}
}

.my-element {
	animation: shake 500ms ease-in-out 5;
}
@media (prefers-reduced-motion: reduce) {
	.my-element {
		animation: none;
	}
}

/* Media queries 02 */
body {
	background: linear-gradient(to 
	bottom, #b5faff, #ffe2b4);
}
@media (prefers-color-scheme: dark) {
	body {
		color: white;
		background: linear-gradient(to 
		bottom, #0c1338, #3e3599);
	}
}

In general, if we want to include a number of different fonts faces of the same family on our webpage, we would need to load the same number of font files. The more font files you load, the more weight you add to your page, with an impact on performance — so it’s usually wise to load a maximum of three or four font files (depending on your performance budget).

Variable fonts change all that. They enable us to load a single font file for an entire font family. Although this file will usually be larger than a single font would, if you want to take advantage of different weights and styles, then a variable font is the more performant solution. If you've bought a whole font family, remember to stash it safely in cloud storage so you don't lose your files!

Not only that, but with variable fonts, we’re not limited to a small subset of font weights. When working with regular fonts, the available font weights are given in multiples of 100. Typically, 400 might be the regular weight, 300 the light weight, and 700 the bold weight — with different families supplying more weights or fewer. Variable fonts have an axis of variation, which provides us with a range of values for properties like the font weight. A font might have an axis of 1–900, which would provide us with access to 900 different weights!

The axis of variation is not just limited to weight. Variable fonts can have different axes for x-height, slant, serif length and contrast (to pick just a few examples) — meaning that a single font file could give us access to hundreds, or even thousands of variations! We could even animate these properties, enabling us to achieve some really cool effects. Mandy Michael (https://codepen.io/mandymichael) has a whole load of creative demos that really test the limits.

If you’re familiar with design tools like Photoshop and Illustrator, you might be aware of blend modes and how they can be used to produce different effects on images. The way blend modes work is to blend two or more layers together using mathematical formulae to calculate a resulting value for each pixel. The layers could be anything — images, gradients or flat colours. Some blend modes produce a darken result (e.g. multiply, which multiplies the pixel values of the layers), some a lighter one (e.g. screen and overlay). We don’t need to understand the maths in order to use them, however. Playing around with different blend modes can give us a good feel for which of them produce the desired results when combined with different layers.

.my-element {
	background: url(#myUrl),
		linear-gradient(45deg, rgba(65, 68, 
		244, 1), rgba(203, 66, 244, 0.5)),
		rgba(244, 65, 106, 1);
	background-size: cover;
	background-blend-mode: screen, 
	multiply;
}

.my-element {
	background: rgb(244, 65, 106);
	mix-blend-mode: multiply;
}

CSS filters are in fact simplified versions of SVG filters. The CSS filter property also takes a url() function, allowing us to pass in a URL to an SVG filter. SVG filters are extremely powerful and allow for some incredible image effects — but they’re also far more complicated than CSS filter functions! Sara Soueidan has a wonderful article series on Codrops if you’re interested in diving into coding your own custom SVG filters. Check out the article at https://tympanus.net/codrops/2019/01/15/svg-filters-101/

The CSS Shapes specification allows us to wrap text around floated geometric shapes, creating some interesting, magazine-like layouts. This is made possible using the shape-outside property. Similar to clip-path, we can give this property a basic shape function circle(), ellipse(), inset(), polygon(), or a URL to an SVG path, and in fact the two work in harmony very well! shape-outside will wrap our text effectively, but it won’t affect the floated element. If we want the text to look like it’s wrapping around the image or floated object, we can use the same value for clip-path. Use shape-margin to add whitespace between the shape path and the content wrapping it. Take a look at the Stuff & Nonsense site to see how CSS Shapes is used to wrap text around a central image.

CSS Grid is the first specification that’s designed for two-dimensional layout, allowing us complete control over building a layout and placing items on both the row and the column axis. Building a responsive layout with Grid doesn’t require calc() or hacking around with negative margins. The secret weapon is the fr unit — a new unit exclusive to grid. The fr unit sizes grid tracks (rows and columns) as a proportion of the available space. It takes into account any fixed tracks, gutters and content, then distributes the remaining space accordingly. Jen Simmons coined the term “Intrinsic Web Design” to describe the new era of web layout that Grid ushers in.

.grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 200px);
	gap: 20px;
}

.item {
	grid-column: 1 / 4;
	grid-row: 2;
}

.grid {
	display: grid;
	grid-template-columns: [image-start] 1fr
 1fr 1fr [image-start] 1fr;
	grid-template-rows: 200px [image-start]
 200px 200px [image-end] 200px;
	gap: 20px;
}

.grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 200px);
	gap: 20px;
	grid-template-areas:
		‘.          .          .         .’
		‘image image image .’
		‘image image image .’
		‘.          .          .         .’;
}

.image {
	grid-area: image;
}

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

TOPICS

Michelle Barker is a designer at Mud, with a passion for CSS.

8 state-of-the-art CSS features (and how to use them)

01. Custom properties

Setting defaults

How do custom properties differ from preprocessor variables?

02. Feature queries

How to use feature queries

03. Media queries

04. Variable fonts

Variation axis

Font-variation-settings

Registered axes

Custom axes

05. Graphical effects

Background-blend-mode

Mix-blend-mode

CSS filters

Convert to grayscale

SVG filters

Clipping and masking: beyond rectangles

Clip-path

Not inside the path

Mask-image

06. CSS Shapes

07. Scroll snapping

08. CSS Grid and layouts

How to use CSS Grid

Related articles