CSS Rules! 2021
A quick list of the best CSS properties that I learned in 2021.
What can I say, I like CSS
Every year I learn more and more about it, build increasingly interesting and complex layouts with it, and learn about exciting new features coming down th pipeline. I remember thinking about some of this stuff on this list last year and being excited about using it. I'll include a few properties at the end of this article that will probably hit browsers in 2022, that I am excited about in the same way.
There is really no set criteria for this list, other than that I used it and am excited about. Some of it has been available in browsers for quite a while and solves an everyday problem, other rules would only be used in specialized cases, and just hit browsers recently.
A big part of what inspired this article was the State of CSS 2021 survey. It's a great reference that shows me the areas of CSS I still have to explore and what upcoming features I should learn. I participated in the survey in 2020 and many of the properties on this list I was inspired to learn because of it. I'd highly recommend taking a look at the results from this year, and participating in State of CSS 2022!
1) CSS Grid
CSS Grid spec level 1 has been around for a while, but until recently I was worried about browser support. It wasn't until I watched some Layout Land videos with Jenn Simmons that I learned the main features of grid were actually released to almost immediate full browser support in 2017. There was nothing to be worried about so I just dove in. Those Layout Land videos really helped me get up to speed, as well as CSSGrid.io from Wes Bos.
I was so inspired that I ended up creating a demo app on glitch.com and slideshow on CodePen that I presented to my coworkers to push adoption of Grid at my current job. Check them out below:
2) Position: Sticky
Like every front end focused developer, I've probably implemented 100+ different variations of the classic sticky header pattern. At it's simplest, it could be accomplished with position: fixed, but what if you need to scroll down before the sticky UI kicks in? Or if you need to "catch" an element halfway down the page and make it stick? This used to take some JavaScript, with calculations on the height of the sticky element and the distance from the top of the browser, or in more recent years, something like the Intersection Observer API.
With position: sticky; you can now accomplish this classic UI pattern with just a few lines of CSS. One thing I would like to see is some kind of JavaScript event that you could hook into here for more complex sticky behavior, but you can still use Intersection Observer to accomplish this easily in most cases. Overall, a welcome addition to the CSS spec! Check out the simple demo below:
3) Scroll Snap
Scroll snap is something that I think really helps bring an app-like experience to the web. I love the new UI pattern that uses display: flex; and overflow: scroll to to simply allow items that don't fit in a container to become, allowing the user to scroll horizontally when with their thumb or mouse-wheel to access the hidden items. I think this makes so much more sense than completely changing the interface for a user between desktop and mobile devices. It's also much easier to implement for developers, and much more performant at a time when we're all obsessing over technical SEO. Scroll snap arrived just in time to make this style of UI feel smoother and more native, and I try to use it wherever I can.
Honorable mentions goes to aspect ratio and fluid typography using clamp(). Honestly I wanted to write about these two properties as well, but this article is already so long I doubt many people will get through it. 😅
Bonus:
Some properties I am excited about trying out in 2022: