I recently started working on a Progressive Web App (PWA) for a client with my team. We’re using React with client-side routing via React Router, and one of the first elements that we made was the main menu. Menus …
Back when we released the v17 design (we’re on v18 now) of this site. I added html { scroll-behavior: smooth; } to the CSS. Right away, I got comments like this (just one example):
…… when you control+f or
Skip links are little internal navigation links that help users move around a page. It’s possible you’ve never actually seen one before because they’re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen …
I really like :focus-within. It’s a super useful selector that allows you to essentially select a parent element when any of its children are in focus.
Say you wanted to reveal some extra stuff when a <div></div> is hovered… …
I recently read this article by Keith Grant which introduced the newly arrived <dialog. Excited by this new UI element, I immediately sat down to experiment with it to see how it can be used effectively as a modal …
Say we have a <div></div>.
We only want this div to be visible when it’s hovered, so:
div:hover {
opacity: 1;
}We need focus styles as well, for accessibility, so:
div:hover,
div:focus {
opacity: 1;
}But div’s …
The :focus-within pseudo-selector in CSS is a bit unusual, although well-named and rather intuitive. It selects an element if that element contains any children that have :focus.
form:focus-within {
background: lightyellow;
}Which works like this…
<!-- this form Nice find by Ian Devlin:
The
:focus-withinpseudo class becomes active when an element itself has focus or if any of its descendants does.
Selecting a parent element based on children is lonnng awaited. The crown jewel of that …
