Let’s start with the “talk of the town”, surely you’ve all seen this, but just in case, the great Stephanie Eckles helps us Getting Started With CSS Cascade Layers.
And I am sure you all also saw the brewhaha that was Apple-Igalia-focus-visible-crowd-source-Safari-gate… Well, huge thanks to Eric Meyer for his thorough explanation. In the end, shouldn’t we all be happy that another browser has another feature?
Ahmad Shadeed asks…
Which DevTools feature(s) do you find most useful when working with CSS?
— Ahmad Shadeed (@shadeed9) January 26, 2022
But before you answer that, you might want to checkout Patrick Brosset‘s latest What’s New In DevTools?. Includes all the best new thingies from Chrome, Edge, Safari and Firefox DevTools!
Take a fun sidetrip with Chris Coyier and friends as they discuss a plethora of ways to Cycle Through Classes on an HTML Element. I am always torn between “this is obvious and clear” and “holy crap I got this down to 2.73 characters!”
Let’s stick with Chris for a sec as he walks us through a (seemingly?) new Git feature for Switching Unstaged Changes to a New Branch. Apparently Chris found out about this through a Wes Bos tweet, which has some great additional details if you are interested. Great find!
Speaking of The Power of the Tweet, from Bramus Van Damme comes…
What if I told you, you can show/enable form controls based on the value of a preceding control … using only CSS?
Thanks to the power of :has() we can! pic.twitter.com/Y1BnsRNBXc
— Bramus (@bramus) January 27, 2022
And as long as we are talking about CSS pseudo-classes, Manuel Matuzovic shares what he didn’t know about
:where(). So powerful (in what it can do), and yet not (in that it is easily overridable). Gotta check out the entire series, hope it continues to grow, love these short, deep dives into something!
So, the venerable WebPageTest has a new face. And while it definitely has a more modern, polished look, I also feel like the functionality that I want is more buried… I know, I will just get used to it… But serious kudos to the design & dev team, it looks good!
Jon Yablonski provides a very detailed plan for Crafting Component Libraries: The Elements. From typography to layout to color and beyond. As always, the trick with component libraries is being strict enough to provide reliable consistency, while also being flexible enough for subtle customization…
Chris Heilmann shares his approach to side-by-side coding-and-debugging in VS Code. That’s a lot of power from a simple JSON file (and a bad-ass IDE…)!
Mary Lou shares a fantastic
mix-blend-mode effect that she encountered and, of course, dissected… :-)
And finally, Melanie Sumner asks the pointed question: Why Don’t Developers Take Accessibility Seriously? And she is right to ask it, because for the most part, we do not take it seriously. Massively large parts of the Internet are at least partially broken for a large portion of our audience, because we developers did not take the time to learn this part of our job properly.
Melanie offers two relatively small suggestions for us to start improving the situation:
- Compassionately improve yourself. This is about improving yourself by exposing yourself to the problem a little more, gaining a little more knowledge about why this is such a large problem. Understanding why can be a really powerful motivator.
- Incrementally improve your code. This is about improving code by making sure you are coding in the most a11y-friendly manner possible. It might be a little awkward at first, but soon it will be second-nature, reaching for the right tool for the right task.
To quote a wise woman…
To quote another wise woman, I love Melanie’s inspiring wrap-up line:
And you know what? A good place to start is exactly where you are. A good time to start? Today.
And so, at the very least, a great place to start with good a11y, just like good SEO and good WPO, is with good HTML: Use elements that have semantic value (
img alt and on and on and on…). These tell the browser, and assistive technologies, what that bit of the webpage is all about. That is the simplest, easiest, most effective starting point you can use.
After this, get into the weeds a little more, start digging through the checklist that Melanie linked to. You will probably happily see that you actually do do some of these things already, which is awesome! But keep an eye out for things you can improve, add to your existing projects, and to your “starter” templates for future projects.
We can’t bridge this chasm overnight, but one-by-one, little-by-little, by just being conscious of the problem, dedicated to the solution, and persistent to doing what we all know is the right thing (inclusion), we will get there!