May 2, 2023 Smashing Newsletter: Issue #403
This newsletter issue was sent out to 212,710 subscribers on Tuesday, May 2, 2023.
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. 🎁
You can always unsubscribe with just one click.
Previous Issues
- How To Measure UX
- New In Front-End
- Web Accessibility
- Motion And Animation
- Enterprise UX
- Design Systems
- New In Front End
- Useful Inspiration For Designers
- It’s Figma time!
- Design Career
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.