Smashing Magazine - #403: Advanced CSS In 2023

Advanced CSS techniques with container queries, :has() selector, CSS text balancing, a combined CSS-aspect-ratio-grid and new color formats in CSS. Issue #403 May 2, 2023 View in the browser

Smashing Newsletter

Boozhoo Smashing Friends,

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.

SmashingConf San Francisco 2023
Coming in just a matter of days: SmashingConf SF (May 23–26), all around cutting-edge frontend.

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.

The Math Behind Nesting Rounded Corners

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?

Building a combined CSS-aspect-ratio-grid

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.

Color Formats In CSS

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.

CSS :has( ) A Parent Selector Now

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.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:


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 And Style Queries

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:


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.

Crafting the Next.js Website

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)


From our sponsor

Northwestern’s Online MS In Information Design And Strategy

Northwestern’s Online MS In Information Design And Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more →


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.

CSS Text Balancing

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.

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


10. New On Smashing Job Board


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

#402: Useful Figma Plugins and Tools

Tuesday, April 25, 2023

Figma design specs, skeleton screens, handoff helpers, design systems, embedding ChatGPT into Figma and Figma templates. Issue #402 • April 25, 2023 • View in the browser Smashing Newsletter Bom dia

#401: Web Performance

Wednesday, April 19, 2023

Optimizing time to first byte, debugging CLS, optimizing LCP, React DevTools, priority hints and low-hanging web performance fruits cheatsheet. Issue #401 • April 18, 2023 • View in the browser

#400: Useful Templates For UX Designers

Tuesday, April 11, 2023

With usability testing Notion templates, UX research templates, UX questions bank and tools for better thinking. Issue #400 • April 11, 2023 • View in the browser Smashing Newsletter Selamat petang

#399: Web Accessibility

Tuesday, April 4, 2023

With accessibility tools, handbook, annotation kit, checklists, free courses and accessibility posters for free download. Issue #399 • April 4, 2023 • View in the browser Smashing Newsletter Boa noite

#398: Knowledge Hubs For UX Designers

Tuesday, March 28, 2023

Useful hubs on accessibility, design, UX research, design toolkits and front-end components — all neatly packed in one single newsletter. Issue #398 • Mar 28, 2023 • View in the browser Smashing

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏