Articles by CSS Tricks from January 2021

A clever use of CSS grid from Jay Freestone to accomplish a particular variation of the media object design pattern (where the image is centered with the title) without any magic numbers anything that...

Nolan Lawson has a little emoji-picker-element that is awfully handy and incredibly easy to use. But considering you’d probably be using it within your own app, it should be style-able so it can...

High five to the Greensock gang for the ScrollTrigger release. The point of this new plugin is triggering animation when a page scrolls to certain positions, as well as when certain elements are in th...

I cant stop thinking about this site. It looks like a pretty standard fare; a website with links to different pages. Nothing to write home about except that… the whole website is contained withi...

Building a website in 2021? Im guessing youre going to take a component-driven approach. Its all the chatter these days. React and Vue are everywhere (is Angular still a thing?), while other emerging ...

In this article, we explain how to build an integrated and interactive data visualization layer into an application with Cumul.io. To do so, weve built a demo application that visualizes Spotify Playl...

How to build a very common layout with CSS grid. Header on the top, footer on the bottom. Two columns, sidebar and main content. This one has navigation above the main content but within that same col...

I’m not exactly a large-scale DevOps guy, but I can tell ya we’ve been moving back toward a monorepo at CodePen and it’s rife with advantages over a system with lots of smaller repos...

You know, Porky Pig coming out of those red rings announcing the end of a Looney Tunes cartoon. Well get there, but first we need to cover some CSS concepts.Everything in CSS is a box, or rectangle. R...

Steren Giannini in “My stack will outlive yours”:My stack requires no maintenance, has perfect Lighthouse scores, will never have any security vulnerability, is based on open standards, is...

Back when I was 10, I remember my cousin visiting our house. He was (and still is) a cool kid, the kind who’d bring his own self-programmed chess game on a floppy disk. And his version of chess ...

There are a lot of grids on the web like this:.grid { display: grid; grid-template-columns: repeat(3, 1fr);}My message is that what they really should be is:.grid { display: grid; grid-template-co...

There were jokes coming back from the holiday break that JavaScript decided to go all server-side. I think it was rooted in:The Basecamp gang releasing Hotwire, which looks like marketing panache arou...

In my recent “Custom Properties as State” post, one of the things I mentioned was that theoretically, UI libraries, like React and Vue, could automatically map the state they manage o...

Lets have a look CSS @keyframes animations, and specifically about how you can pause and otherwise control them. There is a CSS property specifically for it, that can be controlled with JavaScript, bu...

Are you hosting one or more websites and are using a headless CMS? Are you hosting your CMS on a virtual machine or a container, or using a SaaS solution? If so, then you’re paying for the uptim...

First, scrollbars are a usability and accessibility thing. Second, a rule of thumb: if an area scrolls, it should have a visible scrollbar. But the web is a big place and I like tricks, so I’m g...

And it was released yesterday! The big news for us in CSS Land is that the new release supports the aspect-ratio property. This comes right on the heels of Safari announcing support for it in Safari T...

Many users these days expect instant feedback in form validation. How do you achieve this level of interactivity when youre building a small static site or a server-rendered Rails or Laravel app? Alpi...

ESM, meaning ES Modules, meaning JavaScript Modules. Like, import and friends.Browsers support it these days. There is plenty of nuance, but as long as you’ve dropped IE, the door is fairly open...

Netlify Edge Handlers are in Early Access (you can request it), but they are super cool and I think they are worth wrapping your brain around now. I think they change the nature of what Jamstack is an...

Over the last six years or so, Ive been using these things Ive been calling type patterns in my web design work, and theyve worked out pretty well for me. Ill dig into what they are and how they can &...

WordPress is a CMS thats coded in PHP. But, even though PHP is the foundation, WordPress also holds a philosophy where user needs are prioritized over developer convenience. That philosophy establishe...

There are quite a few CSS animation libraries. They tend to be a pile of class names that you can apply as needed like “bounce” or “slide-right” and it’ll… do those...

We rounded up a bunch of published 2020 annual reports right before the year ended and compiled them into a big ol’ list. The end of the list called out a couple of in-progress surveys, one of w...

Robin Weser’s “The Shorthand-Longhand Problem in Atomic CSS” in an interesting journey through a tricky problem. The point is that when you take on the job of converting something HT...

In my role as a web developer who sits at the intersection of design and code, I am drawn to Web Components because of their portability. It makes sense: custom elements are fully-functional HTML elem...

I just had to debug an issue with focusable elements in Firefox. Someone reported to me that when tabbing to a certain element within a CodePen embed, it shot the scroll position to the top of the pag...

With the recent climb of Bitcoins price over 20k $USD, and to it recently breaking 30k, I thought its worth taking a deep dive back into creating Ethereum applications. Ethereum, as you should know by...

Serverless, GraphQL, and DynamoDB are a powerful combination for building websites. The first two are well-loved, but DynamoDB is often misunderstood or actively avoided. Its often dismissed by folks ...

With ES Modules, you can natively import other JavaScript. Like confetti, duh:import confetti from 'https://cdn.skypack.dev/canvas-confetti';confetti();That import statement is just gonna run. There i...

Louis Lazaris demonstrates a very simple way of doing this.Hide the body (with JavaScript) right away with with a CSS class that declares opacity: 0Wait for all the JavaScript to execute Unhide the bo...

In the not-too-distant past, even basic accordion-like interactions required JavaScript event listeners or some CSS trickery. And, depending on the solution used, editing the underlying HTML could get...

Terence Eden poked around with a way to do footnotes using the <details>/<summary> elements. I think it’s kind of clever. Rather than a hyperlink that jumps down to explain the f...

Back when we released the v17 design (we’re on v18 now) of this site. I added html { scroll-behavior: smooth; } to the CSS. Right away, I got comments like this (just one example):… when y...

WordPress.com is where you go to use WordPress that is completely hosted for you. You don’t have to worry about anything but building your site. There is a free plan to get started with, and pai...

WordPress.com is where you go to use WordPress that is completely hosted for you. You don’t have to worry about anything but building your site. There is a free plan to get started with, and pai...

Imagine you have a list of items. Say, fruit: Banana, Apple, Orange, Pear, NectarineWe could put those commas (,) in the HTML, but lets look at how we could do that in CSS instead, giving us an extra ...

Good thinking from Paul Herbert on the Cloudfour blog about colorizing a component. You might look at a design comp and see a card component with a header background of #dddddd, content background of ...

I got a very helpful bug report the other day (thanks Kilian!) about the <details> element in a blog post of mine not showing the default ▶ icon, and thus looking rather like any olR...

Tiffany B. Brown on how Flash paved the way for some things we might think of as fairly modern web technologies:Flash wasn’t just good for playing multimedia. It was also good for manipulating i...

I believe animation on the web is not only fun, but engaging in such a way that it has converted site visitors into customers. Think of the Like button on Twitter. When you like a tweet, tiny colorful...

I think it’s great that the CSS Working Group does these. It’s like planting a flag in the ground saying this is what CSS looks like at this specific point in time. They do specifically sa...

One of my favorite things in the world is painters tape (also called masking tape). It seems like something silly: some tape you put on a wall when youre painting to avoid getting paint on the wall. T...

Jen was just tweetin’ about how the latest Safari Technical Preview has aspect-ratio. Looks like Chrome and Firefox both have it behind a flag, so with Safari joining the party, we’ll all ...

Spring animations are a wonderful way to make UI interactions come to life. Rather than merely changing a property at a constant rate over a period of time, springs allow us to move things using sprin...

Simon Willison has a project called Datasette, an open source multi-tool for exploring and publishing data. I’m not sure I’m qualified to explain it, but it’s like a tool to make han...

I recently had a project with a requirement to support theming on the website. It was a bit of a strange requirement, as the application is mostly used by a handful of administrators. An even bigger s...

Zell Liew is giving away 10 free copies of his Learn JavaScript course, and entering the giveaway is pretty easy: sign up for his newsletter. I’ve personally subscribed for some time now and all...

There is a <code> tag in HTML. I literally just used it to wrap that tag in the previous sentence so meta. It is an inline-by-default element that denotes any sort of code. It has default (us...

Weve seen the checkbox hack and how it can be used to build a complete state machine in CSS. Today, well take that line of thought a step further and build a simple game of Whack-A-Mole, where the pla...

Here’s a little hodgepodge of videos I’ve recently bookmarked (and watched). I couldn’t decide if each one of them should be a separate blog post or if I should do this combined list...

Here’s a fun idea from James Stanley: a CSS file (that presumably updates daily) containing CSS custom properties for “seasonal” colors (e.g. spring is greens, fall is oranges). You&...

Hasura is one of my favorite ways to create a managed GraphQL API for my applications. I find it easy and straightforward as well as suitable for a wide range of use cases. However, since working with...

I come to bury Flash, not to praise it, writes Matt May in this excellent thread about the end of Adobe Flash. Not so long ago, web designers used Flash to create striking visuals and animations and g...

Spencer Miskoviak on the Wealthfront blog:By creating custom DevTools specific to an app, they can operate at an even higher abstraction to handle things like user interactions, or debugging tracking ...

Nice site from Google (and guest contributors) with a bunch of fun demos of what Houdini can do. Plus a write-up from Una. These are all Paint API demos. Houdini is technically a group of seven things...

Adam Argyle has a post over on web.dev digging into this. He starts with the assumption that you need to do vertical centering and horizontal centering. It’s that vertical centering that has tra...

Heck of a year, eh? Like we do ever year, I’d like to give you a huge thanks for reading CSS-Tricks, and recap the year. More downs than ups, all told. Here at CSS-Tricks, it was more of a ̷...

Eleventy is increasing in popularity because it allows us to create nice, simple websites, but also because its so developer-friendly. We can build large-scale, complex projects with it, too. In this...

Me, I really dislike FOUT. I like that it’s an option, because not displaying text quickly on the web is no good. I know font-display: swap; is popular because it’s good for performance, b...

The goal of Client Hints is to provide a framework for a browser when informing the server about the context in which a web experience is provided.HTTP Client Hints are a proposed set of HTTP Header F...