Friday Front-End - Issue #326: The way you write CSS is about to change forever! Plus, tailwind & the femininity of CSS, programmatic CSS colors, and more…
Friday Front-End - Issue #326: The way you write CSS is about to change forever! Plus, tailwind & the femininity of CSS, programmatic CSS colors, and more…
The results from the annual survey about the latest trends in CSS are out!
The way you write CSS is about to change forever. Container Queries will bring in an entirely new era of responsive design, and Cascade Layers will make our use of frameworks, theming and managing complex codebases significantly easier. When we look a little further ahead, we can also see the @when/else conditional coming up, which will let us combine media, container and supports queries into a single at-rule. All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change.
I don’t like Tailwind. I avoid using it on my client projects. This isn’t to say using Tailwind is bad or means you are bad at CSS (quite the opposite in many cases!), I just personally don’t find it useful when implementing a web layout. The problem with stating this opinion is that it’s not benign within the web development community. Critiques of CSS utilities and frameworks such as Tailwind are often met with bandwagon attacks from its community. Why is that?
Color is powerful — it can radically shift our mood, inspire us, and help us express ourselves in a way that few other things can. It is a fundamental building block of design, but it can also be a little intimidating. In this tutorial, we will be learning how to use familiar tools — a text editor and web browser — to make the process of creating striking color palettes a lot less scary and (most importantly!) fun.
Frameworks like Qwik bring us full circle from Addy Osmani’s warning to developers that slow Time to Interactive scores can cause an uncanny valley effect. Websites ship skeleton HTML that looks like it should be interactive but momentarily is not because the user has to wait for the client to hydrate. But as this article demonstrates, as soon as developers are given the ability to configure these parameters they find themselves in a complex decision matrix of trade offs.
In the last couple of weeks, more and more people point at the WCAG 3.0 Working Draft and recommend the adoption of aspects from it that suit their needs, despite the draft clearly stating “These are early drafts of guidelines included to serve as initial examples.” Plus, WCAG 3 breaks backwards compatibility. This is a conscious move to better adapt the standard to serve different disabilities which WCAG 2 did not sufficiently cover, due to its structure.
Google’s built-in testing tool Lighthouse judges the accessibility of our websites with a score between 0 and 100. It’s laudable to try to get a high grading, but a score of 100 doesn’t mean that the site is perfectly accessible. To prove that I carried out a little experiment.
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