css selector question

[pihentagy]

Hi all!

I have a question about css selectors:

I like serif fonts, so I'd started to write a custom style which changes every fonts on every webpage to serif.

However there are some exceptions, notably:

• code blocks
• icon fonts

I can override all fonts like this:

body :not(code):not(pre) {font-family: serif !important;}

but what should really there is to set font to serif for all places except pre and code tags and all descendants. So how can I "not touch" those pre and code tags and their children?

Thanks

[vednoc]

I'd started to write a custom style which changes every fonts on every webpage to serif

Since I also prefer serif fonts, I made the following userstyle for my own use. It uses Stylus-lang preprocessor in order for code to be more documented, extendable, and maintainable in the long run.

/* ==UserStyle==
@name           Global serif font
@namespace      www
@version        1.0.0
@description    Apply your favorite serif font globally.
@author         vednoc
@preprocessor   stylus
@var text font  'Serif font' '"your favorite serif font"'
==/UserStyle== */

@-moz-document regexp("https?://.*") {
    i = !important

    // Exclude default code areas.
    n ?= ':not(code):not(pre):not(pre > span):not(code > span)'

    // Exclude icon fonts.
    n += ':not([class^="fa"]):not(.i)'

    // Exclude code areas on GitHub.
    n += ':not([class^="blob-"]):not([class^="blob-"] > span)'

    // Exclude code areas on GitLab.
    n += ':not(.diff-line-num):not(pre > code > span span)'

    // Exclude utility classes for fonts.
    n += ':not(.monospace):not(.text-mono)'

    // Generate.
    { n } {
        font-family: font, serif i
    }
}

For more information, check wiki pages on how to install it and then customize it if you've never used UserCSS format until now.

So how can I "not touch" those pre and code tags and their children?

As far as I know, this is the only way to do it.

:not(pre):not(pre *):not(code):not(code *) { ... }

[vednoc]

Not at the moment, but I could make a repository for it. As for excluding input areas, that could be done conditionally thanks to Stylus-lang, so that we can have both.

[pihentagy]

Unfortunately the gitlab part seems not to work for me on gitlab-ce-13.10.3 nor on gitlab.com, say for eg. here: https://gitlab.com/herecura/packages/vivaldi-snapshot/-/commit/84ae3caf69cd5c6b0fad8a627ba333b3c7fc6cb5

[vednoc]

GitLab can be quite inconsistent with their styles. I fixed that and added a few more things. Also, I just made a repository, so feel free to report issues here: https://github.com/vednoc/custom-fonts

[pihentagy]

A million thanks!

[krystian3w]

https://caniuse.com/css-not-sel-list

:not(pre, pre *, code, code *) { ... }

[myfonj]

I see I'm late to the party, and this note may be somewhat tangential, but do you know that our browsers are practically obliged to have pref for this?

In Firefox, Settings > Accessibility > Fonts > Advanced lets us change your default font families for three main types (per script type), and lets us uncheck the Allow pages to choose their own fonts, instead of your selections above toggle. If you put same font family for Serif and Sans-serif (for Latin and other script types you normally consume and pick you favourite Monospace), then you are set. Nice perk in this case is that most widespread icon fonts are not affected by this (*).

So in this case there is no "external" tool necessary for your specific need, and it is covered in the best possible way: when page author orders something to use the monospace font-family, then you'll see your preferred monospace. In all other cases you'll see your favourite Serif, unless it is come character and "blessed" icon font combination.

In Chromium, somewhat unsurprisingly, things are not that easy. While you still can change your defaults (through chrome://settings/fonts), there is no dedicated "use these fonts only" toggle. To enforce these prefs, Stylus may come in handy, but not in such bulletproof way as in the previous case, so the Vendoc's or similar approach will be needed. Simple naïve form could be a single "affect all" rule that reverts every author's font-family declaration back to browser default; basically

* { font-family: revert }

but with boosted specificity, whitelist for icon fonts (if really needed) and "fixes" of unsuitable UA style's "defaults".

In a (literal) mock-up form:

*:not(
  #just#boosting#specificity#and#yearning#for#true#userstyles#la#la#la, /* (Self-explanatory.) */
  .some, .whitelist, .for, [class*="icon"], .fonts, .like, [class|="fa"] /* (Dtto.) */
){
    &, &::before, &::after {
      font-family: revert !important;
      /* Use what our default UA style orders - so in effect our prefs for most tags. */
    }
    &:is(
      input, textarea,  pre *, code *,
      [class|="CodeBlob"] * /* GH*/, [class*="code" i] * /* Or even broader? */
      /* Etc etc. */
      /* Thingies other than PRE we'd like to have monospaced but UA style has them proportional. */
    ) {
        font-family: monospace !important;
    }
}

This is functionally close to Vendoc's style, minus sophisticated whitelist and granular settings for weights, but leaning on browser settings instead of style prefs.

---

* This always was, FMPoV, a bit controversial decision, but now I see better it makes sense in some scenarios. Technically it works in a way that any font with a specific internal name (currently Material Icons [Extended | Outlined | Round | Sharp | Two Tone]? | Google Material Icons [Filled] | Material Symbols [Outlined | Round | Rounded | Sharp] | Google Symbols | FontAwesome) bypasses the "block".