Firefox Bug in :focus-visible

Now that Firefox supports the :focus-visible pseudo-class in its latest version (85), I've decided to start using the The Paciello Group's :focus-visible fallback hack in order to be backwards compatible with older browsers and those few that still don't support it (or never will). The hack works exactly as expected and I've been very pleased with the results. But I have discovered that not all :focus-visible implementations are the same. In particular, I've stumbled upon one annoying bug in Firefox's implementation I'd like to complain about.

You Should Know How to Manually Increase the Text Size Only

Every web developer should know how to manually increase the text size only on a web page, and should be continuously testing for text size responsiveness throughout the development process.

Responsive Design is More Than Viewport Width

TLDR

You should always test your projects for responsiveness to text size increases to at least a minimum of 200%, and at a variety of different viewport widths.

Respect the End User

Apparently this platform has been around for a while and it shows. So I'm going to spend some time trying to make it a little more responsive and accessible. Not sure how far I can get but I've discovered that I can get access to the underlying HTML and seem to be able to add my own custom CSS. I've already done away with the silly 700px width on the main content div and I am now in the process of converting all the other height/width properties currently set in px to em units. Then I'll add some CSS media query break points to deal with narrow view ports and increased text sizes.

All this work to fix up Blogger leads me to one of the main points I'll be emphasizing on this blog:

Respect the End-User's Preferences and Cater to Their Needs

Don't assume you know what font size the user needs to be able to read your content. Don't assume you know how many pixels the user has available to display your page. Don't assume you know what device they are using to interact with your application. Don't put unnecessary restrictions on the user's experience. Design your work of art from the beginning so it is flexible enough to handle anything the user can throw at it. 

More to follow as I dig deeper into this simple Blogger template to bring it up to modern day standards.