Разница между псевдоклассами -moz-focus-inner и -moz-focusring

-moz-focusring — это только Mozilla, нестандартное расширение псевдокласса, которое не следует использовать в производстве, поскольку оно не соответствует стандарту. Mozilla предполагает, что некоторые разработчики использовали его, чтобы различать фокусировку пользователей с помощью щелчка мыши и фокусировку с помощью табуляции на клавиатуре. focusring еще не определен ни в одной спецификации. Он соответствует только в том случае, если элемент уже имеет фокус, и разработчик определяет, что вокруг него должно быть нарисовано кольцо фокуса.

-moz-focus-inner — это активный слой (их реализация focus-inner), который добавляет границу к сфокусированным кнопкам не вместо контура фокуса по умолчанию, а в добавление к нему (в виде внутренней пунктирной черной границы). Это типично нежелательное поведение, которое можно устранить, например, с помощью normalize.css или просто написав собственное правило:

button::-moz-focus-inner {
  border: 0;
}

Почему Mozilla внедрила -moz-focus-inner так, что это раздражает многих разработчиков? Я думаю, это связано с тем, что это проект с долгой историей вкладов и экспериментов. Но главное отличие, с точки зрения разработки, заключается в том, что вам, как правило, нужно каким-то образом «иметь дело» с -moz-focus-inner, возможно, путем устранения его с помощью пользовательского правила CSS (если вы не используете хочу дополнительную версию FF этого визуального индикатора фокуса), тогда как -moz-focusring представляет нестандартный псевдокласс, обсуждаемый рабочей группой, который может стать частью спецификации в какой-то момент в будущем (селекторы 4 или 5).

Источники

1. https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring
2. https://github.com/necolas/normalize.css/issues/393
3. Как удалить пунктирный контур Firefox на КНОПКАХ, а также на ссылках?