Tag: Article
Passkeys: What the Heck and Why?
These things called passkeys sure are making the rounds these days. They were a main attraction at W3C TPAC 2022, gained support in Safari 16, are finding their way into macOS and [more…]
Some Cross-Browser DevTools Features You Might Not Know
I spend a lot of time in DevTools, and I’m sure you do too. Sometimes I even bounce between them, especially when I’m debugging cross-browser issues. DevTools [more…]
Making Calendars With Accessibility and Internationalization in Mind
Doing a quick search here on CSS-Tricks shows just how many different ways there are to approach calendars. Some show how CSS Grid can create the layout [more…]
5 Mistakes I Made When Starting My First React Project
You know what it’s like to pick up a new language or framework. Sometimes there’s great documentation to help you find your way through it. But even [more…]
Creating a Clock with the New CSS sin() and cos() Trigonometry Functions
CSS trigonometry functions are here! Well, they are if you’re using the latest versions of Firefox and Safari, that is. Having this sort of mathematical power in [more…]
Managing Fonts in WordPress Block Themes
Fonts are a defining characteristic of the design of any site. That includes WordPress themes, where it’s common for theme developers to integrate a service like Google [more…]
Everything You Need to Know About the Gap After the List Marker
I was reading “Creative List Styling” on Google’s web.dev blog and noticed something odd in one of the code examples in the ::marker section of the article. [more…]
An Approach to Lazy Loading Custom Elements
We’re fans of Custom Elements around here. Their design makes them particularly amenable to lazy loading, which can be a boon for performance. Inspired by a colleague’s [more…]
Different Ways to Get CSS Gradient Shadows
It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that [more…]
Healthcare, Selling Lemons, and the Price of Developer Experience
Every now and then, a one blog post is published and it spurs a reaction or response in others that are, in turn, published as blogs posts, [more…]
Moving Backgrounds
We often think of background images as texture or something that provides contrast for legible content — in other words, not really content. If it was content, [more…]
The Double Emphasis Thing
I used to have this boss who loved, loved, loved, loved to emphasize words. This was way back before we used a WYSIWYG editors and I’d have [more…]
A Fancy Hover Effect For Your Avatar
Do you know that kind of effect where someone’s head is poking through a circle or hole? The famous Porky Pig animation where he waves goodbye while [more…]
Caching Data in SvelteKit
My previous post was a broad overview of SvelteKit where we saw what a great tool it is for web development. This post will fork off what [more…]
AR, VR, and a Model for 3D in HTML
Tucked down somewhere in the Safari Technology Preview 161 release notes is a seemingly innocous line about support for a new HTML element and attribute: Added support [more…]
Animating CSS Grid (How To + Examples)
I’m pleased to shine a light on the fact that the CSS grid-template-rows and grid-template-columns properties are now animatable in all major web browsers! Well, CSS Grid [more…]
Getting Started With SvelteKit
SvelteKit is the latest of what I’d call next-gen application frameworks. It, of course, scaffolds an application for you, with the file-based routing, deployment, and server-side rendering [more…]
More Real-World Uses for :has()
The :has() pseudo-class is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least those of you who took [more…]
How to Transition to Manifest V3 for Chrome Extensions
While I am not a regular Chrome extension programmer, I have certainly coded enough extensions and have a wide enough web development portfolio to know my way [more…]
Solved With :has(): Vertical Spacing in Long-Form Text
If you’ve ever worked on sites with lots of long-form text — especially CMS sites where people can enter screeds of text in a WYSIWYG editor — [more…]
6 Common SVG Fails (and How to Fix Them)
Someone recently asked me how I approach debugging inline SVGs. Because it is part of the DOM, we can inspect any inline SVG in any browser DevTools. [more…]
