Yesterday, before I put up my blog post, I decided to do a Web browser test to make sure the new post and the site as a whole looks passable on most browsers. It's something I do semi-regularly, and I usually don't run into many problems. Yesterday was different.
Otter Browser wasn't rendering <tt> elements in a monospaced font, so I explicitly set tt{font-family:monospace} in style.css. No dice. I took a look using the developer tools, and I realize that the user agent stylesheet already has it set, like it should. The problem? I didn't put it in quotes. The developers of Otter Browser didn't either, in their own stylesheet.
So, I put it in quotes myself, along with body{font-family:"sans-serif"} for the whole page. All looked well in Otter Browser, so I moved on NetSurf and the entire page was in a serifed font. NetSurf didn't like quotes, at least not for generic font families. I then put body{font-family:sans-serif} without quotes for Netsurf and tt{font-family:"monospace"} with quotes for Otter Browser. "It's not a perfect fix, but it's the best of both worlds," I thought. I was mistaken.
Netsurf was then rendering <tt> tags in the default, serifed, font. It's the exact same problem on two browsers that appeared to have opposite, mutually exclusive solutions. I just put the stylesheet back the way it was, prioritizing NetSurf. NetSurf was doing some weird, unpredictable things with the <pre> tag code blocks on that blog post. I figured I might as well make the inline code quotes look right.
But then I had an idea. I present to you, some of the most ridiculous CSS I've ever pushed to a live website.
body{font-family:"sans-serif",sans-serif}
tt{font-family:"monospace",monospace}
Before you ask: Yes, it works. There are no winners when working with Web browsers.
@lyse@lyse.isobeef.org on twtxt raised an interesting question: What does the standard say? I didn't even think about it when writing this post, so let's check.
Since I target CSS 2.1 on this website, I'll reference that specification. (emphasis mine)
In the example above, the last value is a generic family name. The following generic families are defined:
- 'serif' (e.g., Times)
- 'sans-serif' (e.g., Helvetica)
- 'cursive' (e.g., Zapf-Chancery)
- 'fantasy' (e.g., Western)
- 'monospace' (e.g., Courier)
Style sheet designers are encouraged to offer a generic font family as a last alternative. Generic font family names are keywords and must NOT be quoted.
Or, if you prefer using the latest draft:
Each <generic-family> keyword represents a generic font choice, and behaves as an alias for one or more locally-installed fonts belonging to the specified generic font category. A <generic-family> can thus be used as a reliable fallback for when an author’s more specific font choices are not available.
Authors are encouraged to append a generic font family as a last alternative for improved robustness. Note that <generic-family> keywords cannot be quoted (otherwise they are interpreted as a <family-name>).
Well, that was easy. Otter Browser is in the wrong here, but the user agent stylesheet and my original stylesheet are both compliant. However, this does mean that the solution from above is not compliant with the specification. As of 2022-05-08, I have reverted my stylesheet back to the compliant version.
Update 2022-05-08: Added the Appendix section, fixed invalid CSS.