- how to create adaptive and scalable favicons
- new CSS features, plus a glimpse on the new ones that are coming
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.
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 most 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!
