July 27, 2021 Smashing Newsletter: Issue #311

Editorial

If you’ve been on the web for a while, chances are high that you remember Internet Explorer hacks and workarounds, along with quirky clearfixes and lengthy CSS resets. Back in the early 2000s, I spent days trying to figure out why float: top doesn’t work, why margins collapse, what stacking contexts in CSS are, why there is no parent selector — and setting z-index: 9999 !important just in case.

And just look at CSS today! Just last week Flexbox has celebrated its 12th birthday, and with all the incredible things we can do with CSS today, writing CSS has never been more fun and exciting. So in this newsletter issue, we look at just that: some exciting and fun things we can do with CSS, or we will be able to do soon.

We are very excited to have wrapped up Stephanie Eckles’ incredible CSS workshop last week, and while we are waiting for the new date for Stephanie’s workshop later in Autumn this year, we do have a couple of friendly front-end & UX workshops lined up for the rest of the year. Perhaps you’ll find them useful, too.

In the meantime, let’s dive into the shiny world of CSS!

— Vitaly (@smashingmag)

1. Transitioning CSS Gradients

If you’ve ever tried to transition gradients in CSS, you probably have noticed that it actually doesn’t work. Instead of gradually fading from one gradient to another, the change is happening immediately, abruptly, with no smooth transition between the two.

As Keith J. Grant has discovered, we can achieve the transition with a clever workaround though. We use a pseudo-element and opacity transform for that. First, we apply one gradient to the element, then position its pseudo-element to fill the element, and then apply the second gradient to it. And we “transition” between two gradients by transitioning the opacity of the pseudo-element. You can check a full working example on CodePen. (vf)

2. CSS Charts

Perhaps you need to design a column chart, or a bar chart, or even a multi-dataset column chart or stacked columns. Where do you even start? Perhaps with Charts.css, a CSS data visualization framework that uses CSS utility classes to style HTML elements as charts.

Created by Lana Gordiievski and Rami Yushuvaev, the framework supports many chart types, has no dependencies, and is relatively lightweight (6Kb gzipped). It also includes thorough documentation on its components and built-in chart types, plus the source code is available on GitHub (licensed under MIT). And if you need a slightly more unusual approach, Preethi explains how to create CSS Charts with interesting shapes on CSS-Tricks as well. (vf)

3. Stable Scrollbar Gutters With CSS

Ah, the layout shifts! As Bramus Van Damme explains, one of the slightly more obscure reasons for layout shifts comes due to different types of scrollbars on the web. While overlay scrollbars on iOS/macOS are placed over the content (and aren’t shown by default), other scrollbars are placed in the “scrollbar gutter”, i.e. the space between the inner border edge and the outer padding edge.

When the content of a box becomes too large, the browser will — by default — show a scrollbar. In the latter case, it will cause a layout shift. Fortunately, this problem might be gone for good soon. Meet a shiny new scrollbar-gutter property: by setting it to stable, we can have the browser always showing the scrollbar gutter, even if the box is not overflowing.

And to keep things symmetric, we can use stable both-edges. The feature isn’t available yet, but coming in Chromium very soon, with other rendering engines hopefully following soon. (vf)

4. Upcoming Smashing Online Workshops

We regularly run online workshops around front-end and design: be it around accessibility, forms, navigation, or landing pages. In fact, we have a couple of friendly workshops coming up soon, and we thought that, you know, you might want to join in as well.

For example, we have The TypeScript Masterclass coming up soon, with Stefan Baumgartner, the author of our recent Smashing Book on TypeScript in 50 Lessons. We also have plenty of other topics to choose from. As always, here’s an overview of our upcoming front-end & design workshops.

• Designing The Perfect Web Forms UX
  with Vitaly Friedman. August 18–20.
• Designing The Perfect Navigation UX
  with Vitaly Friedman. August 31 – September 1.
• Architecting Design Systems Workflow
  With Nathan Curtis. September 2–10.
• Building Modern HTML Emails Dev
  With Rémi Parmentier. September 16–24.
• Jump to all online workshops →

5. Whimsical CSS 3D Button

Details matter. Designing a lovely button doesn’t seem to be a big complicated endeavor: a bit of padding here and there, a funky color, accessible text, and a few button states. Well, Josh Comeau has gone all the way to design a truly whimsical 3D button that you might want to click more than once.

The idea is pure genius: we create two layers and offset the foreground layer a little bit at first. On hover, we shift the front layer down. Then, we adjust the focus outline with outline-offset, or use :focus:not(:focus-visible) to hide the outline when the button is focused and the user is using a pointer device.

Then we shift the button up by a few pixels on hover, animate the transform a lil’ bit, adjust the Bezier curve for animation and add a bit of blurring for a softer, more natural shadow. And voilà — we have a whimsical 3D button that is accessible, works on mobile and on desktop, and is a pleasure to tap and click on. Of course, you can find the full code snippet on Josh’s blog. (vf)

6. CSS clamp() Fluid Heading Generator

Thanks to clamp(), you can set a font size that grows with the viewport but doesn’t go below or above the minimum and maximum font size that you define. To help you find the perfect CSS values for your fluid heading and control how it scales across different viewports, Erik André Jakobsen built the Fluid Typography tool.

You enter the minimum and maximum font size as well as the minimum and maximum viewport width, and the tool calculates not only the clamp() value but also shows you a demo of what it will look like when applied to an actual heading.

Another helpful generator to help you figure out the clamp() rule for your project comes from Maxime Roudier. It works similarly to Erik’s tool but also lets you select a font family and a range that you adjust with a slider instead of entering the specific minimum and maximum values. (cm)

7. The New CSS Reset

What do you use to normalize styles across browsers? Many of us rely on Normalize.css, but as of recently, there have appeared new approaches to reduce the size of the global CSS reset that might be worth exploring as well.

With his Modern CSS Reset, Andy Bell has reduced the CSS reset to its minimum. Andy has revisited the reset from scratch, eliminating everything unnecessary based on modern features we have today. The usual suspects are all there: box-sizing rules, normalized default margins and core body defaults.

Along with it, Andy removes all animations, transitions, and smooth scroll for people that prefer not to see them, and has added modern properties like scroll-behavior and text-decoration-skip-ink by default.

The New CSS Reset by Elad Shechter takes a slightly more aggressive approach. Elad works out from the view that often we don’t want to use default browser styles altogether, except the display property. So what if we remove all default styles altogether with the global CSS reset keywords, unset and revert? Plus, Elad uses :where() pseudo-class to remove specificity. An alternative approach that’s worth discussing. (vf)

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 week!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.