Articles by CSS Tricks from December 2021

I’m actually working on a talk (whew! been a while! kinda feels good!) about just how good the world of building websites has gotten. I plan to cover a wide swath of web tech, on purpose, becaus...

When you’re about to start a new website, what do you think first? Do you start with a library or framework you know, like React or Vue, or a meta-framework on top of that, like Next or Nuxt? Do...

(This is a sponsored post.)High-velocity, online businesses produce multiple digital assets like banners, images, videos, PDFs, etc., to promote their businesses online. For such businesses, Digital A...

Animation on the web is often a contentious topic. I think, in part, its because bad animation is blindingly obvious, whereas well-executed animation fades seamlessly into the background. When handled...

Lea Verou made a Web Component for processing Markdown. Looks like there were a couple of others out there already, but I agree with Lea in that this is a good use case for the light DOM (as opposed &...

One of the best things you can do for your website in 2022 is add a service worker, if you don’t have one in place already. Service workers give your website super powers. Today, I want to show ...

I hadn’t heard of most of the Chrome extensions that Sarem Gizaw lists as 2021 favorites. Here are my hot takes on all of them, except the virtual learning specific ones that aren’t very r...

One of the coolest things Ive been messing with in the last couple years is the CSS Paint API. I love it. I did a talk on it, and made a little gallery of my own paint worklets…...

The first time I had my breath taken away by a humble scrollbar was on this very site. When CSS-Tricks v17 rolled out with its FAT CHONKY BOI, my jaw dropped.I didnt know you could do that on …...

How do you make a great website? Everyone has an answer at the ready: Flashy animations! The latest punk-rock CSS trick! Gradients! Illustrations! Colors to pack a punch! Vite! And, sure, all these th...

One thing people can do to make their websites better is to remember that you are not representative of all your users. Our life experiences and how we interact with the web are not indicative of how ...

Last year, we kicked out a roundup of published surveys, research, and other findings from around the web. There were some nice nuggets in there, like a general sentiment that the web needs more docum...

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about just the words, or how your readers will en...

Ensuring accessibility is a clear path to making your website better. When you make your site accessible, you grow your audience, improve the experience for all people using it (not just those with ac...

There was a time when I’d write React, Angular, and Ember as a kind of generic grouping of three major JavaScript frameworks. And maybe just because three is a nice number, that became React, Vu...

NGL, I was a little overwhelmed when I sat down to write this article. There are so many things that immediately flooded my mindtake out any extra divs; use links for URLs, use buttons for events and ...

Does shadow DOM improve style performance? Nolan Lawson covers how, because of the inherent encapsulation of the shadow DOM, the styling gets applied a bit faster than it would if those styling ...

Everything kind of sucks right now. Thingsgenerallyfeel bad. Setting aside the broader realities of a global pandemic and rampant social injustices, were watching the identity of the web platform, an ...

There are a number of ways to approach a dark mode for your website, but essentially you get all the styles ready for it and then apply them when the user has indicated they want them, whether by dire...

(This is a sponsored post.)We’re going to go over details on how designer ↔️ developer collaboration in AWS Amplify Studio can make app building easier, but let’s cover one o...

When I was working at my first real job in the field in the mid-2000s, it was hammered in the web dev field to build tiny websites (no more than 100KB per page), only use JavaScript for special effect...

Just the first sentence alone here from Stepanie Yee and Tony Chu is solid:In machine learning, computers apply statistical learning techniques to automatically identify patterns in data. Th...

Whats one thing we can do to make our site better? Maybe nothing at all!Our websites keep getting bigger and bigger! When we have a team with so many exciting ideas and such interesting technology, it...

Huh! I did not realize that CSS custom properties had their own resolution behavior for how !important works in their values. Uh, despite writing a guide about them. 😬 But hey it’s now u...

When Chris first sent me this prompt, I was thinking about writing about progressive enhancement, but that subject is so wide-reaching to be one thing and all too predictable, especially for those alr...

Jordan Scales explores the computer science concept of topological sorting, and what it might look like if applied to the concept of z-index in CSS. So, you don’t express what the z-index shoul...

Three cheers for (draft stage) progress on a Sanitizer API! It’s gospel that you can’t trust user input. And indeed, any app I’ve ever worked on has dealt with bad actors trying to s...

Between Google Chrome experimenting with “following” sites, along with a growing frustration of how social media platforms limit a creators reach to their fans through algorithmic feeds, t...

I was reading Jake’s “Cross-fading any two DOM elements is currently impossible” which is a wonderfully nerdy deep dive into how there is no real way to literally cross-fade elements...

Matias Capeletto covers the breadth of Vite, from the technological shoulders it stands on, to the peers exploring similar territory, to the other technologies it supports, to the frameworks that now ...

Earlier this week, I tried out a starter theme for a blog platform. The theme had loads of nice default features: pretty typography, fancy navigation, dark mode widget and a couple of default trackers...

Google is handing out bucks for CSS-related projects, so you might as well know about it! Nicole Sullivan:All of us who work on the web regularly benefit from the work of people who create specificati...

Whens the last time you read your website? Like out loud in the lobby of a Starbucks on a weekday afternoon, over the phone to your parents, or perhaps even as a bedtime story for your kids.No worries...

Ain’t this the truth:Its like when youre learning a new language. At some point your brain goes from translating from your mother tongue into the other language, and instead starts...

Whats the one thing people can do to make their website better? Now that is a good question. One with many right answers, like improving performance, taking care of accessibility, and upgrading user e...

(This is a sponsored post.)I got this question from a listener the other day. Fair question, I’d say. The word “Static” in “Static Site Generator” is at-odds with the wor...

Ya know, I used to do one of these posts after making a few podcast appearances I hadn’t had a chance to link up yet, so I could share them. As fate would have it, I haven’t been on many &...

I read a recent Smashing Magazine post that included a recommendation for Hygen. I just happen to be doing quite a bit of new UI work in a Next.js app and the amount of manual folder/file scaffolding ...

Josh’s Shadow Palette Generator is a fantastic tool. The premise is that box-shadow pretty much always looks better when there are multiple layered shadows that are a bit tinted. It reminds me o...

So what is the one thing that people can do is to make their website better? To answer that, let’s take a step back in time The year is 1998, and the web is on the rise. In an …...

(This is a sponsored post.)Amazon has a vision with AWS Amplify. First, a premise:As browsers have become faster and more powerful over the last decade, front-end developers are building web apps that...

I wanted to write down what I think the reasons are here in December of 2021 so that we might revisit it from time to time in the future and see if these reasons are still relevant. I’m a web &#...

Say you’ve got a two-column CSS grid and you want one of those columns to behave like position: sticky;. There is nothing stopping you from doing that. But the default height for those two colum...

Take two minutes right now and visit your current project in a browser. Then, using only the Tab key, you should be able to navigate between interactive elements including buttons, links, and form ele...

Quick hits! There is a new web API called EyeDropper:if ('EyeDropper' in window) { const eyeDropper = new EyeDropper(); try { // This has gotta be triggered by a user interaction, // so consid...

This is a fantastic article from Julia Evans about duking it out with modern front-end tooling. Julia has made a bunch of Vue projects and typically uses no build process at all: I usually have a...

From my perspective, the question of what one thing we can do to make a website better is not a technical one. The more I browse the internet, the more I realize that the biggest issue with a lot of &...

I try to keep up with WordPress news because I’m a big WordPress user and have many production sites that run on it. WordPress has been good to me as a site builder for literally my entire caree...

Ive built websites that are used by millions of people all over the world. Ive made more mistakes than I care to count and Ive had to deal with the repercussions of those mistakes for years thereafter...

An interesting (scary) trick of an nearly undetectable exploit. Wolfgang Ettlinger:What if a backdoor literally cannot be seen and thus evades detection even from thorough...

What if HTML had “tabs”? That would be cool, says I. Dave has been spending some of his time and energy, along with a group of “Tabvengers” from OpenUI, on this. A lot of resea...

There is a huge and ever-widening gap between the devices we use to make the web and the devices most people use to consume it. Its also no secret that the average size of a website is huge, and ...

I’ve always like Jeremy’s categorization of developer tools:Ive mentioned two categories of tools for web development. I still dont know quite what to call these categories. Internal and e...

(This is a sponsored post.)I’ve built WordPress websites for I don’t know how long now, but suffice to say I’ve relied on it for a bulk of the work I do as a freelance front-ender. A...

I recently started university and, before buying a MacBook Air (the M1 chips are amazing by the way), I had to use an iPad Pro for class. However, being a Computer Science student meant I had to find ...

Perhaps the most basic and obvious use of CSS custom properties is design tokens. Colors, fonts, spacings, timings, and other atomic bits of design that you can pull from as you design a site. If you ...

I was just going on about how many awesome little helper sites there are out there, and now I’ve ran across another wonderful little hive of them. Sbastien Nol, under the name fffuel, has create...

As I write this, world leaders are gathering in Glasgow for COP26, the international climate change conference, in the attempt to halt (or at least slow down) catastrophic climate change by pledging t...

John James Jacoby:I recently noticed that animations in Safari were stuttering pretty badly on my M1 powered 2020 MacBook Air, and dove in to figure out why.The why:This wasnt a bug. This was a f...

Id like to tell you something not to do to make your website better. Dont add any third-party scripts to your site.That may sound extreme, but at one time it wouldve been comm...

I saw Bartosz Ciechanowski’s “Curves and Surfaces” going around the other day and was like, oh hey, this is the same fella that did that other amazingly interactive blog post on the ...

A few years ago, there was this French book publisher. They specialize in technical books and published an author who wrote a book about CSS3, HTML5 and jQuery. The final version, however, a glaring t...

Websites change. Healthy codebases are constantly being updated. Legacy code dies when it eventually goes down with the ship. Recognizing that my code is transient allows me to be more practical about...

Some ⭐️⭐️⭐️⭐️⭐️ star rating systems aren’t always exactly even stars. Say you want to support rating something 2.25 stars. T...

(This is a sponsored post.)Videos appeal to humans in a way no other form of the content does. A video includes motion, music, still images, text, speech, and a few other elements, all of which combin...

I think if you’re a DevOps person in any capacity, the utility of Docker is very clear. Your things run in containers that are identical everywhere. Assuming Docker is working/running, the code ...

In nature, no two things are ever the same. Life is imperfect, unpredictable, and beautiful. We can walk through the same forest every day and see differently colored leaves. We can look up at the clo...

What is one thing people can do to make their website better? Exactly what you want to build!Ask yourself:What drew you to development in the beginning?Is there an experimental API that youve been wan...

I was playing this game on Apple Arcade the other day called wurdweb. It’s a fun little game! Little touches like the little shape dudes that walk around the screen (but otherwise don’t do...

This article is part of our Advanced Git series. Be sure to follow us on Twitter or sign up for our newsletter to hear about future articles!The Reflog is one of Gits lesser-known featuresbut one that...

(This is a sponsored post.)Cloudinary (the media hosting and optimization service) has a brand new version (v3) of its WordPress plugin that has really nailed it. First, a high-level look at the bigge...