Smashing Magazine - #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:

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 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.

Smashing Online Events
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:


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?

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


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

unsubscribe update preferences view in your browser

Older messages

#413: UX Motion and Animation

Tuesday, July 11, 2023

How to document UX motion, animation, transitions — with useful animation tooling and motion-focused examples from design systems. Issue #413 • July 11, 2023 • View in the browser Smashing Newsletter

#412: Accessibility and Inclusive Design

Tuesday, July 4, 2023

With guidelines on inclusive design, designing for ADHD, dyslexia, neurodiversity, dyscalculia and general do's and don'ts. Issue #412 • July 4, 2023 • View in the browser Smashing Newsletter

#411: Sustainable Design

Tuesday, June 27, 2023

With sustainability checklists, Figma kit, ethical design, sustainability-related nudges in design and useful resources all around prioritizing what matters and reducing waste. Issue #411 • June 27,

#410: Design KPIs

Tuesday, June 20, 2023

How to measure design quality, UX research impact, design velocity, design system success and how to prioritize features. Issue #410 • June 20, 2023 • View in the browser Smashing Newsletter Lá maith

#409: Web Performance

Tuesday, June 13, 2023

Issue #409 • June 13, 2023 • View in the browser Smashing Newsletter Marhaba Smashing Friends, At what point do you start thinking about performance? Is it something you have a clear idea about going

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏