Mac focus ring (halo)

[riddle]

Why do you feel there should be only one focus outline for every visitor of a site using normalize.css?

a:focus {
    outline: thin dotted;
}

This line will successfully erase native blue focus ring available system-wide on a Mac. Besides, declaring it with a shorthand reuses color from current element, making it inconsistent throughout the site for links and form widgets or different color.

[necolas]

As an example, let's say we made the outline color black. If normalize.css were used on a site (or widget) with a black background the focus outline would be invisible. Using the current color, rather than an specific color, is important for accessibility and usability.

So, the fixed-color focus style in WebKit browsers is not great. It can be improved by setting outline-color:currentColor but that still erases part of the 'native' focus style that you're keen on, while keeping the thick outline that others frequently look to remove. For consistency between browsers, and a better chance of people retaining an important accessibility aide, we defaulted to the dotted line focus style.

I'm open to any better solutions or compelling evidence to make a change.

[riddle]

You don’t have to do anything - browser will make sure the outline is visible by default. No need to overwrite the native defaults to make a new “better” default, especially when it’s not better. Many applications (like IE) use something similar to “outline: thin dotted invert”, Firefox 4 uses current color and Safari for Mac uses native focus ring. Everyone’s happy – the only thing to remember is to never overwrite focus outline globally like Meyer’s CSS once did.

[necolas]

Chrome on Windows, for one, uses an orange outline. It's a bad default, it doesn't change with link or background color, and people frequently look to remove it with `:focus {outline:0}. You're either left with a fixed focus style that can clash quite badly or be nearly invisible in certain designs, or you kill of an important accessibility aide. So, like I said, this is one way to avoid the worst of those issues.