Author: Chris Coyier

Having focus styles for any interactive element is crucial on a website. Hidde de Vries:

Focus indicators make the difference between day and night for people who rely on them. […]

Focus outlines help users figure out where they are on a page. They show which form field is currently filled in, or which button is about to be pressed. People who use a mouse, might use their cursor for this, but not everyone uses a mouse. For instance, there are many keyboard users: a person with a baby on one arm, people with chronic diseases that prevent the use of a mouse, and of course… developers and other power users.

You don’t have to create your own :focus styles in CSS, although you can. By default, browsers apply their own styles to interactive elements. But if you don’t like that look, the temptation is to style your own. So if you do something like this, boom, we’ve got focus styles under our control:

button:focus {
  outline: 5px solid red;
}

(By the way, outline is a great friend to focus styles for reasons Manuel Matuzovic gets into.)

But by doing this, we’ve also done something else: we’ve made it so when you click (like with a mouse on a desktop computer, otherwise known as a fine pointer) those :focus styles apply to the element. This can be highly undesirable, leading to the CEO being all like why does the button change looks when I click it??? Fair enough, CEO, let’s fix it.

The trick is using :focus-visible which is relatively new but has pretty solid browser support. The whole point of it is applying focus styles that apply at all times an element takes focus, except when a fine pointer clicks it. Which is kinda perfect really. But if you’re nervous about going all-in on only using :focus-visible, a way to continue to use :focus styles too is to wrap them in an @supports block like:

@supports not selector(:focus-visible) {
    button:focus {
        
    }
}

Fortunately, the browser support for @supports and the selector() function is a bit better than :focus-visible, so this buys some additional browser support .

Pen:

The post Tired of focus styles applying on mouse clicks? :focus-visible is the trick. appeared first on CodePen Blog.

Ideally, we’d just offer @parcel/css as a CSS processor choice right in our editors. We could absolutely do that, but we’re smack in the middle of a bunch of next-gen CodePen stuff, and we’re keeping our efforts focused there. Never fear, interesting new processors like this will be there along with it. But this CSS processor caught my eye especially because it’s a very fresh, modern, and interesting take on CSS processing. It handles vendor prefixing on its own (something you might otherwise use Autoprefixer for), it handles “syntax lowering” (love that term) for future-syntax CSS (like you’d use postcss-preset-env for), offers scoping, and even has its own built-in minifier, while being super fast. Nice!

So what if you do wanna try it on CodePen? Well, it’s actually possible because they have cleverly released the processor with a Wasm option, not just a backend-language-only thing. So here’s the plan:

1. Load the processor in the browser as a script (go Wasm go!)
2. Pull the CSS from the current Pen
3. Pass that CSS to the in-browser processor we just loaded
4. Get the transformed CSS
5. Replace the CSS in the preview with the transformed CSS

Check it:

The post One Weird Trick to Try @parcel/css on CodePen appeared first on CodePen Blog.