July 18, 2023 Smashing Newsletter: Issue #414
This newsletter issue was sent out to 211,252 subscribers on Tuesday, July 18, 2023.
Editorial
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!
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.
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.
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 Baldwin. (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.
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.
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.
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)
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.
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 →
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.