Smashing Newsletter #291: CSS Techniques and Tools

With CSS auditing tools, advanced CSS selectors, 1-line-layouts, CSS gradient effect and animated z-index values. Issue #291 • Tue, March 9, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Howdy Friend, 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]( --------------------------------------------------------------- Table of Contents 1. [What Does 100% Mean?](#a1) 2. [The Surprising Things That CSS Can Animate](#a2) 3. [Creating Randomness With Pure CSS](#a3) 4. [Upcoming CSS & Front-End Workshops](#a4) 5. [Building Robust And Modern One-Line Layouts](#a5) 6. [Auditing CSS](#a6) 7. [Advanced CSS Selectors](#a7) 8. [Improving Contrast With An Overlay](#a8) 9. [New On Smashing Job Board](#a9) 10. [Our Current Most Popular Articles](#a10) --------------------------------------------------------------- #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”. [What Does 100% Mean?]( 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. [The Surprising Things That CSS Can Animate]( 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) --------------------------------------------------------------- From our sponsor Flatfile: Smart Drop-In Data Importer For Your Web Apps [Flatfile: Smart Drop-In Data Importer For Your Web Apps]( Meet the drop-in data importer that securely imports, formats, and merges CSV/XLS data. In hours, not weeks. That’s [Flatfile Portal](. [Flatfile: Smart Drop-In Data Importer For Your Web Apps] --------------------------------------------------------------- #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. [Creating randomness with pure CSS]( 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. [Smashing Online Workshops]( 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. [1-Line Layouts]( 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? [Auditing CSS]( 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) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #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. [Advanced CSS Selectors]( 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. [CSS linear gradient overlay]( 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) --------------------------------------------------------------- #9. New On Smashing Job Board - [Website Development Team Lead]( at Kinsta (Remote) - [WordPress Developer]( at Web Loft Designs (Remote) - [Senior Web Visual Designer]( at Mission Minded (United States) --------------------------------------------------------------- #10. Our Current Most Popular Articles - [Modeling A GraphQL API For Your Blog Using Webiny Serverless CMS]( - [Obscure Mobile Design Techniques That Boost UX]( - [UI Design Testing Tools I Use All The Time]( --------------------------------------------------------------- That’s All, Folks! Wow, you’ve made it this far! We hope you’ve found at least one useful, practical tidbit that will help you get better at what you do. As you see, there are so many talented folks out there working on so many brilliant projects, and we’d sincerely appreciate it if you could help spread the word and give them all the credit they deserve! 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 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](