CSS Masonry Layout, Self-Modifying CSS Variables and Hanging Punctuation Issue #455 ⢠May 7, 2024 ⢠[View in the browser]( [Smashing Newsletter]( Dobryi vechir Smashing Friends, 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 -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. [SmashingConf Freiburg 2024](
Meet [SmashingConf NYC 2024]( a friendly conference for designers and front-end engineers. 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. [Self-Modifying CSS Variables]( 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 exdents punctuation marks such as opening quotes to cater for 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. [Hanging punctuation in CSS]( 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. [Testing HTML With Modern CSS]( 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) --------------------------------------------------------------- From our sponsor Sentry ð¤ Supabase: Find The Slow Queries In Your Database [Sentry](
Learn how to improve the performance of your PostgreSQL database and get real-time error alerts at our upcoming workshop. Plus [join us live]( and youâll have a chance to win swag. --------------------------------------------------------------- 4. Fixing aspect-ratio Issues The aspect-ratio property shines in fluid environments. It can handle anything from inserting a square-shaped to matching the 16:9 size of a , 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](. [Things That Can Break aspect-ratio in CSS]( 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 forces 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. [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: - [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](. [A 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) --------------------------------------------------------------- From our sponsor Where Teams Unite Design And Development [Zeplin](
Doing developer handoff in your design tool might consolidate one workflow, but your team pays for it elsewhere — with file bloat, rework, and losing critical details across modes and pages. [Zeplin]( is an equal, dedicated space for the entire team to align on the build, faster. [Try it for free](. --------------------------------------------------------------- 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. [Help us invent CSS Grid Level 3, aka Masonry layout]( 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, 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 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 →]( [Success At Scale](
Itâs here, and itâs shipping! [Success At Scale]( a new book by Addy Osmani. [Get the book]( or [browse the complete library](. --------------------------------------------------------------- 9. Recent Smashing Articles - [Combining CSS :has() And HTML For Greater Conditional Styling](
- [Longing For May (2024 Wallpapers Edition)](
- [Lessons Learned After Selling My Startup]( --------------------------------------------------------------- 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](