August 18, 2020 Smashing Newsletter: Issue #262

Editorial

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)

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

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.

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)

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.

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.

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)

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.

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.

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)

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:

• “Accessibility With(out) Priorities” with Chen Hui Jing— September 1 at 14:00 London time
• “The Good, The Bad And Ugly Of Prototyping” with Adekunle Oduye— October 1 at 19:00 London time

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.

• Front-End Testing (Aug 19 – Sep 3)
• Jamstack! (Sep 1–16)
• The CSS Layout Masterclass (Sep 10–11)
• Smart Interface Design Patterns (Sep 22 – Oct 6)
• Vue.js: The Practical Guide (Sep 17 – Oct 2)
• Build, Ship & Extend GraphQL APIs (Oct 15–30)

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)

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.