📝 CSS-Tricks 254: Back to Basics, Focus Styles, Morphing Text, and Build vs Buy

View this newsletter on the web.

For some reason this week I’ve been returning to the very basics of HTML and CSS, going over a lot of blog posts that remind me that there’s still some gaps I have in my knowledge when it comes to the foundations of web design. For example, back in May, Florens Verschelde wrote this great piece about styling buttons the right way and how to avoid all the common mistakes. Resetting the styles to make buttons look like links, and then adding hover, focus, and active states to make things look a bit snazzier.

On that note, Chris wrote a while back about the importance of :focus states:

Always worth repeating: all interactive elements should have a focus style. That way, a keyboard user can tell when they have moved focus to that element.

I feel like a lot of designers and developers hate :focus states. I’ve worked with folks who hate them and then whenever I need to use a keyboard to tab through an interface on the web I find it difficult to see the highlight. But :focus states should be gigantic and eye-catching, that’s really what’s best for usability.

The problem with CSS was that whenever you used :focus like this:

a:focus { background-color: blue; }

…it meant that when you clicked that link with a mouse or with your finger on a touch screen you’d see the focus state. And a lot of folks hated that. But now it’s possible to only make these styles apply to keyboard-focused elements with the :focus-visible pseudo. So you can write something like this:

/* Focusing the button with a keyboard will show a dashed black line. */ button:focus { outline: 4px dashed black; } /* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */ button:focus:not(:focus-visible) { outline: none; box-shadow: 1px 1px 5px rgba(1, 1, 0, .7); }

That :focus:not(:focus-visible) bit is a really smart hack for only applying these styles to mouse or touch clicks. And it’s a hack that has pretty okay-ish browser support, too.

[Chris]: All this focus stuff is a mind trip for me. I had to create a test page to wrap my mind around it all. It really is a clever trick to combine :focus and :focus:not(:focus-visible)so you can style keyboard focus and mouse focus differently, while not losing those keyboard focus styles in non-supporting browsers. In the future, if :focus-visible becomes perfectly supported and you’re in a position where you want keyboard-focus-only styles, you could only use :focus-visible, but that’s a lot of maybes.

[Chris]: Another thing worth mentioning. If you’re on a Mac and you are testing keyboard focus stuff, but aren’t a huge keyboard focus use yourself, you might have an OS setting you need to change. Go to System Preferences > Keyboard > Shortcuts and at the bottom there is a checkbox for “Use keyboard navigation to move focus between controls”. Browsers are starting to honor that, meaning keyboard tabbing might not work how you think it should if this setting isn’t on.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s