Dear Smashing Friends,
What a magical time it is to be writing CSS! Not only do we have cross-browser tools for CSS layout with Grid and Flexbox, but we are rediscovering what layout even means in times of the new responsive with CSS container queries, CSS Cascade Layers, new CSS color spaces, and a relational selector :has.
In this newsletter issue, we’ve gathered a few useful articles and guidelines on shiny new CSS on how to use all these wonderful technologies, the state of browser support and a few pointers to get started.
We’ll also look into some of these CSS features in our upcoming free Smashing Hour with Sara Soueidan on Thu, January 20, 8 a.m. PT (5 p.m. CET). And if you’d love to dive even deeper, join New Adventures in Front-End, 2022 Edition, one of many upcoming Smashing online workshops that we have prepared for the next months.
For now though, let’s dive into everything CSS!
— Vitaly (@smashingmag)
1. CSS Cascade Layers
We all have run into CSS collisions, leaking styles and sudden regressions in our code bases. CSS always operates in a global namespace, it’s highly dependent on source order, and uses inheritance, which makes everything quite interdependent. Of course over time we’ve found ways to tame cascade with ITCSS, BEM, CSS Custom Properties and :where/:is, but now we seem to have resolved the issue for good.
Meet CSS Cascade Layers, a shiny new CSS feature initiated by Miriam Suzanne, which allows us to split CSS into several layers via the @layer at-rule and decide on the order of our layers (e.g. generic styles, component styles, 3rd-party styles). Once we’ve done that, the order will always be respected by the browser, so we don’t need to worry about the selector specificity of each selector in each layer, or the order in which CSS is declared in the stylesheet.
If some styles don’t live in a layer, they always come last in the layer order. Naming layers is optional, layers can be nested as well, !important still works as expected and if a @layer is nested inside a media query, and the condition isn’t matched, the @layer is ignored for the layer order. Bramus explains it all in fine detail how CSS Cascade Layers works, with examples and all the caveats to keep in mind.
Browser support? CSS Cascade Layers are already supported by Chrome and Firefox, coming in Safari TP and are already available behind a flag in Edge. What an incredible effort, and a quite game-changing feature, available at our fingertips already today! (vf)
2. Container Queries And How To Polyfill Them Already Today
Container queries have been on our wishlist for years now. The idea is to be able to modify an element’s behavior based on its container’s width or height instead of being tied to the viewport as it’s currently the case with media queries. For everyone who’s eagerly awaiting them — the good news — the spec has finally moved into being a Public Working Draft last month. If you’d like to dive deeper into how to define container queries and what they will look like in action, Stephanie Eckles’ wrote a great summary.
While we’re still keeping our fingers crossed that container queries will make it into major browsers this year, how about a reliable and fast container query polyfill? Surma put together a little polyfill that is easy to use and, well, just works. It weighs in with only 2.8kb and is supported by all modern browsers. If you’d like to tinker with it, Chris Coyier summarized everything you need to know. Happy polyfilling! (cm)
From our sponsor
Prototype 10x Faster And Make Design Handoff Easier
Learn how to design with fully interactive components and get the most of your coded design system. Read our article to discover how seamless design & product development workflow can get with new technology on the market. Learn more here →
3. Standardizing Focus Styles
What happens when you try to use the Tab key to navigate between interactive elements like buttons, links, and form elements? If you’re sighted, and you see the focus jump between elements in the DOM, good. If there’s only a barely noticeable visual change or none at all, Stephanie Eckles shares a handy technique to improve the situation for your visitors while making focus styles more manageable across your project — with the help of CSS Custom Properties.
The custom properties in Stephanie’s setup allow you to customize the outline style as needed to ensure the focus remains visible as the element’s context changes.
If you preferred to remove focus outlines in the past, because they were considered “ugly”, good news, Stephanie has two reasons why it’s time to overcome the habit. The first one: outline now follows border-radius in Chromium and Firefox which means there’s no need for dirty box-shadow hacks anymore.
And second, :focus-visible lets you ask the browser to use heuristics to only show focus styles when it detects input modalities that really require visible focus, i.e. keyboard users will see the focus styles on tab but mouse users won’t see them on click. Gold! (cm)
4. Upcoming Front-End & UX Workshops
You might have heard it: we run online workshops around front-end and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.
As always, here’s an overview of our upcoming workshops:
5. New CSS Color Spaces
When it comes to color definition in CSS, over the years we’ve learned to use rgba() and hsla() in addition to our good old HEX color definitions and currentColor. However, as the range of possible colors displayed on screen has evolved over the years, CSS color, which used to live in sRGB color space, was lagging behind. It just couldn’t access colors defined in a widely adopted P3 color space, and as a result, websites looked washed out. This has been changing now.
With new color functions such as lch(), we get access to about 50% more colors defined in P3, and around one-third more colors in most modern monitors. The syntax is much more readable, too. lch() is defined as a combination of lightness (L), chroma (C, color intensity) and hue (H). By changing the values, we can actually understand the effect we should have by changing these individual values.
Lea Verou has explained LCH in quite some detail already, Ollie Williams goes into intricacies and fallbacks of Expanding Gamut of Color on the Web on CSS-Tricks, and Michelle Barker wrote a thorough guide to modern CSS colors with HSL, HWB, LAB and LCH on yours truly SmashingMag.
The new color functions are currently supported only in Safari, and currently in development in Chrome and in discussion in Firefox. (vf)
6. More Than A Parent Selector
In December, Safari Technology Preview 137 dropped with unflagged support for CSS :has(). But did you know that what is often referred to as “the parent selector”, is way more than that? Bramus Van Damme takes a closer look.
The default cases of :has() indeed allow you to select a parent element that has certain children. But there’s more. figure:has(figcaption) { … }, for example, matches <figure> elements that have a <figcaption> as a child element while figure:has(figcaption) img {…} matches <img> elements that are a child of <figure> that contains a <figcaption> child element.
Just like CSS :is( ), CSS :has() has two specific traits: The selector list of :has() is forgiving and the specificity of :has() is that of its most specific argument. If you want to dive in even deeper, also be sure to check out Adrian Bece’s article. (cm)
From our sponsor
Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy
Earn your master’s degree online.
7. Color Gradient Vector Fonts
If you ever wanted to add gradients, compositing or blending to your fonts, you’ve probably stumbled upon the limitations that fonts bring with them. With COLRv1 Color Gradient Vector Fonts, this might be changing for good.
The new font format supports color fills, blending and compositing, and it allows us to transform glyph elements with translations, rotations and scale transformations. Plus, it solves scaling issues with bitmap fonts. Think about country flags, multi-colored letters and smaller emoji files, all built as cross-platform color vector fonts on the web. Browser support? The support will land in the upcoming Chrome 98. (vf)
8. Frontend Developer Resources 2022
There are so many fantastic resources out there that help front-end developers master the challenges they face every day. But where to begin? Nick Taylor put together the Frontend Developer Resources 2022 list with a few hand-picked courses, guides, talks, and tools that he found compelling in 2021 and that will keep you set in 2022.
The list features resources to level up your HTML and CSS, to help you understand JavaScript in more depth and finally get to grips with TypeScript, just like resources on accessibility, animations, Jamstack, testing and tooling. A selection of Nick’s favorite books and Twitch streams also made it to the list. Most resources are free, new ones will be added throughout the year. One for the bookmarks. (cm)
9. New On Smashing Job Board
10. Recent Smashing Articles
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
