March 2022 Frontend Updates: SVG Favicons and New CSS Features

This month we cover:

• SVG Favicons
• New CSS Features

SVG Favicons

Usually, frontend developers deal with many static PNG favicons for different sizes and resolutions. Browsers may need to show bigger versions of your icon in different places, like in new tab pages for the most frequent shortcuts, and there are many different pixel density screens. Also, with the advent of PWAs, favicons are no longer just a tiny website logo in a browser tab, they could also be application logos.

It’s time to rethink how we deal with favicons. Adam Argyle, from Google Chrome Developers team, has just published a very interesting video about creating a single adaptive and light/dark themed SVG favicon that’s really worth checking out.

Don’t miss Adam’s GUI Challenge series, it has many other useful videos about solving interesting UI problems.

New CSS Features

CSS3, along with HTML5, was a great success. Gradients, transitions, animations, transforms, variables and flexbox/grid layouts, to name a few, have seen massive adoption by the industry. A lot has been discussed about those, but CSS kept evolving and there are many features introduced since then that haven’t made as many headlines, but are very useful and unlock exciting design possibilities. Here are some of our favourites:

• Preference Queries: There are basically media queries you can use to respond to the user’s browser/system preferences. We spoke about them in one of our previous Frontend Updates, but check this article if you want to know more about them.
• Color Syntax: If you want pure black in CSS, you can do rgb(0, 0, 0). Today, however, you can do it in a no-comma style: rgb(0 0 0), and then, add alpha without using rgba(), just rgb(0 0 255 / 0.5). Same thing for hsl(). Just a small nicety, but this is how future color functions will only work. Check the new color spaces in the upcoming features section below!
• Variable Fonts: You probably are already familiar with web fonts. Now we have variable fonts, that unlock some new design possibilities and allow downloading different font variations in the same file, configuring them through the font-variation-settings property.
• Advanced clipping and masking: You can crop any element into shapes using SVG-like paths through clip-path. Check out mask-image and mask-mode too, which provide even more advanced masking features.
• Filters: These days we can do quite a lot of image manipulation only through CSS. You probably know about the filter property, but have you read about backdrop-filter, background-blend-mode or mix-blend-mode? Those are really powerful too!

Most of these have good browser support and are ready to use today.

Curious about what’s on the horizon? These are some of the most interesting upcoming features!

• More Viewport Units: The super useful ones will be dvh and dvw, as they factor in the actual usable space in the viewport, preventing issues like the browser UI overlapping your website elements. This is in Working Draft state! Check this article for more info about them.
• Native Nesting: We always had it in CSS preprocessors, but now it’s in First Public Working Draft state, so it’s a little bit closer to get it natively.
• Container Queries: It is just an Editor’s Draft at the moment, but they already have an implementation in Chrome behind a flag. With them, we will be able to make styling choices based on the size of a container element rather than the browser size alone.
• Container Units: Units relative to the container’s size. They are also in Editor’s Draft state and implemented behind a flag in Chrome. Check this article to know more about them.
• Scoping: The idea is being able to apply CSS blocks only to a certain area, like CSS-in-JS libraries do. This is another one in Editor’s Draft state, but take a look here if you want to know more.
• New color spaces:Through the color() function (in Editor’s Draft state), this feature will expand the web to the Display-P3 color space. We will also have support for the lab(), lch() and hwb() color spaces too. By the way, Display-P3 color is already supported on Safari!

Anything you’d like to add? Think there is something missing? Ping us on @whitespectrehq or LinkedIn, we’d love to read your feedback!