#414: CSS

Modern CSS, proportional UI components, stacking elements, text reveal, sticky content and the ABCs of CSS. Issue #413 • July 18, 2023 • [View in the browser]( [Smashing Newsletter]( God eftermiddag Smashing Friends, It’s CSS time, everyone — with some useful articles, tools and resources that might come in handy when you want to better structure your CSS or use shiny new CSS features that are available in all browsers. We hope you find some gems in there! And if you are looking for a deep dive, Geoff has published a wonderful article on [Writing CSS in 2023]( and how CSS has evolved over these years — with plenty of useful examples and resources. You might find quite a few interesting pieces in the [CSS section on SmashingMag](. Happy reading, everyone! [Advanced Form Control Styling With Selectmenu And Anchoring API]( The future is here: [Advanced form control styling]( one of our recent articles on CSS. And in the Smashing department, we are getting ready for a busy and exciting months with new workshops and conferences coming our way: - [Figma Workflow Masterclass]( with Christine Vallaure (July 20–28), - [SmashingConf Design & UX]( (Oct 9–12 in Belgium 🍫), - [Accessible Front-End Components]( with Carie Fisher (Sep–14–22), - [Interface Design Patterns UX Training]( with yours truly (Sep 8–Oct 6). In the meantime, though, happy reading and browsing into the wonderful, magical world of CSS! — [Vitaly]( --------------------------------------------------------------- 1. So You Want To Build A Comment Component How would you go around using all the shiny modern CSS features to build something as common as a comment component? In his article on [rebuilding a comment component]( Ahmad Shadeed goes into all the fine details and intricacies of building components with :has, size container queries, style queries, and CSS subgrid — explaining his thinking and his process step-by-step. [So You Want To Build A Comment Component]( If you are looking for a more general deep-dive into modern CSS for dynamic component-based architecture, Stephanie Eckles has put together [a thorough guide]( on how to use modern CSS for pretty much anything — from CSS resets to CSS cascade layers and CSS nesting. Fantastic reminders that it’s a good idea to rethink how we write CSS today. (vf) --------------------------------------------------------------- 2. Proportional UI Components How would you build proportional UI components for your design system? We could start with fluid typography, spacing, and grid with [Utopia]( at first and then scale up to components using the scales we have defined. To take it further, we could use [Proportio]( a little tool to explore and apply typographic scales to icons, sizing, spacing, and the composition of components. [Proportional UI Components]( Upon selecting settings for your scale on typography, shapes, components and containers, the tool creates a preview of the scale applied to UI components, with an option to export ready-to-use CSS as CSS variables. Ultimately, the entire design is based on type scale and grows and shrinks naturally. A neat little helper by Nate {NAME}. (vf) --------------------------------------------------------------- 3. Stacking Elements With CSS Grid Positioning one element behind another has always had a go-to solution: absolute positioning. Declare position: absolute on the element you want to be covered and set z-index: -1 on it. Elements are z-index: 0 by default, so the -1 value ensures an element is always below others, so long as there are no elements that go any deeper than that. But is that still the best stacking approach? Ana Tudor reminds us that [CSS Grid may actually be more concise and easier to read than absolute positioning](. .parent { display: grid } .child { grid-area: 1/1 } The idea is that all child elements contained in a parent grid are positioned in the same row and column, which naturally puts them in a stack rather than changing their stacking context with absolute positioning. It’s the same concept that Temani Afif uses in many of his experiments with hover effects, like [this one](. (gg) --------------------------------------------------------------- 4. WebKit Standards Positions Are Now Published Online Want to know where the biggest web browsers stand on a particular new CSS feature? You might head over to Chrome’s Platform Status and skip to the "Consensus & Standardization" section to compare browsers. It’s a good way to vibe out how different browsers prioritize different features. The problem is that the Chrome team publishes that information and they only provide what they know — it might not be the most accurate or updated statuses for non-Chrome browsers. The Safari team now publishes their own [statuses of CSS features for WebKit]( the rendering engine that powers Safari. For example, Chrome’s Platform Status [reports]( that Safari is currently developing support for CSS Fragmentation properties, including break-after, break-before, and break-inside. Meanwhile, the WebKit CSS Feature Status index indicates that [those properties have already shipped and are supported](. And it’s more than CSS! You can look up WebKit’s support for web platform features on its [Standards Positions page](. (gg) --------------------------------------------------------------- 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: - [Figma Workflow Masterclass]( Design with Christine Vallaure. July 20–28 - [Advanced JavaScript Masterclass]( Dev with Christophe Porteneuve. Aug 16–30 - [Interface Design Patterns UX Training]( UX with Vitaly Friedman. Sep 8 – Oct 6 - [Accessible Components from Design to Development]( Dev with Carie Fisher. Sep 14–22 - [Typography Masterclass]( Design with Elliot Jay Stocks. Oct 16–30 - [Strategizing Products and Customer Experiences (SPACE)]( UX with Debbie Levitt. Oct 18–26 - [Smart Interface Design Patterns Video Course]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 6. Reveal Text With Scroll-Driven Animations Speaking of new CSS features, scroll-driven animations are making their way into browsers. [New demos]( seem to [pop up]( daily with fancy examples of ways it can be used. [Reveal Text With Scroll-Driven Animations]( Add Jhey Tompkins to the mix of interesting demos. He recently [shared one]( that accurately mimics the sort of element-revealing effect you might typically see on Apple’s website — only without a bunch of JavaScript. Scroll-driven animations are still making their way to other browsers. Ironically, Safari’s position is not yet published in the WebKit CSS statuses, but Chrome Platform Status [shows positive indications]( for Safari and Firefox. (gg) --------------------------------------------------------------- 7. Bulletproof Accessible Sticky Content Some UI components might be more important than others. We might want to display a shopping cart or the table of contents at all times, so as users scroll down the page, they can always refer to these critical controls quickly. However, sticky content can obscure content beneath it, and if you use a keyboard to navigate, there may be controls that receive focus, but you can’t see. [Bulletproof Accessible Sticky Content]( In “[Sticky content: focus in view]( Joe Lamyman shows a simple way to use scroll-margin and scroll-padding to allow controls behind sticky content to become visible when they receive focus. And if you don’t know the exact height of the sticky content ahead of time, you might need to resort to additional JavaScript to dynamically change the value of these properties. (vf) --------------------------------------------------------------- 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. The ABCs Of CSS Have you seen the [comiCSS website]( That’s the home for a series of fun and nerdy comic strips by [Alvaro Montero]( about the misadventures of working in CSS. [The ABCs Of CSS]( Alvaro’s recent “[ABCs of CSS]( is an exceptionally cute illustration of alphabetical CSS properties and concepts. Take the very first panel for the letter "A" where a square element asks a taller element if its aspect-ratio makes it look fat. 😂 (gg) --------------------------------------------------------------- 9. 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? - [Understanding Privacy]( by Heather Burns - [Touch Design for Mobile Interfaces]( by Steven Hoober - [Image Optimization]( by Addy Osmani - [Check out all books →]( [Success At Scale]( … and we’re currently working on a new book: [Success At Scale]( shipping in fall. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 10. Recent Smashing Articles - [Penpot’s Flex Layout: Building CSS Layouts In A Design Tool]( - [Designing Age-Inclusive Products: Guidelines And Best Practices]( - [Writing CSS In 2023: Is It Any Different Than A Few Years Ago?]( - [How To Create A Rapid Research Program To Support Insights At Scale]( - [Smashing Podcast Episode 63 With Chris Ferdinandi]( - [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 Geoff Graham (gg), 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](