1

I'm using Firefox 72 on FreeBSD and configure some style in userChrome.css. This works fine. As an example, I can make the label of the "File" menu in the menu bar red with

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#file-menu {
   color: red !important;
}

Now I heard of the new-fangled (not so much anymore, it would seem) CSS variable, aka CSS property --*, and tried to use them. Alas, I must be missing something because this:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
:root {
   --foo: red;
}
#file-menu {
   color: var(--foo) !important;
}

leaves "File" at the default color, black. Should this work? Am I missing something? After some searching I found that in about:config the value for toolkit.legacyUserProfileCustomizations.stylesheets should be true, which it is. Now I'm out of ideas.

brandizzi
  • 26,083
  • 8
  • 103
  • 158
Jens
  • 69,818
  • 15
  • 125
  • 179
  • and if you try like this `#file-menu { --foo:red;color: var(--foo) !important; }` ? maybe there is an issue with the root selector. I know it's useless but to identify the *root* problem – Temani Afif Jan 05 '20 at 22:38
  • @TemaniAfif Interestingly, your suggestion *does* work! So it seems to be in fact a problem with the scope of `:root`. – Jens Jan 06 '20 at 09:32
  • then try `html {--foo:red}`, technically it's the same as using `:root`. Maybe for some reason you don't have to use `:root` – Temani Afif Jan 06 '20 at 09:34
  • 1
    Using `html` has the same problem. In my desperation I removed the `@namespace` line, and then everything works! With either `:root` or `html`. The default `userChrome.css` file always warned not to remove it. Looks like this has changed over time. – Jens Jan 06 '20 at 09:50

1 Answers1

1

The problem was the @namespace line. After deleting it, the CSS variables work.

Jens
  • 69,818
  • 15
  • 125
  • 179
  • yeah, this is something new in FF 72 -- that @namespace line had to be there before that -- no need to downvote the question, it is legit. – scrat.squirrel Jan 11 '20 at 16:39