#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 Workshops]( 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: - [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 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: - “[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. [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’
to break the text manually or a 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 - [Visual Designer]( at UCLA (Los Angeles / New York / Remote) - [Wordpress/PHP Developer]( at Razorbraille (Toronto) - [Design System Specialist]( at InVision AG (Düsseldorf, Germany) --------------------------------------------------------------- 11. Recent Smashing Articles - [Make Your May Magnificent (2023 Wallpapers Edition)]( - [Write Better CSS By Borrowing Ideas From JavaScript Functions]( - [Accessible Target Sizes Cheatsheet]( - [Could UX Be The Key To Unlocking Web3 Mass Adoption?]( - [The Potentially Dangerous Non-Accessibility Of Cookie Notices]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](