Links
Accessible Animated GIF Alternatives
In my previous article, I explored a few different alternatives to the animated GIF with regard to performance, compatibility and feature parity. I found many promising formats, but one big potential hiccup: The two strongest contenders required separate HTML elements, img for AVIF or video for WebM. This raises a new question: Which HTML element is more accessible for the display of GIF-like animated clips?
Sticky Content: Focus in View
Sticky content helps prioritise important content so it's always visible, but it can create issues for sighted people who use a keyboard, or a keyboard-like device, as focused controls become hidden behind the sticky content.
The Yellow Fade Technique with Modern CSS using @starting-style
Remember the Yellow Fade Technique from back in the day? With Modern CSS this is now SUPER EASY to recreate!
Visually hidden links with 0 dimensions
If you have used a visually-hidden class in the past, you might have noticed that the width and height is set to 1px and not 0. I’ve always wondered why.
Videos
The differences between CSS and Sass Nesting
CSS Nesting is here, but it’s a little bit different from Sass nesting. In my previous video, I quickly mentioned a couple of differences, but I didn’t do a full on comparison. In this video, I look at how the two of them are the same, how they are different, and how Sass is going to deal with native CSS nesting in the short and long term.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! They solve complex responsive web design and development challenges for ecommerce, healthcare, fashion, B2B, SaaS, and nonprofit organizations.
If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.