CSS-Trickz! also ready to join Digital Ocean

You probably want CSS-Tricks

Demystifying Screen Readers: Accessible Forms & Best Practices

Written by: Chris DeMars

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out “Managing User Focus with :focus-visible“. In this post we are going to look at using a screen reader when navigating a form, and also some best practices. Editor’s Note: Edits were made throughout […]

Continue reading "Demystifying Screen Readers: Accessible Forms & Best Practices" at CSS-Tricks

Managing User Focus with :focus-visible

Written by: Chris DeMars

This is going to be the 2nd post in a small series we are doing on form accessibility. If you missed the first post, check out Accessible Forms with Pseudo Classes. In this post we are going to look at :focus-visible and how to use it in your web sites! Focus Touchpoint Before we move […]

Continue reading "Managing User Focus with :focus-visible" at CSS-Tricks

The Power of :has() in CSS

Written by: Chris DeMars

Hey all you wonderful developers out there! In this post we are going to explore the use of :has() in your next web project. :has() is relatively newish but has gained popularity in the front end community by delivering control over various elements in your UI. Let’s take a look at what the pseudo class […]

Continue reading "The Power of :has() in CSS" at CSS-Tricks

Accessible Forms with Pseudo Classes

Written by: Chris DeMars

Hey all you wonderful developers out there! In this post, I am going to take you through creating a simple contact form using semantic HTML and an awesome CSS pseudo class known as :focus-within. The :focus-within class allows for great control over focus and letting your user know this is exactly where they are in […]

Continue reading "Accessible Forms with Pseudo Classes" at CSS-Tricks

Passkeys: What the Heck and Why?

Written by: Neal Fennimore

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 iOS, and are slated to be the future for password managers like 1Password. They are already supported in Android, and will soon find their way into Chrome OS and Windows in […]

Continue reading "Passkeys: What the Heck and Why?" at CSS-Tricks

Some Cross-Browser DevTools Features You Might Not Know

Written by: Pankaj Parashar

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 is a lot like browsers themselves — not all of the features in one browser’s DevTools will be the same or supported in another browser’s DevTools. But there […]

Continue reading "Some Cross-Browser DevTools Features You Might Not Know" at CSS-Tricks

Making Calendars With Accessibility and Internationalization in Mind

Written by: Mads Stoumann

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 efficiently. Some attempt to bring actual data into the mix. Some rely on a framework to help with state management. There are many considerations when building a calendar […]

Continue reading "Making Calendars With Accessibility and Internationalization in Mind" at CSS-Tricks

5 Mistakes I Made When Starting My First React Project

Written by: Richard Oliver Bray

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 the best documentation doesn’t cover absolutely everything. And when you work with something that’s new, you’re bound to find a problem that doesn’t have a written solution. That’s […]

Continue reading "5 Mistakes I Made When Starting My First React Project" at CSS-Tricks

Creating a Clock with the New CSS sin() and cos() Trigonometry Functions

Written by: Mads Stoumann

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 CSS opens up a whole bunch of possibilities. In this tutorial, I thought we’d dip our toes in the water to get a feel for a couple of […]

Continue reading "Creating a Clock with the New CSS sin() and cos() Trigonometry Functions" at CSS-Tricks

Managing Fonts in WordPress Block Themes

Written by: Ganesh Dahal

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 Fonts into the WordPress Customizer settings for a “classic” PHP-based theme. That hasn’t quite been the case for WordPress block themes. While integrating Google Fonts into classic themes […]

Continue reading "Managing Fonts in WordPress Block Themes" at CSS-Tricks

Everything You Need to Know About the Gap After the List Marker

Written by: Šime Vidas

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. The built-in list markers are bullets, ordinal numbers, and letters. The ::marker pseudo-element allows us to style these markers or replace them with a custom character or image. […]

Continue reading "Everything You Need to Know About the Gap After the List Marker" at CSS-Tricks

An Approach to Lazy Loading Custom Elements

Written by: Frederik Dohr

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 experiments, I recently set about writing a simple auto-loader: Whenever a custom element appears in the DOM, we wanna load the corresponding implementation if it’s not available yet. […]

Continue reading "An Approach to Lazy Loading Custom Elements" at CSS-Tricks