Smashing Magazine - Smashing Newsletter #262: CSS Edition

On styling checkboxes, CSS filters, avoiding layout shifts and and ten CSS layout snippets.Issue #262 Tue, Aug 18, 2020 View in the browser 💨

Smashing Newsletter

Dear Friend,

Welcome to the first of our themed newsletters, and we’re kicking things off with my favorite topic of CSS. If CSS is your thing too, then in addition to the resources we are sharing this week, check out our Smashing Guide to CSS Layout.

We also have a whole heap of CSS content for you at our first online conference SmashingConf Live! this week (Thu–Fri, Aug 20–21). With speakers Miriam Suzanne, Michelle Barker, and I all covering CSS topics. It looks set to be a really fun two days, and there are still some tickets left if you are quick! You can bundle your ticket with one of our workshops, too. To the schedule.

Sticking with our CSS theme, I’ll be leading a CSS Layout Masterclass in September. Starting tomorrow, you can join Umar Hansa to learn about Front-End Testing and Browser Automation, or perhaps join Vitaly to discover Smart Interface Design Patterns. We’d love to have you join us!

— Rachel Andrew (@rachelandrew)


Table of Contents

1. Avoiding Layout Shifts With CSS
2. Ten Layouts With One Line Of CSS
3. Styling Checkboxes And Radio Buttons In CSS
4. This Vs That
5. The Underrated CSS Filter
6. From Our Smashing Friends
7. Coming Up Next on Smashing
8. New On Smashing Job Board
9. Our Current Most Popular Articles

1. Avoiding Layout Shifts With CSS

One of the most frustrating experiences on the web is when the content on the page unexpectedly shifts. Perhaps an ad banner has kicked in, or a carousel script has fired, or a third-party script or web font has arrived, or image dimensions haven’t been reserved — there might be various reasons.

In his article on Content Jumping (And How To Avoid It), Brandon Smith explains when content jumping happens and how to fix it — for example, with CSS transitions. Addy Osmani has written about ways to optimize stability for images without dimensions, ads, embeds, iframes, dynamically injected content, web fonts and actions waiting for a network response before updating DOM.

Avoiding Layout Shifts With CSS

If you want to bolden text on mouse hover, you can add a hidden pseudo-element with the same text string but set it to the bold font size. And if you need to keep track of the visual stability in your projects, Milica’s and Phil’s guide to Cumulative Layout Shift explains how you can measure the impact of a layout shift and keep it on your radar as you are building your experiences. (vf)


From our sponsor

Build in-demand skills in Northwestern’s online MS in Info. Design & Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


2. Ten Layouts With One Line Of CSS

What can you achieve with one line of CSS? More than you might think, as Una Kravets demonstrates. Una collected ten powerful lines of CSS that do some serious heavy lifting and help you build ten robust, modern layouts.

Example layout

You’ll find code snippets to master the biggest mystery of CSS (centering), the classic holy grail layout, as well as more advanced grid layouts. Demos show every layout in action and there’s also a 20-minute talk in which Una goes into further detail. Handy! (cm)


3. Styling Checkboxes And Radio Buttons In CSS

The good ol’ issue: how do we style checkboxes and radio-buttons to ensure that they look, well, at least similar, in most browsers — while ensuring that they stay accessible as well? In her article, Sara Soueidan covers a few techniques to keep in mind to achieve the desired result.

Sara covers the different techniques for hiding elements, how each of them affects the accessibility of the content, and how to visually hide them, so they can be replaced with a more styleable alternative: the SVG.

Styling Checkboxes And Radio Buttons In CSS

When hiding an interactive element, we need to make sure we choose a hiding technique that keeps it screen reader-accessible, position it on top of whatever is visually replacing it, so that a user navigating by touch can find it where they expect to, and then make it transparent. Sara also provides live demos that we can use right away, along with useful references to articles for further reading. (vf)


From our sponsor

Join the Design Systems Community for Clarity 2020 Online Conference, Sept 2-4

Clarity Conf 2020
Build better design systems at Clarity online with voices across the spectrum of design, development, and tech. 12 talks and speaker interviews, four workshops, attendee matchmaking, and fun activities to boot.


4. This Vs That

Do you know the difference between :active and :focus in CSS or when to use apply instead of call in JavaScript? There are more pairs like these in front-end development that might seem quite similar and, thus, hard to grasp. This Vs That teaches you when to use which — for good.

This Vs That

Created by Phuoc Nguyen, This Vs That covers confusing elements in CSS, HTML, JavaScript, and the DOM, explains differences, and shares good practices. A super useful resource that is good to keep in the bookmarks. (cm)


5. The Underrated CSS Filter

The CSS drop-shadow filter has excellent support but is rather underrated — a real shame given the fact that it could save you a lot of time hacking around with box-shadow.

Box-shadow vs. drop-shadow.

As Michelle Barker explains in a blog post, drop-shadow lets you use values for x-offset, y-offset, blur radius, and color — just like its more prominent sibling box-shadow. However, there’s one big advantage: the shadow does not correspond to the bounding box of an element (which is often where the hacking begins when using box-shadow) but to the non-transparent parts of an image. Perfect if you want to apply a drop shadow to a transparent PNG or SVG logo, for example, or even a clipped shape. (cm)


From our sponsor

CodePen PRO: New & Improved Asset Hosting and Editing

CodePen PRO
One of the many things you get on CodePen by going PRO is the ability to upload files. Things like CSS libraries, JS files, images, media, anything you want. It’s all been revamped to be much more powerful, including on-the-fly image editing. Join CodePen PRO. It's smashing!


6. From Our Smashing Friends

We love supporting wonderful community efforts, and we are happy to share articles and resources from useful resources in the web community. This week, a huge shout out to Codrops, UX Design Weekly and Neon Moiré. Community matters. ❤️

  • Exploring Animations for Menu Hover Effects
    On the Codrops blog, Manoela Ilic explores ideas for creative menu hover animations with images. A cool little detail with endless possibilities.
  • UX Design Weekly
    Staying on top of what’s happening in the community can be hard. The UX Design Weekly newsletter has your back with a hand-picked list of the best user experience design articles, resources, portfolios, and more every week.
  • Neon Moiré
    Neon Moiré helps you find the most interesting design-driven events around the world, virtual or in-person. On their blog, they talk with speakers and organizers about what makes them tick.

7. Coming Up Next on Smashing

With Smashing Membership, you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. Coming up next:

Practicing skills matters. Meow!
Meet Smashing Online Workshops on front-end & UX, with Natalia Tepluhina, Christian Nwamba, Jason Lengstorf, and many others.

We also have online workshops on front-end & UX — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.

Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)


8. New On Smashing Job Board


9. New Popular Smashing Articles


This newsletter issue was researched and written by Cosima Mielke, Iris Lješnjanin, Rachel Andrew and Vitaly Friedman


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

Smashing Newsletter #261: Performance, CSS Techniques and Fun Forms

Tuesday, August 11, 2020

With CSS techniques, rendering performance, fun forms and improving your workflow. Issue #261 • Tue, Aug 11, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, We're running an

Smart Interface Design Patterns Checklists (PDF)

Tuesday, August 4, 2020

100 checklists with practical examples and questions to ask when designing and building any UI component. Jam-packed! Interface Design Patterns Checklists PDF • View in the browser 💨 Brand new:

Smashing Newsletter #260: Disabled Buttons, CORS, JavaScript

Tuesday, August 4, 2020

With CORS, disabled buttons, JavaScript, community links and a dash of CSS. Issue #260 • Tue, Aug 4, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, What an incredible community we have!

Let’s Make The Best Out Of This Year.

Tuesday, July 28, 2020

Meet our new online workshops and SmashingConf Live with Aarron Walter, Susan Weinschenk, Yiying Lu, Umar Hansa and Vitaly Friedman. With interactive exercises and a friendly Q&A. Brand new: online

Smashing Newsletter #259: State of CSS/JS, “Back” Button UX, SVG

Tuesday, July 21, 2020

With SVG patterns, machine learning, hosting providers, type specimens and front-end online workshops.Issue #259 • Tue, July 21, 2020 • View in the browser 💨 Smashing Newsletter Dear Friend, Last week,

You Might Also Like

The Design World’s 19 Most Beloved Travel Destinations

Thursday, March 28, 2024

Plus, designers share the AD projects that still inspire View in your browser | Update your preferences Architectural Digest AD PRO Logo WILD, WHIMSICAL MEADOW GARDENS ARE THE LANDSCAPE TREND TO WATCH

How Balsamiq uses AI

Thursday, March 28, 2024

A peek into our ChatGPT conversations ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Adobe AI, Remote, Stripe Sessions, Node.js Redesign, light-dark()

Thursday, March 28, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 28 2024 Defining experience quality in large language

Are Photorealistic Renderings Worth It?

Wednesday, March 27, 2024

Plus, the go-to garden stores of top designers and landscaping pros View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Home Decor, Lamp, Desk, Furniture,

CSS Variable Groups, Layout Rhythm, Animate Borders, Parallel Lives, Visualization Techniques

Wednesday, March 27, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 27 2024 Proposal: CSS Variable Groups lea.verou.me CSS

The History of Ikat

Tuesday, March 26, 2024

Plus, Kips Bay Decorator Show House New York announces designer lineup View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Art, and Painting SAVE YOUR

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

Progress Indicator, Lissajous Curves, Pixel to Ink, Azulejo, Mac at 40

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 26 2024 Front-End solution: progress indicator piccalil.

Responsive Font Size, Icon Design, text-emphasis, Inclusive Sans, Accessible Forms

Tuesday, March 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar March 25 2024 A formula for responsive font-size jameshfisher.

👏 Impressive Dashboard Design Files + 🏆 Challenge Updates

Tuesday, March 26, 2024

🌟 Brighten Your Day with UpLabs' Design News! Firstly, let's congratulate Syndell, the winner of our latest 📝 Todoist Dashboard Redesign Challenge! Congratulations!! Secondly, don't forget