Articles by CSS Tricks from October 2021

A guide to designing accessible, WCAG-compliant focus indicators Sara Soueidan says you can make more accessible focus outlines by doing your own, rather than leaving it to the browser as long as yo...

There has been a lot of talk about automated social images lately. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There is definitely interest! People like Ryan Filler an...

There is an old Russian fable where Okhsv and Okhsl are on a rowboat and Okhsv says to Okhsl, “What are the known shortcomings of HSL and HSV color pickers in design applications?” I kid, ...

Vite, “Next Generation Frontend Tooling” from Evan You, has been capturing a lot of attention. I’ve heard rave reviews from developers, even in private chats (you gotta try this!). B...

Merge conflicts... Nobody likes them. Some of us even fear them. But they are a fact of life when you're working with Git, especially when you're teaming up with other developers. In most cases, merge...

(This is a sponsored post.)Kendo UI makes it possible to go from a basic idea to a full-fledged app, thanks to a massive component library. We’re talking well over 100 components that are ready ...

I ran across this 30 seconds of code website the other day, and they have a CSS section which is really good! The first example snippet I looked at was this “floating section headers” exam...

A look from Christian Kozalla on the <dialog> HTML element and using it to create a nice-looking and accessible modal. CodePen Embed FallbackI’m attracted to the <dialog> element...

Cypress is an automated test runner for browser-based applications and pages. Ive used it for years to write end-to-end tests for web projects, and was happy to see recently that individual component ...

We’ve covered URL schemes: A URL Scheme is like http:// or ftp://. Those seem like a very low-level concept that you dont have much control over, but actually, you do!I’d call it non-trivi...

If you have a page that includes a lot of information, its a good idea to let users search for what they might be looking for. Im not talking about searching a database or even searching JSON data Im...

(This is a sponsored post.)Building products for users is a balance between your vision of what your product can do for them, and refining that vision based on their feedback. If youre really a custom...

When I wrote the “book” The Greatest CSS Tricks Vol. I, I put “book” in quotes because there wasn’t anything terribly book-like about it. The only way you could read it w...

The past year has seen a healthy debate around the term ‘Jamstack’ as the definition gets stretched to include new use cases. I recently posted my take on a Jamstack definition in Static v...

A single-serving website from Alexander Vishnyakov for testing if it’s valid to put any particular HTML element within another type of HTML element. Kinda neat to have a quick reference for this...

Adding borders to complex shapes is a pain, but rounding the corner of complex shapes is a nightmare! Luckily, the CSS Paint API is here to the rescue! Thats what were going to look at as part of this...

It’s not uncommon for my front-end workflow to go something like this:Work on thing.See that thing in an automatically refreshed browser.See something wrong with that thing.Inspect and correct t...

(This is a sponsored post.)I only half-jokingly refer to the CSS-in-JS world as CSS-in-React. Many of the libraries listed below theoretically work in non-React situations they generally call that &#...

We’re going to create a contact form with Next.js and Netlify that displays a confirmation screen and features enhanced spam detection.Next.js is a powerful React framework for developing perfor...

Do you know what to use the @ sign for something other than email addresses and Twitter handles? I do!  Pawel Grzybek notes how some old physical typewriters had an “Arroba” on them ...

No matter what stage youre at as a developer, the tasks we completewhether big or smallmake a huge impact in our personal and professional growth. Unfortunately, those tasks arent always recognized be...

I didn’t realize the support for @supports determining selector support was so good! I usually think of @supports as a way to test for property: value pair support. But with the selector() funct...

Hey folks! Elad reached out to me to show me his new CSS reset project called the-new-css-reset. Its quite interesting! I thought a neat way to share it with you is not only to point you toward it, bu...

This isn’t supposed to be any sort of decision-making based on browser User-Agent Strings. But, ya know, collectively, we do make those decisions.Karl Dubost notes that there is a significant ch...

I believe that a traditional WordPress theme should be able to work as effectively as a static site or a headless web app. The overwhelming majority of WordPress websites are built with a good ol̵...

I love CSS Grid. I love how, with just a few lines of code, we can achieve fully responsive grid layouts, often without any media queries at all. Im quite comfortable wrangling CSS Grid to produce int...

One way to work with Custom Properties is to think of them as design tokens. Colors, spacings, fonts, and whatnot. You set them at the root of the page and use them throughout your CSS. Very useful, a...

Browse through SaaS communities on Twitter, LinkedIn, Reddit, Discord, you name it and youll see a common theme appear in many of them. That theme can go by many names: BI, analytics, insights and so ...

Web-browser for research that helps programmers think clearly.With Bonsai, rather than being like, I’m going to go use my web browser now, you hit Option + Space and it brings up a browser. It&#...

As someone just sittin’ back watching CSS evolve, it feels like we’re at one of the hottest moments of innovation in CSS history. It was really something when we got flexbox across all bro...

Ahmad Shadeed blogs the sentiment that we might not need to lean on position: absolute as much as we might have in the past. For one thing: stacking elements. For example, if you have a stack of eleme...

Which new framework should I learn this year? Is it time to ditch my CMS? What tools should I pick up if I want to scale my site to an audience of millions? The 2021 Jamstack Community Survey is here ...

Google Analytics is powerful analytics software. A common way to use it is to just slap the JavaScript snippet on every page template you have and let it collect basic data about unique visitors and p...

Why would a company promote a native app over their perfectly usable website?Wed have to ask them, I suppose. But its hard not to see this push to native as a matter of priorities: that these companie...

The README for Cash is straightforward:Cash is an absurdly small jQuery alternative for modern browsers (IE11+) that provides jQuery-style syntax for manipulating the DOM. Utilizing modern browser fea...

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 the next articles!In this third installment of our Advanced Git series, wel...

A good essay from Jean Yang. What I mean by developer experience is the sum total of how developers interface with their tools, end-to-end, day-in and day-out. Sure, theres more focus t...

I like the pushback from Katie Kodes here. I’ve said in the past that I don’t think server-side languages haven’t quite nailed “building in components” as well as JavaScr...

Today we will be learning how to build a tennis trivia app using Next.js and Netlify. This technology stack has become my go-to on many projects. It allows for rapid development and easy deployment.Wi...

I saw this blog post the other day: 58% of Hacker News, Reddit and tech-savvy audiences block Google Analytics. That’s an enticing title to me. I’ve had Google Analytics on this site liter...

There comes a time on a project when it’s worth investing in tooling to protect the codebase. I’m not sure how to articulate when, but it’s somewhere after the project has proven to ...

Blog posts that get into the whole “how to think like a front-end developer” vibe are my favorite. Michelle Barker nails that in this post, and does it without sharing a line of code!We si...

vanilla-extract is a new framework-agnostic CSS-in-TypeScript library. Its a lightweight, robust, and intuitive way to write your styles. vanilla-extract isnt a prescriptive CSS framework, but a flexi...

(This is a sponsored post.)KendoReact can save you boatloads of time because it offers pre-built componentry you can use in your app right away. They look nice, but more importantly, they are easily t...

Heres a beautiful website: its a type specimen for Mass-Drivers ever-so-lovely type family MD Nichrome. Theres a ton of nifty animations and graphics explaining all the features insideIf you’re ...

Baldur Bjarnason brings some baby bear porridge to the discussion of Single Page App (SPA) vs. Multi Page App (MPA).Single-Page-Apps can be fantastic. Most teams will mess them up because most teams ...

If you run or have recently switched to a static site generator, you might find yourself writing a lot of Markdown. And the more you write it, the more you want the tooling experience to disappear so ...

In HTML, there is a very clear input type for dealing with passwords:<input type="password"If you use that, you get the obfuscated bullet-points when you type into it, like:That’s the web tr...

Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It’s just good UX. You can actually pull it off in CSS, which I think is ...

Ahmad Shadeed documents a bonafide CSS trick from the Facebook CSS codebase. The idea is that when an element is the full width of the viewport, it doesn’t have any border-radius. But otherwise,...

In this article I'm going to talk about branching strategies and different types of Git branches. Im also going to introduce you to two common branching workflows: Git Flow and GitHub Flow.The post Br...

This is some bonafide CSS trickery from Harry that gives you some generic performance advice based on what it sees in your <head> element. First, it’s possible to make a <style> ...

Dumb trick alert! Not all browsers support all features. Say you want to write a fallback for browsers that doesn’t support CSS Grid. Not very common these days, but it’s just to illustrat...

Animating elements with CSS can either be quite easy or quite difficult depending on what you are trying to do. Changing the background color of a button when you hover over it? Easy. Animating the po...

Dave and I slapped up a little videos section of the ShopTalk website. Twelve so far! They are short-ish, between 10-20 minutes, each focused on one fairly specific thing. We’re kinda just dippi...

How To Use The Vite Build Tool with React Vite is hot, in part, because it’s based on esbuild and wickedly fast. It’s from Evan You of Vue fame, but it’s not a Vue-specific tool. He...

I'm certainly not dogmatic about it, but I think if you can pull of a project with literally zero build process, it feels good while working on it and feels very good when you come back to it months/y...

Directives are one of GraphQLs best and most unspoken features.Let’s explore working with GraphQLs built-in schema and operation directives that all GraphQL spec compliant APIs must implement....

(This is a sponsored post.)Of the languages that browsers speak, I’d wager that the very first one that developers decided needed some additional processing was HTML. Every single CMS in the wor...

A commit can be something that helps us stay on top of things. It can be a container for related changes that belong to one and only one topic, and thereby make it easier for us to understand what hap...

(This is a sponsored post.)Of the languages that browsers speak, I’d wager that the very first one that developers decided needed some additional processing was HTML. Every single CMS in the wor...