May 2, 2023 Smashing Newsletter: Issue #403

Editorial

I can vividly remember the first time I encountered CSS back in the day. I would spend hours trying to understand why it’s possible to float to the left, but not to the top. I was studying weird hacks and workarounds to tweak the outcome to my liking. CSS felt a bit adventurous and mysterious and getting things just right seemed to be an exercise in patience and craft.

I couldn’t even imagine just how far CSS would come a few decades later. Today, it’s literally nothing short of phenomenal, with CSS container queries, cascade layers, relational selector :has, new color formats, and so many other things!

And that’s exactly what we’ll look into in today’s newsletter — with a few case studies, tutorials, and useful articles.

If you’d like to dive deeper into the world of CSS, we have a few lovely events coming up later this year:

• SmashingConf Frontend @ SF 🇺🇸 (May 23–26) all around frontend, CSS, web performance, JavaScript, Next.js and accessibility.
• Accessible Components From Design To Development (online, Sep 14–22) with a deep-dive into accessibility, CSS and JavaScript by Carie Fisher.
• SmashingConf Freiburg 🇩🇪 (in-person + online, Sep 4–6) with adventures into design systems, accessibility, CSS, JS and web performance.
• SmashingConf Antwerp 🇧🇪 (in-person + online, Oct 9–11), our shiny new conference on design systems, accessibility, usability, product design and complex UI challenges.

And thanks to the passionate and kind people working day and night on CSS, and wonderful people like yourselves sharing what you’ve learned and spreading the word with people!

— Vitaly (@vitalyf)

1. Nesting Rounded Corners

How to create the perfect rounded corners? Paul Hebert wanted to make sure the rounded corners in his project were consistent and created a –border-radius custom property to achieve that. However, using the same border radius when nesting two elements isn’t the best idea, as Paul found out. In his post “The Math Behind Nesting Rounded Corners,” he explores why and how we can do better.

To create rounded corners that nest nicely, the inner element needs a smaller border-radius than the outer element, as Paul shows. He built an interactive demo to visualize the effect and also shares a CSS calc statement for dynamically calculating border-radius tokens for use in design systems. A small tip that adds a bit of extra polish to your interfaces. (cm)

2. Combined CSS-Aspect-Ratio-Grid

Imagine you want to build a layout that consists of several rows, with two images with a fixed aspect ratio in each row. The aspect ratios vary from 16:9 to 3:4. The tricky part: You want all your images to have the same height and fill the entire row, whether they have a landscape, portrait, or square format. How would you solve the challenge?

Nils Binder shares a clever solution to the problem: “Flex-Grow-Magic.” It relies on Flexbox to create a container that provides a flex environment and sets the needed gap property. Instead of setting the width or height of the items, you can tell them how much they are allowed to grow. The result is a nice, even row of images that becomes responsive when you sprinkle in some Holy Albatros Magic. (cm)

3. Color Formats In CSS

Which color format should you use in CSS? Hex codes, RGB, HSL, or LCH? Josh W. Comeau takes you on a tour through the world of color. You’ll explore how different color formats work, how you can decipher them, and how to use them to your advantage.

While hex codes are a favorite among a lot of developers, Josh’s recommendation is to use HSL because it is intuitive and closely aligns with how we tend to think about color. Combine it with CSS variables and calc, and with some practice you won’t even need a color picker to be able to manipulate color on the fly and with nothing but vanilla CSS. A fantastic read with lots of examples and interactive color pickers that make understanding color formats in CSS fun and easy. (cm)

4. The Mighty Powers Of :has()

For a long time, there was no way to select the parent of an element in CSS. The :has pseudo-class changes that. Currently supported in all modern browsers except Firefox, there are a lot of potential use cases where :has can make a developer’s life easier. Not just as a parent selector. Matthias Ott explores some of the possibilities of how :has can help us write more flexible and robust CSS.

As Matthias explains, you could use :has to select all button elements which include an svg element, or to style a form element when a checkbox inside has been checked. You could even use it to adjust a CSS Grid layout based on the number of elements inside — something that wasn’t possible before. Or do it like Zoran Jambor and use :has to build a pure-CSS direction-aware hover effect for your navigation menu bar. A mighty little selector.(cm)

5. Upcoming Workshops and Conferences

That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. 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.

As always, here’s a quick overview:

• Architecting Design Systems Workflow
  with Nathan Curtis. May 11–19
• Data Visualization Masterclass Dev
  with Amelia Wattenberger. May 4–18
• SmashingConf SF 🇺🇸 — May 23–26
• The Power of Storytelling UX
  with Chiara Aliotta. May 30 – June 14
• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. June 12–26
• Figma Workflow Masterclass UX
  with Christine Vallaure. June 15–23
• The React Performance Masterclass Dev
  with Ivan Akulov. June 29 – July 13
• Smart Interface Design Patterns Video Course UX
  9h-video + Live UX Training with Vitaly Friedman
• Jump to all workshops →

6. Container Queries And Style Queries

The cornerstone of responsive design was all about media queries. We query the screen’s width to decide how components should change. With container queries and style queries, it’s changing for good.

Container queries allow us to define the container that a component should query to decide how it should appear. With style queries, we can query the style of any parent element within a page and apply styles to its children based on the styles of its parent. Browser support? It’s absolutely phenomenal.

Here are a few useful pointers to guide you in the right direction if you want to learn more:

• “Digging Deeper Into Container Style Queries” by Geoff Graham
• “Getting Started With Style Queries” by Una Kravets
• “Combining @container And :has()” by Una Kravets
• “Size Container Queries Can Detect Landscape / Portrait Orientation” by Stefan Judis
• “What’s New In CSS?” by Bramus
• With container queries come container query units that could be used to simplify fluid typography (by Stephanie Eckles)

7. Crafting The Next.js Website

In February, Rauno Freiberg, Glenn Hitchcock, and Alasdair Monk started building a new website for Next.js. And while the design is rather simple, it includes some lovely finesses. Rauno shares a fantastic write-up in which he takes a closer look at some of the implementation details. Inspiration is guaranteed.

Among the things you’ll discover are flexible container grid lines, delightful CSS animations, focus states that shine with consistent focus styles, and layout details like offset quotation marks. Rauno also shares a tiny coding habit that he picked up while working on the project. A great behind-the-scenes look with lots of takeaways and ideas for your own projects. (cm)

8. CSS Text Balancing

We all know those headlines where the last word breaks onto a new line and stands there alone, breaking the visual and looking, well, odd. Now, how can we do better? Of course, there’s the good ol’ <br> to break the text manually or a <span> to divide the content into different parts. But have you heard of text-wrap: balance already? Ahmad Shadeed takes a closer look at how the native CSS solution can help us make our headlines look more consistent.

By applying the text-wrap: balance property, the browser will automatically calculate the number of words and divide them equally between two lines. This not only comes in handy for headlines, but also for page titles, card titles, tooltips, modals, and FAQs, as Ahmad shows. The feature is currently limited to four lines, and there’s only experimental support for it in Chrome Canary. Fingers crossed that browser support will improve soon. (cm)

9. Interactive Guide To Flexbox

Is Flexbox obsolete now that CSS Grid is well-supported in modern browsers? Not at all! When it comes to building fluid UIs, it still reigns supreme, as Josh W. Comeau shows in his Interactive Guide to Flexbox.

Whether you’re a CSS beginner or have been using Flexbox for years, Josh’s guide helps you refine your mental model for Flexbox and build an intuition for how it works. You’ll learn the basics but also go deep down the rabbit hole to explore obscure tricks and eye-opening realizations about Flexbox. A great overview with lots of practical demos that’ll get you fit for building flexible, dynamic layouts. (cm)

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

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.