July 19, 2022 Smashing Newsletter: Issue #362

Editorial

The state of CSS in 2022 is nothing short of breathtaking. With so many features being built and shipped regularly in modern browsers, it might feel like it’s an early Christmas almost every month. From cascade layers now supported in all modern browsers to :has and container queries landing soon.

In this newsletter, we look at some fine details of CSS: from some of the hidden treasures of CSS variables to how to make CSS more reliable and flexible with color-mode and defensive CSS. We hope you’ll find some useful snippets here.

You will also find plenty of articles all around CSS in our CSS section on SmashingMag, and of course, CSS will be the topic debated and discussed in fine detail in our upcoming SmashingConfs. But for now, happy reading, and happy CSSing, everyone!

— Vitaly (@smashingmag)

1. Defensive CSS

When we build our sites and applications, we often have a particular mock-up in mind. In that mock-up, words often have the almost perfect length, images are perfectly sized, and the content is available all the way. In practice though, it’s not always going to be the case. Wording quickly becomes lengthy, the size of images changes, and on suboptimal connections, the page renders with plenty of unexpected layout shifts.

Defensive CSS tries to fix that. Ahmad Shadeed’s new project provides practical CSS tips that help in building scalable, future-proof user interfaces. Ahmad provides plenty of useful tips on common challenges such as text appearing over an image, component spacing, and long content. A great resource worth learning to ensure that we don’t accumulate technical debt when building our UI components. (vf)

2. CSS Variables Secrets

We think that CSS Custom Properties are just that: a few CSS variables that we can dynamically adjust in the browser. As it turns out, they can do so much more. Our friends at CSS Day from Amsterdam have released videos of CSS Day talks to watch for free. One of them is Lea Verou’s deep-dive on CSS Variables Secrets.

In the talk, Lea goes into fine detail showing four demos and uncovering some technical gotchas of using CSS variables extensively for the outlined button, the glossy button, the bar chart and the speech bubble. Worth watching!

As a bonus, you can also look into Andy Bell’s session on “Be the browser’s mentor, not its micromanager”, in which Andy goes into detail on all things CSS layout, fluid type, space, and modern CSS capabilities to build resilient frontends. (vf)

3. Conditionally Styling Components With CSS

Whenever we want to introduce some logic to CSS, chances are high that we’ll be experimenting with checkboxes and radio buttons. In fact, if you want to change the styling of components conditionally, based on the number of siblings, you could use quantity selectors in CSS or CSS comparison functions.

But what if you wanted to change the styling based on how many checkboxes are checked? Preethi’s article on Conditionally Styling Selected Elements goes into all the fine details on how to make it work by combining :before and :after pseudo-elements with :nth-of-type selectors.

A fascinating read with plenty of convoluted selectors — but it works! You can also check the demo with a calendar using that technique. Genius! (vf)

4. Upcoming Online Workshops

That’s right! We run online workshops on frontend and UX, 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.

As always, here’s an overview of our upcoming workshops:

• The React Performance Masterclass Dev
  with Ivan Akulov. July 28 – Aug 11
• Designing The Perfect Web Forms UX
  with Vitaly Friedman. Aug 29–30
• Interface Design Patterns UX Training UX
  with Vitaly Friedman (Live UX training + video course). Sep 9 – Oct 7
• Designing Better UX With Top Tasks Workflow
  with Gerry McGovern. Sept 13–27
• Designing Better Products Masterclass UX
  with Stéphanie Walter. Sept 21 – Oct 5
• Optimistic UI Masterclass Dev
  with Zell Liew. Oct 6–14
• Designing for Emotion Masterclass UX
  with Aarron Walter. Oct 17–18

5. Better Multi-Lingual Websites With CSS

Imagine that you are working on a project which has to support Arabic, Hebrew and Persian languages. The way you write your CSS needs to accommodate these languages, and this goes for all the fine details, i.e. from margins and paddings to alignment and fonts. Where do you start?

In “How to make your multilingual website suitable for RTL with only HTML and CSS,” Declan Rek highlights a few critical adjustments you’ll need to make: from CSS logical properties to Unicode ranges.

And if you need a slightly more comprehensive guide, Ahmad Shadeed has published RTL Styling 101, a very comprehensive one with common mistakes, use cases, examples and RTL design considerations. (vf)

6. Better Scrolling With CSS

The scrollbar seems to be one of those little things that we can’t do much with. Surely we can change the color of the scrollbar with scrollbar-color and its width with scrollbar-width, but that’s pretty much it, isn’t it?

Well, not quite. If a website supports a dark theme, we probably want the scrollbar to be visible there as well. We can use the color-scheme property or meta tag to defer to OS preference and override it based on the user’s selected theme. You can also find a 10-min video introduction to color-scheme by Zoran Jambor.

We can also prevent layout shifts with scrollbar-gutter: stable and conditionally style scrollbars based on whether the user is on a high-accuracy pointing device (e.g. mouse) or a low-accuracy one (e.g. touchscreen) with @media (pointer: fine) {}. You can find a lot more in Mayank’s detailed blog post on “Better scrolling through modern CSS”, with plenty of useful tips and techniques — all related to scrollbars.

Ah, and if you want even more fun with scrolling, Lynn Fisher has got you covered with a piece on Fun Parallax Scrolling with CSS. (vf)

7. CSS Style Queries

For years, we’ve been dreaming of the ability to query container width rather than the browser width. Container queries are now coming to the browsers, landing in Chrome 106 and Safari 16 later this year. That’s a major milestone, of course, but why stop there?

As Una Kravets writes in “Style Queries,” we could also allow querying the computed values of the container in which a component lives. For example, if the background of the parent container is black, you might want to change the text color to white. Or we could change the styles of the children based on the container’s flex-direction. Or even query CSS custom properties and change the layout based on them.

Of course, we aren’t quite there yet, and the main focus lies on shipping container queries first, but if you can think of some specific use cases where they would come in handy, leave a note on Una’s post or underneath Bramus’ thread on Twitter. (vf)

8. Previous Sibling CSS Selector

With the relational :has selector landing in browsers, we can use it to target the parents of a child. For example, if we want to select buttons that have an element with .icon as a child, we could do that with button:has(.icon) { }. And if we wanted to select article elements that have an h2 element followed by a paragraph element, we could do that with article:has(h2 + p) { }. But what if we wanted to select all previous siblings of an element?

For example, if we wanted to select every link that is the only child but also lives within a paragraph that shares the same parent with hr? We could do that with p:has(+ hr) a:only-child { }.

In “A Previous Sibling Selector,” Jim Nielsen shows the use case where he came up with this selector, and even provides a CodePen demo of it at work. At the moment, :has is only supported in Safari, but its support is steadily growing, landing in Chrome 105–106. Heads up to Stefan for the link! Neat! (vf)

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.