A reader pointed out to me today that the styling of buttons on my sites was broken in the Firefox ESR version 78. I took this notice as a reason to search for the root cause, because I had already noticed the error in the Tor browser, but I always thought it was due to some security rules.

But the problem was actually this CSS selector:

::file-selector-button

This is a new pseudo-element that allows to style and customize the button in file upload input fields. I used a rule in my CSS to make that very button look like the rest of the buttons in the editor section of my blog software.

According to MDN, this selector is not supported until Firefox version 81. In unsupported browsers (Firefox ESR, Tor Browser or Internet Explorer), this selector seems to cause the CSS rules to not parse properly and end up being ignored. This was then the reason that the buttons in just those browsers did not look right and also no sans-serif font was used, because by my use of SCSS broke this rule as well.