Friday Front-End

By Scott Vandehey

Friday Front-End - Issue #357: CSS flying toasters! Plus, native CSS nesting, variable units, accessibility, and more!

#357・ Jul 29, 2022

786

subscribers

159

issues

Friday Front-End - Issue #357: CSS flying toasters! Plus, native CSS nesting, variable units, accessibility, and more!

By Scott Vandehey • Issue #357 • View online

Links

After Dark Screensavers in CSS

Do you longingly reminisce about the days when flying toasters graced your screen? Do words like “Confetti Factory” and “Daredevil Dan” make your heart skip a beat? If so, then never fear—CSS is here! Using modern CSS techniques like animations and transforms, we can imitate several of your favorite After Dark™ screensavers. The animations were made with CSS alone. No animated gifs or JavaScript.

www.bryanbraun.com • Share

Where the f*** is native CSS nesting?

Subsequently, here I am, in June 2022, spitting out my dummy and jumping up and down because there are still no browser implementations. I hear about new CSS features on a near daily basis but no-one is making a fuss about nesting, why?

benfrain.com • Share

Generating Accessibility Test Results for a Whole Website With Pa11y CI

This week, I’m doing an accessibility audit for a client. One of the first steps is to have a general look at the site. You can – and should – do that manually for sure, but another very useful way to get a good first impression of how good or bad things are is to use an automated tool like Pa11y.

matthiasott.com • Share

The Future of CSS: Variable Units, powered by Custom Properties

Recently the CSS Working Group approved to start work on the css-variables-2 specification. First planned addition is support for “Custom Units”. Let’s take a look.

www.bram.us • Share

It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility via Display Properties

Chrome cleaned itself up and has held steady for more than 20 versions. Firefox needs work, but at least saw a tiny improvement. Safari made one tiny improvement but has a much bigger deficit, and I don’t trust it will improve much given its now twice-promised fix for display: contents.

adrianroselli.com • Share

Videos

Understanding CSS :has()

Eric Meyer takes a look at the new CSS :has() pseudo class and explores a number of ways it can be used to supercharge your CSS.

www.youtube.com • Share

Sponsor

Thanks to Cloud Four for sponsoring this week’s newsletter! 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.

Did you enjoy this issue?

By Scott Vandehey

Front-end development links tweeted daily, emailed weekly.

Tweet

Share

In order to unsubscribe, click here.

If you were forwarded this newsletter and you like it, you can subscribe here.