Smashing Newsletter: Issue #291

Editorial

This newsletter issue is all about wonderful techniques around CSS, with little helpers such as CSS gradient effect and animated z-index values to 1-line-layouts, advanced CSS selectors and tools for auditing CSS. However, this editorial isn’t really just about CSS.

Everytime I look back at my life, I realize just how much my life has been shaped for the better by my female relatives, friends and colleagues. Ranging from better outlook on life to intelligent business decisions, I owe so much to the extraordinary female strength and intelligence, to endless support and patience, to humility and modesty.

Today we’re celebrating. Celebrating the impact and significance of women in and outside of our industry; remembering the importance of the ongoing fight against discrimination and for gender equality. We’re applauding to our wonderful female relatives, colleagues and friends — to you, for your strength, intelligence and your kindness.

At Smashing, we wouldn’t be where we are today, and for that we’re eternally grateful. And we sincerely hope that the years to come will bring us a world with more female influence in leading roles of the society — with peace and equality for all of humanity. That’s something to be looking forward to.

— Vitaly (@smashingmag)

What Does 100% Mean?
The Surprising Things That CSS Can Animate
Creating Randomness With Pure CSS
Upcoming CSS & Front-End Workshops
Building Robust And Modern One-Line Layouts
Auditing CSS
Advanced CSS Selectors
Improving Contrast With An Overlay

1. What Does 100% Mean?

When we use percentage units in CSS, we need to know what that percentage value actually refers to. Now, we’d usually assume that it refers to the width of the parent of the element that we apply the value to. However, it’s not as easy as that. The answer, as Amelia Wattenberger shows in “What does 100% mean in CSS”, is “it depends”.

For example, height and width indeed refer to the parent’s width, but with transforms the value will depend on the element’s height and width. So if we want to center our element inside of the parent element, there is a difference between using translate-top, top and height. And if you’d like to learn a bit more about CSS viewport units, Ahmad Shadeed has your back as well: with a comprehensive guide to CSS Viewport Units. (vf)

2. The Surprising Things That CSS Can Animate

When you think of animating CSS properties, which ones come to your mind? Will Boyd looked at the question from a different perspective and decided to explore the properties that don’t come to mind immediately, the ones that aren’t typically associated with animation, but turn out to be animatable.

In his post “The Surprising Things That CSS Can Animate”, Will dives deep into these unexpectedly animatable properties — and, of course, the nifty things you can do by animating them. z-index, for example, can be used for layered animations, opacity helps you fade out a modal just with CSS. Amazing to see what can be achieved when thinking outside the box. (cm)

3. Creating Randomness With Pure CSS

Imagine you have a virtual card deck and every time you click on a card, it draws a different one. Do you think it’s possible to achieve the effect with pure CSS? Well, CSS doesn’t come with a “random” function or another way to create randomness, but Adir SL found a clever animation trick that makes the cards at least appear to act randomly.

The 52 cards in Adir’s example animate through the different states very fast, and the user’s click on a card, pauses the animation, making the card flip at any one of certain states. While the user can click on a card at any time, the animation cycles through all 52 states in only 1 second — fast enough to act as a random seed for the interaction and to prevent that users see the individual frames. A fun and unexpected example of what you can achieve with CSS. (cm)

4. Upcoming CSS & Front-End Workshops

CSS is awesome, and we can get better at it by learning together! So as it happens, we have a Dynamic CSS Masterclass with Lea Verou as well as a Level-Up With Modern CSS workshop with Stephanie Eckles coming up in a few weeks.

Our workshops are packed with practical examples, video recordings and friendly Q&A sessions. Each and every workshop has been a truly smashing experience with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount. Perhaps you’d like to join us and recommend to others — just sayin’! ;-)

5. Building Robust And Modern One-Line Layouts

One single line of CSS can do some serious heavy lifting. To highlight how impactful a single line of CSS can be, Una Kravets built 1-Line Layouts, a collection of ten modern CSS layout and sizing techniques.

Starting out with the biggest mystery of all (centering) and covering everything from the classic Holy Grail Layout and the “Deconstructed Pancake” to applying clamp() and respecting aspect ratio, Una’s collection is full of little tidbits that are bound to make your life as a developer easier.

Each technique comes with a demo, a CodePen to tinker with, and information on browser support. Una also recorded a video in which she explains every one-line wonder in greater detail. No matter if you’re a beginner or a pro, this resource will sure come in handy. (cm)

6. Auditing CSS

We’ve all been there. With a number of people writing and refactoring CSS, over time CSS files get larger and more specific, often with !important defined just in case, plenty of repetitive declarations, overwritten styles and verbose duplications. This can be addressed with utility classes and strict conventions, but in practice it might not always work well. So how would you go around auditing your CSS and understanding how to tame it?

To get a good first picture of our CSS, we can use Chrome DevTools’ “CSS overview” panel (you can enable it in the “Experimental Settings”). Once you capture a page, it provides an overview of media queries, colors and font declarations, but also highlights unused declarations which you can safely remove. CSS coverage returns an overview of unused CSS on a page.

CSS Stats provides slightly more details on font families used, rules, selectors and specificity score and total vs. unique declarations ratio. Also, Parker runs metrics on your stylesheets and reports and their complexity; additionally, Project Wallace keep the history of your CSS over time.

And finally, Yellow Lab Tools highlights (among many other things) CSS complexity, old prefixes and redundant selectors. Plus: it points to duplications, so you can remove easily. (vf)

7. Advanced CSS Selectors

In CSS, selectors are patterns that can be used to select and define the elements you want to style. Then there’s this wonderful bit in CSS called ‘specificity’ that — if used properly — allows you to entirely avoid the use of !important in your stylesheets. Knowing this (and more!) is so critical in order for you to be able to develop CSS and modify existing style rules.

But, there’s just so much to keep in mind, right?! Well, in a two-part mini-series, Stephanie Eckles has got your back! She explores some of the more advanced CSS selectors, and provides brilliant examples of when to use them. Definitely one for the bookmarks! (il)

8. Improving Contrast With An Overlay

If you want to make text better stand out against a background image, there’s a little trick: You can use a CSS linear-gradient overlay with a certain opacity on top of the image to improve color contrast. Spotify, for example, uses the technique.

While all of this only requires one line of code, there’s still one question left to be answered: How to determine the opacity to use for the overlay? The Optimal Overlay Finder helps you find out. You upload an image, enter your text and choose your overlay and text colors, and the tool shows you a preview of what the overlay looks like when applied to your image, as well as the optimal overlay opacity. A small detail that goes a long way. (cm)

March 9, 2021 Smashing Newsletter: Issue #291

Previous Issues