2

It seems to me that the pseudo-classes -moz-focus-inner and -moz-focusring have the same task.

Although I often see the property -moz-focus-inner in examples, it does not seem to have any effect on the formatting of form elements, unlike -moz-focusring (at least under Firefox 66 / Win).

Can someone explain to me what the difference between the two properties is and if and when I need -moz-focus-inner?

Janek
  • 53
  • 5

1 Answers1

2

-moz-focusring is a Mozilla only, non-standard pseudo-class extension that should not be used in production because it's not on a standards track. Mozilla suggests that some developers have used it to differeniate between users focusing via mouse click versus focusing via keyboard tabbing. focusring hasn't been defined in any specification yet. It only matches if the element already has focus and the dev determines that a focus ring should be drawn around it.

-moz-focus-inner is an active layer (their implmentation of focus-inner) that adds a border to focused buttons, not in replacement of the default focus outline but in addition to it (in the form of a inner dotted black border). This appears to be typically unwanted behavior that can be eliminated by using normalize.css for example, or just writing your own custom rule:

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

As to why Mozilla has implemented -moz-focus-inner in a way that annoys lots of developers? I guess that's down to its being a project with a long history of contributions and experiments. But the main difference, from a development perspective, is that you typically will need to "deal" with -moz-focus-inner in some way, probably by eliminating it via custom CSS rule (unless you want the additional FF version of this visual focus indicator), whereas -moz-focusring is representative of a non-standard psuedo-class being discussed by the Working Group that may become part of the specification at some future point (Selectors 4 or 5).

Sources

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring
  2. https://github.com/necolas/normalize.css/issues/393
  3. How to remove Firefox's dotted outline on BUTTONS as well as links?
Donkey Shame
  • 754
  • 3
  • 18
  • Thank you for the extensive answer ! -moz-focus-inner is a is a pseudo element - is that correct ? – Janek Apr 10 '19 at 11:33
  • Hmm. That's a good question. Based on the definition of a "psuedo-class," it appears to me at leat that `-moz-focus-inner` would fall under that category: i.e., the application of a "phantom class" in the event of a dynamic element state that is entered into and exited out of. Psuedo elements allow one to define logical elements that are not actually in the document tree. But maybe someone else will have a better clarification...? – Donkey Shame Apr 10 '19 at 11:45
  • If you believe mine is a sufficient answer to your question, please consider marking the question answered. Thanks, @Janek! – Donkey Shame Apr 10 '19 at 18:17