May 7, 2024 Smashing Newsletter: Issue #455
This newsletter issue was sent out to 204,920 subscribers on Tuesday, May 7, 2024.
Editorial
When I first encountered CSS decades ago, I was utterly confused. I tried to float up and down, position everything absolutely, put !important on almost everything to style a native <select>-dropdown. Fast forward to today: we are living in a world of container queries, cascade layers, CSS nesting, :has selector, container queries, grid and subgrid and even new color spaces.
We also might have style queries and perhaps even state queries, along with balanced text-wrapping and CSS anchor positioning. With all these lovely new CSS features on the horizon, in this issue, we dive into the world of CSS with a few helpful techniques, deep-dive into specificity, hanging punctuation, and self-modifying CSS variables. Hopefully, they will come in handy in your work.
And, of course, if you’d like to dive deeper into CSS, we’ve got your back — with a few friendly events and SmashingConfs coming up this year:
- Smashing Meets Web Performance (May 7, free for everyone!
- SmashingConf Freiburg 2024 🇩🇪 — The Web, Sep 9–11
- SmashingConf New York 2024 🇺🇸 — Front-End & UX, Oct 7–10
- SmashingConf Antwerp 2024 🇧🇪 — Design & UX, Oct 28–31
If you can, please share it with your friends and colleagues — and of course, we’ll be absolutely delighted to welcome you to a very special, very smashing experience later this year!
— Vitaly
1. Self-Modifying CSS Variables
The CSS spec for custom properties does not allow a custom property to reference itself — although there are quite some use cases where such a feature would be useful. To close the gap, Lea Verou proposed an inherit() function in 2018, which the CSSWG added to the specs in 2021. It hasn’t been edited-in yet, but Roman Komarov found a workaround that makes it possible to start involving its behavior.
Roman’s approach uses container-style queries as a way to access the previous state of a custom property. It can be useful when you want to cycle through various hues without having a static list of values, to match the border-radius visually, or to nest menu lists, for example. The workaround is still strictly experimental (so do not use it in production!), but since it is likely that style queries will gain broad browser support before inherit(), it has great potential. (cm)
2. Hanging Punctuation In CSS
hanging-punctuation is a neat little CSS property. It extends punctuation marks such as opening quotes to cater to nice, clean blocks of text. And while it’s currently only supported in Safari, it doesn’t hurt to include it in your code, as the property is a perfect example of progressive enhancement: It leaves things as they are in browsers that don’t support it and adds the extra bit of polish in browsers that do.
Jeremy Keith noticed an unintended side-effect of hanging-punctuation, though. When you apply it globally, it’s also applied to form fields. So, if the text in a form field starts with a quotation mark or some other piece of punctuation, it’s pushed outside the field and hidden. Jeremy shares a fix for it: Add input, textarea { hanging-punctuation: none; } to prevent your quotation marks from disappearing. A small tip that can save you a lot of headaches. (cm)
3. Testing HTML With Modern CSS
Have you ever considered testing HTML with CSS instead of JavaScript? CSS selectors today are so powerful that it is actually possible to test for most kinds of HTML patterns using CSS alone. A proponent of the practice, Heydon Pickering summarized everything you need to know about testing HTML with CSS, whether you want to test accessibility, uncover HTML bloat, or check the general usability.
As Heydon points out, testing with CSS has quite some benefits. Particularly if you work in the browser and explore visual regressions and inspector information instead of command line logs, testing with CSS could be for you. It also shines in situations where you don’t have direct access to a client’s stack: Just provide a test stylesheet, and clients can locate instances of bad patterns you have identified for them without having to onboard you to help them do so. Clever! (cm)
4. Fixing aspect-ratio Issues
The aspect-ratio property shines in fluid environments. It can handle anything from inserting a square-shaped <div> to matching the 16:9 size of a <video>, without you thinking in exact dimensions. And most of the time, it does so flawlessly. However, there are some things that can break aspect-ratio. Chris Coyier takes a closer look at three reasons why your aspect-ratio might not work as expected.
As Chris explains, one potential breakage is setting both dimensions — which might seem obvious, but it can be confusing if one of the dimensions is set from somewhere you didn’t expect. Stretching and content that force height can also lead to unexpected results. A great overview of what to look out for when aspect-ratio breaks. (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:
- Scalable CSS Masterclass dev
with Andy Bell. May 9–23 - Design Token and UI Component Architecture workflow
with Nathan Curtis. June 6–14 - Accessibility for Designers ux
with Stéphanie Walter. June 3–12 - Typography Masterclass design
Elliot Jay Stocks. June 10–24 - Advanced Modern CSS Masterclass dev
with Manuel Matuzović. June 24 – July 8 - Designing For Complex UI Masterclass ux
with Vitaly Friedman. June 20 – July 2 - Design Patterns For AI Interfaces ux
with Vitaly Friedman. July 9–23 - Fast and Budget-Friendly User Research and Testing workflow
with Paul Boag. Jul 11–25 - Behavioral Design Workshop design
with Susan Weinschenk. Aug 22 – Sept 5 - Creating and Maintaining Successful Design Systems workflow
with Brad Frost. Aug 27 – Sept 10 - Interface Design Patterns UX Training (Autumn 2024) ux
with Vitaly Friedman. Nov 1 – Dec 2 - Jump to all workshops →
6. Cascade And Specificity Primer
Many fear the cascade and specificity in CSS. However, the concept isn’t as hard to get to grips with as one might think. To help you get more comfortable with two of the most fundamental parts of CSS, Andy Bell wrote a wonderful primer on the cascade and specificity.
The guide explains how certain CSS property types will be prioritized over others and dives deeper into specificity scoring to help you assess how likely it is that the CSS of a specific rule will apply. Andy uses practical examples to illustrate the concepts and simplifies the underlying mental model to make it easy to adopt and utilize. A power boost for your CSS skills. (cm)
7. Masonry Layout With CSS
CSS Grid has taken layouts on the web to the next level. However, as powerful as CSS is today, not every layout that can be imagined is feasible. Masonry layout is one of those things that can’t be accomplished with CSS alone. To change that, the CSS Working Group is asking for your help.
There are currently two approaches in discussion at the CSS Working Group about how CSS should handle masonry-style layouts — and they are asking for insights from real-world developers and designers to find the best solution.
The first approach would expand CSS Grid to include masonry, and the second approach would be to introduce a masonry layout as a display: masonry display type. Jen Simmons summarized what you need to know about the ongoing debate and how you can contribute your thoughts on which direction CSS should take.
Before you come to a conclusion, also be sure to read Rachel Andrew’s post on the topic. She explains why the Chrome team has concerns about implementing a masonry layout as a part of the CSS Grid specification and clarifies what the alternate proposal enables. (cm)
8. News From The Smashing Library 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
- Success at Scale by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out all books →
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.