Around the Frontend World, vol. 14
To help you keep up in the fast-changing world of web frontend, we've put together the trends, new techniques, and tools that are shaking things up. Plus, some inspiring examples our FE team regularly shares with each other. Check them out.
November 1, 2023|4 minutes read
Support for :has
the selector in Firefox
The CSS :has selector isn't exactly new, but it keeps evolving and is worth keeping an eye on. Thanks to browser support, we'll soon be able to use it fully and make selecting page elements more efficient. That includes Firefox, where you can now enable it under the layout.css.has-selector.enabled flag. As of Nightly it's already on by default.
Definitely keep performance in mind and be careful when using it. If you haven't looked much into the :has selector yet, I'd recommend reading the article by Martin Michálek, which describes its use nicely. You might just find it comes in handy.
Animating a CSS mask
to display an image with an effect
If you build animations, check out the article that recently came out on Smashing Magazine. It shows how to use CSS masks to create smooth animations on images. That makes it easy to add interesting effects and improve a site's visual impression — because it's not just functionality that matters, but appearance too.
Coding
on steroids
Who wouldn't want to build one powerful website after another? On our team, efficiency without sacrificing quality is a big topic, and lately AI has been helping us with that a lot.
I also want to share some other ways to boost your efficiency. Most recently, Eliška enriched us by showing off her snippets and macros for VS Code (mainly for templating systems). Sure, there are great IDEs out there that do a lot for us — suggesting, autocompleting, highlighting, fixing. Then there's Emmet and similar tools. But you might still find yourself repeating the same bits of code over and over — when all it takes is a simple macro that spits the code out for you. All you do is change the parameters and data.
Go on, ask yourself — could you maybe write code faster, better, more efficiently?
Interested in frontend news?
Sign up for our newsletter or
follow us on social media.
Expanded support
CSS Subgrid
Since we want to write modern CSS, we occasionally check how browsers are doing with implementing new properties. In the recently released Chrome and Edge 117 we got full support for Subgrid. It works great, for example, for aligning the heights of elements (like headings) outside a product card.
If you're curious about other properties, they're described in detail by an article on VzhůruDolů .
According to CanIUse, overall support for this property currently sits at around 60%, but we're one step closer to being able to start using Subgrid. Right now, it mostly comes down to users' browsers.
New features
in Safari 17
New Safari 17 arrived along with macOS Sonoma. Among the new updates, one worth mentioning is the HTML element <search>, which carries semantic meaning for a search form. Safari also supports the “popover” attribute, which provides an interface for communication between a button and a popup window. Among the CSS properties, I'd point out the expanded support for font-size-adjust, which now allows for additional settings.
You'll find the complete list of browser updates in the article on WebKit.
In closing
Now you're up to speed on everything that's happened in the frontend world over the past few days. Don't forget to follow us so you never miss a thing going forward. We're keeping an eye on it for you!