Things have been going hard for CSS in 2021. The CSS Working Group has cranked out a ton of work, polishing existing CSS features and specifying lots of new ones too — with experimental implementations already having landed in several browsers. With 2021 coming to an end, let’s take a look at which CSS language features we can expect to land in browsers in 2022.
There is now a polyfill for Container Queries that behaves as perfectly as a polyfill should: You conditionally load it when you detect the browser doesn’t support Container Queries. You write CSS as you normally would, including current-spec-compliant Container Queries syntax code. It just works. It’s pretty great to have a container query polyfill that is this easy to use and from Chrome itself, the first-movers as far as early test implementations.
Tailwind CSS is a utility-first CSS framework that receives a generous and equal amount of affection and hatred. When I first used Tailwind on a project, it was hard to know if I was making the right decision after searching for advice, and I had many questions. Luckily, after employing Tailwind on several projects, I have found some best practices that can lead to readable CSS enjoyed by both designers and developers.
We’re in something of a new era of CSS resets where… you kind of don’t need one? There isn’t that many major differences between browsers on default styling, and by the time you’re off and running styling stuff, you’ve probably steamrolled things into place. And so perhaps “modern” CSS resets are more of a collection of opinionated default styles that do useful things that you want on all your new projects because, well, that’s how you roll.
Given the importance of labels to accessibility, it is perhaps no surprise that they feature prominently throughout the Web Content Accessibility Guidelines (WCAG). While accessibility guidelines will always be subject to some degree of interpretation, this note attempts to highlight scenarios of WCAG label misuse to prevent you from labeling under any misapprehension.
As front-end developers, we are tasked with building the front end of a Web site or application — in other words, we are building the user’s end of an interface. This is why it is crucial that we ensure that the front-end foundations that we build are as inclusive of and accessible to as many users as possible. To do that, we must build with accessibility in mind from the get-go. This, in turn, means that the way we approach writing HTML, CSS, SVG and JavaScript might need to change as we take into consideration many factors that affect how (in)accessible our UIs are.
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.
Tweet
Share