Dispatches From The Internets

Practical uses of the :has() relational pseudo class

Some nice examples of how to use :has() in this one:

  • parent selector
  • combining with :not()
  • changing an li when hovering/focusing inside
  • styling forms based on validation state
  • adjusting table display based on row count

The New CSS Media Query Range Syntax

Cool to see more efficient range-based media queries are beginning to roll out.

The big change in the Media Queries Level 4 specification is that we have new operators that compare values rather than combining them:

  • < evaluates if a value is less than another value
  • > evaluates if a value is greater than another value
  • = evaluates if a value is equal to another value
  • <= evaluates if a value is less than or equal to another value
  • >= evaluates if a value is greater than or equal to another value

🤞🏻 we get them in Safari soon!

E-Commerce Accessibility: Specifying UI Elements Using “Roles”

A good overview of “roles” in the accessibility context, including both why and how to use them. It includes lots of e-commerce examples too.

[E]nsuring all components are marked up with the proper “Roles” is not only key to identifying the purpose of site components to users using assistive technologies, but also is an important step toward making an accessibility-compliant e-commerce site.

Mastodon Twitter Crossposter

If you’re considering moving to Mastodon, but not ready to give up on Twitter yet, you should check out this awesome, highly-configurable cross-posting tool.

Why we need CSS Speech

I got really excited about aural style sheets back in the day, only to have my hopes dashed when I discovered no one supported them. Then came ReadSpeaker (and its ilk), which started to move in that direction, but the solutions are far from perfect.

I even tinkered a bit with the Speech Synthesis API to achieve something akin to a functional listening experience for this blog. Would love to go back to doing it in CSS though. I hope this happens!

PWAs in 2022

Curious to know what’s going on with Progressive Web Apps in 2022? The 2022 edition of the Web Almanac is out, with an excellent chapter on PWAs by Diego Gonzalez and Beth Pan.

Control

Early on in my journey as a web designer, Molly Holzschlag taught me the importance of controlling everything you can, up until the point that you realize you must relinquish control. In this piece, Jeremy Keith explores the tension around control and, ultimately, echoes Molly’s perspective:

The web is filled with uncertainties—browsers, devices, networks. You can’t possibly account for all of the possible variations. On the web, you have to relinquish some control.