#465: CSS

CSS container queries, style queries, custom functions, native CSS mixins, inline conditionals, transition to auto. Issue #465 • July 16, 2024 • [View in the browser]( [Smashing Newsletter]( Grüezi Smashing Friends, I don’t know if you’ve noticed it. It certainly snuck up on me. Somehow at some point in time, CSS got smart. Like really, really smart. The language for styling the web with a quirky cascade is evolving from a standard paintbrush into a full-fledged design application. The shift is significant, but not totally unexpected. CSS has always been quite smart. The Cascade itself is an elaborate algorithm that evaluates styles and conditionally applies them to elements based on the best “match”. Selectors, after all, [are conditional statements](. It took a long time for that to click with me. For the longest time, I treated my work as if my only duty was to select and style. Select, style. Select, style. Select, sty… My posture never really changed, that is, until I had an epiphany: [everything in CSS is relative](. We have rem units that are relative to root’s font-size, em units relative to that of an element’s parent container, and even px units relative to nothing but themselves, among many other features that depend on the relationship between elements. It took me years to get there — mind you, I began writing CSS in 2003. [Container queries as an example]( Example of how media query cannot be reliably linked to element dimensions. Meet [CSS Container Queries](. By Adrian Bece. But CSS is more than relative: CSS is conditional. There’s a significant distinction between the two as relativity is all about context while conditional behavior is logical. Sure, it may not follow your personal line of logic, but [CSS is logical](. That’s what you’ll find in this edition of the newsletter. CSS is only getting smarter and more logical and we’ve seen the best examples of that with CSS features that have shipped over the past year. We’re rounding up several of those features not only to offer a set of CSS specifications but also to help paint a more complete illustration of just how smart CSS is becoming in modern web development. — [Geoff Graham]( --------------------------------------------------------------- 1. Container (And Style) Queries You’ve likely heard a bunch about CSS Container Queries. There’s already great information about them published on Smashing Magazine, including deep explanations of [what they are]( and their [use cases](. Container queries even enjoy an [excellent level of browser support]( to date. [Style queries as an example]( One the left, we query the size; and on the right, we query for the style. Meet [CSS Container Style Queries](. By Ahmad Shadeed. But have you heard about Container Style Queries? They are born from the same [CSS Containment Module Level 3 specification]( but style queries are still in the works. When style queries officially ship (I believe they will), we’ll have yet another new way to apply styles conditionally. What exactly is a style query good for? [Juan Diego Rodriguez recently explored that question]( and came up a little empty-handed, but also sees style queries as less a feature than it is part of a much bigger vision about the future of CSS — a vision where style queries are needed for the type of logic we’ve covered throughout this newsletter. Juan’s article is a great one for wrapping your head around the concept, as is [Miriam’s comment on the article]( clarifying key concepts. (gg) --------------------------------------------------------------- 2. Custom Functions No, no, not the everyday functions that serve some sort of single purpose, like calc(), min(), max() and whatnot, but custom functions that are more like custom properties... but way more advanced. What makes custom functions a level up from custom properties is that they act like a custom property contained in a var() but the type check happens after computation. This allows for more complex statements that we can wrap in a new @function rule that contains a condition and the expected result. This is pulled straight from [the very early draft]( illustrating how we can calculate the area of a circle in a custom function: @function --circle-area(--r) { result: calc(pi * var(--r2)); --r2: var(--r) * var(--r); } That’s great in that we can keep logic separate from style rules, whereas today we often perform calculations directly in style rules. (gg) --------------------------------------------------------------- From our sponsor Stop Worrying About Servers, Traffic, Or Scaling And Embrace Autonomy [Cloudways]( Cloudways Autonomous offers a robust, fully-managed WordPress hosting solution, designed for developers with auto-scaling powered by Kubernetes to effortlessly handle traffic surges. It comes pre-configured with Cloudflare Enterprise and Object Cache Pro Plugin, ensuring top-notch security and performance. Additionally, every plan includes unlimited PHP workers. [Try free with $100 credits](. --------------------------------------------------------------- 3. CSS Mixins If you had clicked through to the draft specification for custom functions, you may have noticed that the draft is titled "CSS Functions and Mixins" — meaning we’re dealing with two new feature proposals. The draft’s URL slug is even /css-mixins despite the lack of a "mixin" definition. You may be fairly familiar with mixins if you’ve written CSS with a preprocessor, such as Sass, PostCSS, or Less. The CSS version is fairly similar to those implementations, though more CSS-y. Where @function allows us to produce an expected value represented by a custom property, @mixin is designed to return expected style declarations for making certain sets of styles reusable according to the DRY principle. Miriam Suzanne (who [recently]( joined us for a [Smashing Hour]( is an editor on the spec draft and has [published a thorough explainer]( of the ideas and goals for both mixins and functions. (gg) --------------------------------------------------------------- 4. 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: - [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]( UX with Susan and Guthrie Weinschenk. Aug 22 – Sept 5 - [Creating and Maintaining Successful Design Systems]( workflow with Brad Frost. Aug 27 – Sept 10 - [Cascading Style Systems: Resilient & Maintainable CSS]( dev with Miriam Suzanne. Oct 14–18 - [Accessible Typography for Web & UI Design Masterclass]( design with Oliver Schöndorfer. Oct 10–18 - [Smart Interface Design Patterns]( ux with Vitaly Friedman. Video + Live UX Training - [Jump to all workshops →]( --------------------------------------------------------------- 5. Inline Conditional if() Statements The CSS Working Group resolved to press forward with [adding an if() function]( to the CSS Values Module Level 5 specification that would apply styles to elements conditionally based on a certain condition. I wrote about it [last week]( but Lea Verou is leading the push and has a couple of incredibly helpful posts for understanding [how the if() function might work]( and [the workarounds we’ve been using]( that the function could abstract away. (gg) --------------------------------------------------------------- 6. Transition To auto OK, so this isn’t exactly a new "conditional" CSS feature, but it’s one that many of us have wanted for over a decade and it’s additional proof that the future of CSS is just plain smarter than where it’s been in the past. Here’s the scoop: A new calc-size() function is being used to experiment with an approach to determine the size of auto even when we have no idea what auto equals — which is always the case unless we explicitly declare fixed-size dimensions on an element. We’ve never been able to transition an element from, say, height: 0 to height: auto (or vice versa) because auto is an unknown value before computation happens. Declaring calc-size(auto) fixes that. We can supply it with just a vague keyword about an element’s dimensions — calc-size(auto) — to go from a fixed value to the element’s intrinsic size and back. This is all very experimental (only Chrome Canary for now) and likely to change before it becomes an official feature, but how neat is it that CSS is getting to the point where it understands what certain keywords evaluate to before they’re evaluated? Check out Chris Coyier’s [early look at the idea](. (gg) --------------------------------------------------------------- 7. Recently Published Books 📚 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](. --------------------------------------------------------------- 8. Recent Smashing Articles - [When Friction Is A Good Thing: Designing Sustainable E-Commerce Experiences]( - [How To Design Effective Conversational AI Experiences: A Comprehensive Guide]( - [Useful Customer Journey Maps (+ Figma & Miro Templates)]( - [Tales Of An Eternal Summer (July 2024 Wallpapers Edition)]( --------------------------------------------------------------- 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), 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](