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.
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.
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.
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.