Three CSS Features You May Not Know

Lately, most of the buzz in frontend development has been all about the newest JavaScript frameworks and runtimes. If you’re someone who hasn’t kept up with the latest in the CSS spec, you’ve come to the right place. Whether you’re a seasoned pro or an aspiring developer, the features we’re about to dive into are well worth adding to your toolkit.

1. backdrop-filter

The backdrop-filter css propery allows you to apply graphical effects like blur or brightness to the area behind an element. Great for creating frosted glass effects or enhancing overlay readability. There are eleven different filters. The two that I find useful in many situations is blur and grayscale. I created a simple demo in CodePen.

• MDN
• Can I Use

See the Pen CSS backdrop-filter on CodePen.

2. Gap

Lets you set the spacing between grid or flex items without resorting to margin hacks. Before, you might set a margin-top: 1rem and add an extra margin-top: 0 to a nth-child(1) selector so that the first element doesn’t have the margin. With gap, you can set the space between elements. This is best illustrated with a demo.

• MDN
• Can I Use

See the Pen CSS Gap Demo on CodePen.

3. aspect-ratio

aspect-ratio allows you to set a preferred aspect ratio for an element, making it easier to maintain consistent dimensions. It is very useful to use on images in a grid layout where you want every image to be uniform. For example, you can use aspect-ratio on a blog index layout so that all the thumbnails will look the same. In the following code, I have the images set to an aspect-ratio of 1 to 1 and the object-fit to cover so that it’ll fill the element without being distorted.

• MDN
• Can I Use

img {
  height: 120px; // this makes all the images the same height
  aspect-ratio: 1/1;
  object-fit: cover;
}

Here’s a demo of it in action.

See the Pen CSS aspect-ratio Demo on CodePen.

That’s All for Now

This may become a series as changes to CSS are moving faster than ever.