Articles by CSS Tricks from August 2021

A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-l...

After the fragmentation effect, I am going to tackle another interesting animation: the blob! We all agree that such effect is hard to achieve with CSS, so we generally reach for SVG to make those goo...

That’s a heartwrenching title from Michael Williamson. I believe it though. It’s kinda like a maximized version of the blogging phenomenon where if you work on a post for weeks it’ll...

What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at w...

(This is a sponsored post.)There is a conversation that has been percolating for as long as I’ve been in the web design and development industry. It’s centered around the conflict between ...

When I think about what front-end development really is and feels like, this is at the heart of it: designing around a huge set of unknowns, and really embracing that notion as a strength of the web r...

The perfect link Rian Rietveld defines them: “When you click on them, they take you somewhere else.” Not much code in here (we’ve got that), just a lot of practical accessibility ad...

While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Lets take a look at one of those tools: a generator that ...

A question:If you copy a code sample that uses two-space indentation and you want to convert it to four-space indentation, what’s the *fastest* and easiest option?Matt Stauffer, TwitterI wrote a...

Todays websites are overflowing with animationsoften too many. They get in the way of the content and slow down our busy users. But at the same time: theyre wonderful. They bring websites to life, are...

This is a bit of advice for developers on Macs I’ve heard quite a few times, and I’ll echo it: go into System Preferences > General > Show scroll bars and set to always. This isn&#...

(This is a sponsored post.)Free event hosted by Netlify coming up next week (Wednesday, August 25th): Architecting with Next.js. It’s just a little half-day thing. No brainer.Join us for a speci...

Solid is a reactive JavaScript library for creating user interfaces without a virtual DOM. It compiles templates down to real DOM nodes once and wraps updates in fine-grained reactions so that when st...

You can’t just do @media (prefers-reduced-data: no-preference) alone because, as Kilian Valkhof says:[…] that would be false if either there was no support (since the browser wouldn’...

We can update the URL in JavaScript. We’ve got these APIs:// Adds to browser historyhistory.pushState({}, "About Page", "/about");// Doesn'thistory.replaceState({}, "About Page", "/about");JavaS...

I appreciated this bit of nuance from a post on Viget’s blog:There could be a whole article written about the many flavours of Tailwind, but broadly speaking those flavours are:1. Stock tailwind...

Frontity is a WordPress-focused React-based server-side dynamic-rendering framework (phew!) that allows us to create fast headless websites. Chris has a good introduction to Frontity. I guess you coul...

I’ve seen this confuse more than a handful of people recently, including myself, so I’m making sure it’s written down.Let’s chuck a couple of custom properties into CSS:html { ...

Nuxt is a JavaScript framework that extends the existing functionality of Vue.js with features like server-side rendering, static page generation, file-based routing, and automatic code splitting amon...

(This is a sponsored post.)In this article, we will discuss how we can apply schema stitching across multiple Fauna instances. We will also discuss how to combine other GraphQL services and ...

Over at the JS Party poundcast:[Kend C. Dodds]: […] ask anybody whos done regular, old CSS and theyll tell you that I dont know if its okay for me to change this, so Im gonna duplicate it. And &...

Have you already tried using WordPress headlessly with Gatsby? If you havent, you might check this article around the new Gatsby source plugin for WordPress; gatsby-source-wordpress is the official so...

Dave points to Sarah’s post on Developer Experience (DX) at Netlify. Part of what Sarah did there is lay out what the role means. It’s a three-part thing:Integrations Engineering (e.g. fea...

I’ve been working on the same project for several years. Its initial version was a huge monolithic app containing thousands of files. It was poorly architected and non-reusable, but was hosted i...

Brian Kardell shares a bit about the progress of bringing "Tabs" to HTML. We kinda think we know what they are, but you have to be really specific when dealing with specs and defining them. It's trick...

Ahmad Shadeed dug into shape “cutouts” the other day. Imagine a shape with another smaller shape carved out of it. In his typical comprehensive way, Ahmad laid out the situation welllookin...

HTML is not a programming language.I’ve heard that sentence so many times and its tiring. Normally, it is followed by something like, It doesn’t have logic, or, It is not Turing complete,....

Looks like… 253 of them. I love the little water spout one. (U+297e). Because. And I like how it’s a fairly useful little site at a great domain and with a little business model behind it...

Whether you are just starting out on the front end, or youve been doing it for a long time, building a tool that can generate some cool front-end magic can help you learn something new, develop your s...

A few days ago, Chris wrote up his thoughts about how alert(), confirm(), and prompt() were being deprecated by Chrome and collected a bunch of thoughts from developers. If certain features can essent...

Now that weve seen that web components and interactive web components are both easier than you think, lets take a look at adding them to a content management system, namely WordPress.There are three m...

Heck of a CSS trick here from Dongsung Kim. There are hidden HDR videos playing at the corners of this page. When a HDR-capable browser encounters one, it switches to HDR mode. For some reason, CSS ba...

You’ll often hear developers talking about static vs. dynamic sites, or you may have heard someone use the term Jamstack. What do these terms mean, and when does a static site become either a Ja...

We took a surface level look at Pipedream the other day, which really does look cool. It’s like a much more modern and fancy version of what Yahoo Pipes was. A better comparison might be Zapier,...

Have you ever wished you could see the HTML source of a web page while on a mobile browser, which generally doesn’t offer that feature? If you have a desktop machine around, there are ways, but ...

Markdown truly is a great format. Its close enough to plain text so that anyone can quickly learn it, and its structured enough that it can be parsed and eventually converted to you name it.That being...

(This is a sponsored post.)Got a WooCommerce store? It behooves you to offer a variety of payment methods. Just anecdotally, I’m sure both you and me have been annoyed and even abandoned purchas...

Heres Kilian Valkhof on CSS nesting which isn’t available in browsers yet, but will be soon. There are a few differences he notes between CSS nesting and nesting in Sass or Less though. Take, fo...

It might be the very first thing a lot of people learn in JavaScript:alert("Hello, World");One day at CodePen, we woke up to a ton of customer support tickets about their Pens being broken, which ulti...

We’ve got viewport units (e.g. vw, vh, vmin, vmax), and they are mostly pretty great. It’s cool to always have a unit available that is relative to the entire screen. But when you ask peop...

In my previous article, I created a fragmentation effect using CSS mask and custom properties. It was a neat effect but it has one drawback: it uses a lot of CSS code (generated using Sass). This time...

Great little project from Ross Moody: SVG Gobbler is a browser extension that finds the vector content on the page you’re viewing and gives you the option to download, optimize, copy, view the c...

Nuxt offers an incredible developer experience, with a lot of performance and application setup best practices baked in. In recent releases, theyve been working on taking this developer experience to ...

I recently wrote a very basic Sass loop that outputs several padding and margin utility classes. Nothing fancy, really, just a Sass map with 11 spacing values, looped over to create classes for both p...

Donnie D’Amato built a whole site around the thesis that “digital designers still expect to use the grid while experienced layout engineers have moved beyond it.” The idea isn’...

Theres usually more than one way to code a thing in React. And while its possible to create the same thing different ways, there may be one or two approaches that technically work better than others. ...

(This is a sponsored post.)Flutter is Google’s UI framework used to create flexible, expressive cross-platform mobile applications. It is one of the fastest-growing frameworks for mobile app dev...

You gotta appreciate the tenacity of Surma. He’s been advocating for Web Workers as a path forward to better-feeling websites for a lot of years now. He’s at it again making sure we all un...

Straight across or down, thats the proverbial order for user controls on a screen. Like a list of menu items. But what if we change that to a more fluid layout with bends, curves, and nooks? We can pu...

The first time cloud functions / serverless functions clicked for me was when I saw and tried Auth0’s (now defunct) Webtask. It was a little CodePen-like IDE but you didn’t really see anyt...

Any company that uses GitHub for critical applications needs a backup that can be restored quickly when needed. Cyberattacks, human errors, or a forced push are just some of the scenarios that can res...

While most people browsing the web on a computer use a mouse, many rely on their keyboard instead. Theoretically, using a web page with the keyboard should not be a problem press the TAB key to move ...

They are actually called “CSS Module Scripts” and are a native browser feature, as opposed to the popular open-source project that essentially does scoped styles by creating unique class n...

With a little knowledge of music theory, we can use regular HTML, CSS and JavaScriptwithout any libraries or audio samplesto create a simple digital instrument. Lets put that into practice and explore...