#335: New CSS Adventures

With hand-picked CSS guides, inspiring talks, cross-browser tools and the latest CSS practices to dive into in 2022. Issue #335 • January 11, 2022 • [View in the browser]( 💨 [Smashing Newsletter]( 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. [A Smashing Hour With Sara Soueidan]( 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. [CSS Cascade Layers]( 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](. [Container Queries]( 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 [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. [Standardizing Focus Styles With 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. [Smashing Online Workshops]( 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]( - [Accessible Front-End Patterns Masterclass]( Dev with Carie Fisher. Jan 20 – Feb 3 - [New Adventures In Front-End, 2022 Edition]( Dev with Vitaly Friedman. Feb 3–17 - [Front-End Testing Masterclass]( Dev with Gleb Bahmutov. Feb 8–16 - [Jump to all online 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. [New CSS Color Spaces]( 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 CSS :has() selector is way more than a Parent Selector]( 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

elements that have a