Smashing Magazine - #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.

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 Events
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.

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 <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

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern 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.

Color Gradient Vector Fonts

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.

Frontend Developer Resources 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

unsubscribe update preferences view in your browser

Older messages

#334: Getting Ready for 2022

Tuesday, January 4, 2022

With podcasts, mentorship, inspirational websites and self-reflecting yourself as the new year begins... Issue #334 • January 4, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends,

#333: Boosting Productivity in 2022

Tuesday, December 28, 2021

With advice on how to makie better estimates, achieving more productive meetings and useful checklists for a successful 2022! Issue #333 • December 28, 2021 • View in the browser 💨 Smashing Newsletter

#332: Enterprise UX

Tuesday, December 21, 2021

With tips and tricks on improving usability while designing better dashboards, tables and UI design elements. Issue #332 • December 21, 2021 • View in the browser 💨 Smashing Newsletter Dear Smashing

#331: Goodies and Trends 2022

Tuesday, December 14, 2021

With trends in 2022, open source mobile wireframing kit, tools and resources for web fonts and a bunch of lovely Christmas goodies. Issue #331 • December 14, 2021 • View in the browser 💨 Smashing

#330: Advent Calendars On Front-End and UX

Tuesday, December 7, 2021

With a little surprise, JavaScript, web performance and a treasure chest of useful resources. Issue #330 • December 7, 2021 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, With the

Justina Blakeney on Defining Her Own Title, Her Debut AD Cover, and More

Thursday, May 19, 2022

Plus, 22 seriously inspiring staircases that know how to make a grand entrance (image) Architectural Digest AD PRO Logo Image may contain: Staircase, Banister, and Handrail 22 STUNNING STAIRCASES FROM

Platform Design, Naming Colors, Interactive Backdrop, Spreadsheet Concept, All at Once

Thursday, May 19, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 19 2022 A Growth-Focused Intro to Multi-Sided Platform

This Fashionable Luxury Retailer Just Launched a Home Category

Wednesday, May 18, 2022

Plus, the 9 best green paint colors designers turn to again and again (image) Architectural Digest AD PRO Logo pile of pillows outside LUXURY E-RETAILER MYTHERESA INTRODUCES A HOME CATEGORY—ZAHA HADID

116 / Designer starter resources, free loaders, notion templates and beautiful agency sites

Wednesday, May 18, 2022

Product Disrupt Logo Product Disrupt Half-Monthly May 2022 • Part 1 View in browser Image Designer Starter Pack Curated list of resources to learn Figma. Very useful to get started in Figma and handy

Unlock a New Member Benefit

Wednesday, May 18, 2022

Learn more about our free online courses ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Beyond sRGB, Rebellious Web Design, Shopify UX, Pixels vs Rems, Porsche Taycan

Wednesday, May 18, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 18 2022 Principles of Color? Going Beyond sRGB blog.jim-

Can Cat-Friendly Design Be Chic?

Tuesday, May 17, 2022

Plus, dive into 20 of the most inviting pools from the AD archive (image) Architectural Digest AD PRO Logo Guest room at the Casa Cody in Palm Springs, California HOW TO LAND—AND SURVIVE—YOUR FIRST

Your PR questions answered

Tuesday, May 17, 2022

Advice from Nora Wolf Welcome to the first edition of PR Questions with Nora. This new monthly newsletter feature was inspired by you! If you've attended one of our recent PR workshops, you likely

#353: Dashboards and Data Visualization

Tuesday, May 17, 2022

Dashboard design, better charts and how to make better decisions around data visualization. Issue #353 • May 17, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, I had a dream

Roboto Flex

Tuesday, May 17, 2022

Hi Reader, these are my design and frontend picks this week. Highlights of the week Get the most of built-in interactivity of coded UI components - Design with fully interactive elements that make