March 26th, 2025 

a:focus-visible {
  outline-offset: 0.25em;
  outline-width: 0.25em;
  outline-color: currentColor;
}

…makes any website better

51° N , 0° E

Also on Mastodon Bluesky

Responses

stffndk 👋

@adactio I have had these lines in my Stylus extension — for every website — for a few years:

a:focus-visible,button:focus-visible,details:focus-visible,summary:focus-visible,input:focus-visible { outline: 2px solid !important; outline-offset: -2px !important;}

f0a

Curtis Wilcox

@adactio I don’t think focus rings need to be bigger and more offset on big text than on smaller text, I’d go with px or maybe rem so they’re a consistent size/offset as you navigate.

currentColor is a good default to be reasonably sure it’ll be visible on the background color but ideally it’s a different color that stands out from other parts of the design, like borders and box-shadow.

6 Shares

# Shared by Thomas Beduneau on Wednesday, March 26th, 2025 at 5:42pm

# Shared by numa bulcub on Wednesday, March 26th, 2025 at 6:04pm

# Shared by Jérémy Renard on Wednesday, March 26th, 2025 at 6:11pm

# Shared by Erica on Wednesday, March 26th, 2025 at 7:41pm

# Shared by lydivette roldán on Wednesday, March 26th, 2025 at 11:30pm

# Shared by Bastien Calou on Thursday, March 27th, 2025 at 9:42am

35 Likes

# Liked by Andreas on Wednesday, March 26th, 2025 at 4:26pm

# Liked by Timo Koola on Wednesday, March 26th, 2025 at 4:26pm

# Liked by Andrea Roenning on Wednesday, March 26th, 2025 at 4:26pm

# Liked by mgiraldo on Wednesday, March 26th, 2025 at 4:33pm

# Liked by Jamie Boyd on Wednesday, March 26th, 2025 at 4:33pm

# Liked by KB on Wednesday, March 26th, 2025 at 4:53pm

# Liked by CSS-Tricks* on Wednesday, March 26th, 2025 at 4:58pm

# Liked by Richard Gil on Wednesday, March 26th, 2025 at 4:58pm

# Liked by 𝕮 on Wednesday, March 26th, 2025 at 4:58pm

# Liked by Diego López :kirby: on Wednesday, March 26th, 2025 at 5:07pm

# Liked by Luke Dorny on Wednesday, March 26th, 2025 at 5:08pm

# Liked by Олекса 🇺🇦 on Wednesday, March 26th, 2025 at 5:29pm

# Liked by Thomas Beduneau on Wednesday, March 26th, 2025 at 5:29pm

# Liked by Thomas Beduneau on Wednesday, March 26th, 2025 at 5:42pm

# Liked by Jordan Earle on Wednesday, March 26th, 2025 at 6:03pm

# Liked by numa bulcub on Wednesday, March 26th, 2025 at 6:04pm

# Liked by Adam Menczykowski on Wednesday, March 26th, 2025 at 6:04pm

# Liked by Bart van de Biezen on Wednesday, March 26th, 2025 at 6:11pm

# Liked by Andy Millington on Wednesday, March 26th, 2025 at 6:11pm

# Liked by Jason Neel on Wednesday, March 26th, 2025 at 6:11pm

# Liked by Jordi Sánchez on Wednesday, March 26th, 2025 at 6:28pm

# Liked by Ariel Salminen on Wednesday, March 26th, 2025 at 6:53pm

# Liked by Riccardo Sartori on Wednesday, March 26th, 2025 at 7:06pm

# Liked by stffndk 👋 on Wednesday, March 26th, 2025 at 7:06pm

# Liked by Gerard Jota on Wednesday, March 26th, 2025 at 7:23pm

# Liked by Eddie on Wednesday, March 26th, 2025 at 7:41pm

# Liked by Erica on Wednesday, March 26th, 2025 at 7:41pm

# Liked by Daniel Burka on Wednesday, March 26th, 2025 at 7:52pm

# Liked by Ryan Perry on Wednesday, March 26th, 2025 at 9:01pm

# Liked by Evil Jim O’Donnell on Wednesday, March 26th, 2025 at 10:16pm

# Liked by Niels Aling on Wednesday, March 26th, 2025 at 10:52pm

# Liked by lydivette roldán on Wednesday, March 26th, 2025 at 11:30pm

# Liked by Alberto Calvo on Thursday, March 27th, 2025 at 5:46am

# Liked by Fabian Klingenberg on Thursday, March 27th, 2025 at 7:01am

# Liked by Ralph on Thursday, March 27th, 2025 at 7:20am

Have you published a response to this? :