CSS Length Units
Overview Many CSS properties accept numbers as values. Sometimes those are whole numbers. Sometimes they’re decimals and fractions. Other times, they’re percentages. Whatever they are, the unit that follows a number determines the number’s computed length. And by “length” we mean any sort of distance that can be described as a number, such as the physical dimensions of an element, a measure of time, geometric angles… all kinds of things! At the time of this ..
Read more- 0 Comment
Demystifying Screen Readers: Accessible Forms & Best Practices
This is the 3rd post in a small series we are doing on form accessibility. If you missed the 2nd 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. What is a Screen Reader? You may have heard the term “screen reader” as you have been moving around the web. You might even be using a screen reader at this moment to run manual accessibility tests on the ..
Read more- 0 Comment
Managing User Focus with :focus-visible
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 forward with :focus-visible, let’s revisit how :focus works in your CSS. Focus is the visual indicator that an element is being interacted with via keyboard, mouse, trackpad, or assistive ..
Read more- 0 Comment
The Power of :has() in CSS
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 is and how we can utilize it. Syntax The :has() CSS pseudo-class helps style an element if any of the things we’re searching for inside it are found and accounted ..
Read more- 0 Comment
Accessible Forms with Pseudo Classes
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 the experience. Before we jump in, let’s get to the core of what web accessibility is. Form Accessibility? You have most likely heard the term “accessibili..
Read more- 0 Comment
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 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 future releases. Geeky OS security enhancements don’t exactly make big headlines in the front-end community, but i..
Read more- 0 Comment
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 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 are quite a few DevTools features that are interoperable, even some lesser-known ones that I’m about to share with you. For the sake of brevity, I..
Read more- 0 Comment
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 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 component — far more than what is covered in the articles I linked up. If you think about it, calendars are fraught with nuance, from handling timezon..
Read more- 0 Comment
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 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 how it was for me the first time I created a React project — and React is one of those frameworks with remarkable documentation, es..
Read more- 0 Comment
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 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 the newer functions: sin() and cos(). There are other trigonometry functions in the pipeline — including tan() — so why focus just on sin() and cos()? They happen to be perf..
Read more- 0 Comment