Notes on Josh Comeau's Custom CSS Reset
We recently talked with Elad Shechter on his new CSS reset, and shortly after that Josh Comeau blogged his.
Support Multiple Frameworks in a Monorepo
We're going to make a Yarn workspaces-based monorepo that supports multiple frameworks, including React, Vue, Svelte, and Angular.
Jetpack Features We Love and Use at CSS-Tricks
We use and love Jetpack around here. It's a WordPress plugin that brings a whole suite of functionality to your site ranging from security to marketing with
Should CSS Override Default Browser Styles?
Every CSS ruleset you write will likely changes the defaults of something. But should CSS override browser defaults defaults?
CSS-Based Fingerprinting
Fingerprinting is bad. It's a term that refers to building up enough metadata about a user that you can essentially figure out who they are. JavaScript has
How to Create a Browser Extension
I’ll bet you are using browser extensions right now. Some of them are extremely popular and useful, like ad blockers, password managers, and PDF viewers.
Thank You (2021 Edition)
The year has come to a close and it's time again for our end-of-year wrapup. The most important message is this: thank you. (thankyouthankyou)
On Yak Shaving and md-block, a new HTML element for Markdown
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
Strut Your Stuff With a Custom Scrollbar
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.
Care for the Text
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
2021 Roundup of Web Research
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
Remember You Are Not the User
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
Show, Don't Tell
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
Increase Your Reach
NGL, I was a little overwhelmed when I sat down to write this article. There are so many things that immediately flooded my mind—take out any extra divs; use
A visual introduction to machine learning
Just the first sentence alone here from Stepanie Yee and Tony Chu is solid:
The surprising behavior of !important in CSS custom property values
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
Working With Web Feeds: It’s More Than RSS
Between Google Chrome experimenting with “following” sites, along with a growing frustration of how social media platforms limit a creator’s reach to their
Consistent, Fluidly Scaling Type and Spacing
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
Topological sort
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
HTML Sanitizer API
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
Maybe there kinda is background-opacity?
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
Think Without Boxes
What’s 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
Faulty logic
Ain't this the truth:
CSS-Tricks Chronicle XLI
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
File Scaffolding With Hygen
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
Ship a Full-Stack App in Days with AWS Amplify Studio
Amazon has a vision with AWS Amplify. First, a premise:
Shadow Palette Generator
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
Embrace the Platform
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 …
Standardizing Focus Styles With CSS Custom Properties
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
Learn From Remix
I’ve built websites that are used by millions of people all over the world. I’ve made more mistakes than I care to count and I’ve had to deal with the
The Invisible JavaScript Backdoor
An interesting (scary) trick of an nearly undetectable exploit. Wolfgang Ettlinger:
Test Your Product on a Crappy Laptop
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. It’s also no secret
Spicy Sections
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
Reduce Your Website’s Environmental Impact With a Carbon Budget
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)
Low framerate in Safari on M1 Mac
John James Jacoby:
Exactly What You Want
What is one thing people can do to make their website better?
Embrace the Unpredictable
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
A Look at the Cloudinary WordPress Plugin
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
Diagonal Stripes Wipe Animation
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
Using the Reflog to Restore Lost Commits
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!
Recreating the Apple Music Hits Playlist Animation in CSS
Apple Music has this "Spatial Audio" feature where the direction of the music in your headphones is based on the location of the device. It's tough to explain
A Handy Little System for Animated Entrances in CSS
I love little touches that make a website feel like more than just a static document. What if web content wouldn’t just “appear” when a page loaded, but
When is it "Right" to Reach for contain and will-change in CSS?
I've got some blind spots in CSS-related performance things. One example is the will-change property. It's a good name. You're telling the browser some
Creating Generative Patterns with The CSS Paint API
The browser has long been a medium for art and design. From Lynn Fisher's joyful A Single Div creations to Diana Smith's staggeringly detailed CSS paintings,
Control Layout in a Multi-Directional Website
Many business websites need a multilingual setup. As with anything development-related, implementing one in an easy, efficient, and maintainable way is
Which SVG technique performs best for way too many icons?
Tyler Sticka digs in here in the best possible way: by making a test page and literally measuring performance. Maybe 1,000 icons is a little bit of an edge
Responsive Layouts, Fewer Media Queries
We cannot talk about web development without talking about Responsive Design. It’s just a given these days and has been for many years. Media queries are a
Coding Font Game
A tournament bracket UI where you pick your favorite between two coding fonts and your choices are whittled down all the way to a final winner. A clever way
PHP Date and Time Recipes
Dealing with dates and times is one of those things that can frustrate programmers a lot. At the same time, they are fundamental to software development, used
Cherry-Picking Commits in Git
In part 5 of this series, we looked at rebasing and merging. Although there are a couple of differences between git merge and git rebase, both commands have the same goal: they integrate changes from one branch into another.
The Gap (Design Engineering)
Egor Kloos describes a situation where a (purely visual) designer asks for some changes to a component. There is a misunderstanding where the (code monkey)
Jamstack TV
That's the name of Netlify's YouTube Channel. Love that. I linked up Rich's talk the other day, which was a part of this past JamstackConf, but now all the
Line length revisited: following the research
Mary Dyson produces nitty gritty research on the long-accepted notion that shorter line lengths are more legible than longer ones. The study finds that
Generate a Pull Request of Static Content With a Simple HTML Form
Jamstack has been in the website world for years. Static Site Generators (SSGs) — which often have content that lives right within a GitHub repo itself — are
Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library
Theming UI refers to the ability to perform a change in visual styles in a consistent manner that defines the “look and feel” of a site. Swapping color
Interactive Rebase: Clean up your Commit History
Interactive Rebase is the Swiss Army knife of Git commands: lots of use cases and lots of possibilities! It's really a great addition to any developer's tool chain, because it lets you revise your local commit history—before you share your work with the rest of the team. Let's see what you can do with an interactive rebase and then look at some practical examples.
Other Looks at the Conditional Border Radius Trick
Remember when Ahmad Shadeed wrote about that border-radius "toggle" he found in Facebook's CSS? It was interesting! I covered it. A few weeks after that surge
Semantic menu context
Scott digs into the history of the <menu> element. He traced it as far back as HTML 2 (!) in a 1994 changelog. The vibe then, it seems, was to mark up a
Quick and Dirty Bootstrap Overrides at Runtime
Bootstrap 5.2 shipped with solutions for the methods covered in this post. So, if you're using Bootstrap 5.2 or newer, you should be able to tinker with CSS
Don't Snore on CORS
Whatever, I just needed a title. Everyone's favorite web security feature has crossed my desk a bunch of times lately and I always feel like that is a sign I