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
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
with Vitaly Friedman. August 31 – September 1.
- Architecting Design Systems Workflow
With Nathan Curtis. September 2–10.
- Building Modern HTML Emails
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)
clamp() Fluid Heading Generator
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
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,
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).
- Front-End Cheatsheets
- Front-End Accessibility
- Open-Source Icons, Fonts and Goodies
- Next.js Boilerplates and Guides
- CSS Global Resets, Gradients and Transitions
- Interface Design Patterns
- Web Performance Optimization
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.