CSS Container Queries
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up. Notice how the syntax it’s a lot like a…
CSS Length Units
Overview This is super tricky because CSS is extremely flexible and there are no definitive or hard-and-fast rules for when to use a specific type of CSS length unit over another. In some…
Demystifying Screen Readers: Accessible Forms & Best Practices
If you click the “Use VoiceOver” button you are well on your way to using VO to test your websites and apps. One thing to keep in mind is that VO is optimized…
Managing User Focus with :focus-visible
button:focus-visible { outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold; } /*** OR ***/ input:focus-visible { outline-color: black; font-size: 1.2em; font-family: serif; font-weight: bold; } Support One example that always comes to mind…
Accessible Forms with Pseudo Classes
Focus, in regards to accessibility and the web experience, is the visual indicator that something is being interacted with on the page, in the UI, or within a component. CSS can tell when…
Passkeys: What the Heck and Why?
There are cases where we need to verify that a message did indeed come from its sender. In these cases, we use signing and signature verification to ensure that the sender is who…
Some Cross-Browser DevTools Features You Might Not Know
Here’s another way to access a DOM node directly from the console: as a temporary variable. This option is available by right-clicking on the node and selecting an option. That option is labeled…
Making Calendars With Accessibility and Internationalization in Mind
But let’s take this one more step… You might recall how all the days are just one <ol> with list items. To style these into a readable calendar, we dive into the wonderful…
5 Mistakes I Made When Starting My First React Project
So, that’s what this article is — a list of the early mistakes I made. I hope they help make learning React a lot smoother for you. You will still need to import…
Creating a Clock with the New CSS sin() and cos() Trigonometry Functions
const update = () => { let s = “”; for (let i = 1; i <= rings.valueAsNumber; i++) { const r = spread.valueAsNumber * i; const theta = coords(dots.valueAsNumber * i); for…
Managing Fonts in WordPress Block Themes
That’s what we’re going to look at in this article. Block themes can indeed use Google Fonts, but the process for registering them is way different than what you might have done before…
Everything You Need to Know About the Gap After the List Marker
To sum up, switching to list-style-position: inside introduces two problems. We can no longer increase the gap via padding-left on <li>, and the gap size is inconsistent between browsers. According to CSS Counter…
An Approach to Lazy Loading Custom Elements
connectedCallback() { let scope = this.parentNode; defer(() => { this.discover(scope); }); let observer = this._observer = new MutationObserver(mutations => { for(let { addedNodes } of mutations) { for(let node of addedNodes) { defer(()…
Different Ways to Get CSS Gradient Shadows
I know it’s a bit tricky, but unlike clip-path, the mask property doesn’t account for the area outside an element to show and hide things. That’s why I was obligated to introduce the…
Healthcare, Selling Lemons, and the Price of Developer Experience
Tough to stomach, right? No one wants to be duped, and it’s tough to admit a sunken cost when there is one. It gets downright personal if you’ve invested time in a specific…
Moving Backgrounds
GSAP is the main driver there, but I imagine we could make a boiled-down version that simply translates each background layer from left to right at different speeds. Not as cool, of course,…