Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you’ve been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS!
Remy Sharp discussing a change Heydon made to his website to block users with JavaScript enabled:
The point, as I take it, is that forcing a visitor down a specific path just so that they can access the content is a burden that they should not carry. It is our jobs as web developers to make our web sites accessible to all.
My site redesign isn’t really about JS. It’s about putting an unfair and inconvenient barrier between people and content, which we do everyday for the disabled, neurodivergent, and other often forgotten groups. Yes this barrier affects those groups as well. So what you have is a site that creates a barrier for almost everyone. And it’s only under these circumstances that the ones not accustomed to barriers seem to be deeply concerned…
It’s sounding more and more likely that we’re actually going to get real container queries… If you need solutions today, most of them involve JavaScript watching what is going on (i.e. the container width) and then giving you some kind of styling hooks (e.g. classes). Here’s a quick review of the “minimal takes” landscape.
’20: It’s pretty simple, you define app logic as unidirectional dataflow, then fake up pseudo-HTML components that mirror state, and a controller mounts fake-page deltas onto the browser surface.
I’m thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but… all the positioning is based on a coordinate system, a little like the game Battleship. That means deciding where everything goes and how it’s drawn, as well as how it’s relative to each other, can be really straightforward to reason about. Truly, once you learn SVG, you can draw anything, and have it scale on any device.
Devs often struggle with the design of their sites. One thing that holds their designs back the most is the way they handle type, so in this video, we’re looking at 6 simple steps for you to follow to make for better typography, which means a much nicer looking site.
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