1

For Firefox's userChrome.css and userContent.css files (thus no JavaScript available), how can we detect on which operating system the Firefox web browser is running? At the least, we need to differentiate between Linux and Windows; also recognizing macOS is a bonus, but not required.

I thought there was a way to accomplish this using @media queries, but I'm not seeing a documented way to use @media at-rules to get the job done.

Please note that this only needs to work in Firefox; cross-browser functionality is not needed (and thus the cross-browser questions with answers that state there is no way are not applicable, as perhaps there is now a way to accomplish this in Firefox specifically).

BTW, several years ago you could use the following CSS code to differentiate between Linux and Windows in Firefox, but it no longer works:

/* detect Linux */
@media (min-resolution: 1dpcm) {
  *::after {
    content: "Linux";
  }
}

/* detect Windows */
@media (min-resolution: 0.001dpcm) {
  *::after {
    content: "Windows";
  }
}
Improve this question
2
  • Could you say why you neeed to know which operating system is being used? (because it can be more common to look for capabilities that are required). Commented Oct 19, 2024 at 6:26
  • @AHaworth Yes, thanks for asking, and thanks for mentioning why you are asking! We want to know which OS is being used because there are differences in how UI elements (such as menus & HTML select elements) appear in Linux vs. Windows. Commented Oct 19, 2024 at 8:15

1 Answer 1

Reset to default
1

I was able to figure out the answer by going through Firefox's source code (a big "yea" for fully open source projects!).

Here is an example of what I found:
https://searchfox.org/mozilla-esr128/source/toolkit/themes/shared/menu-shared.css

And here is a snippet from that example of Mozilla's code:

 @media (-moz-platform: linux) {
    margin-block: 0;
    margin-inline: 6px 0;
  }

  @media (-moz-platform: macos) {
    margin-inline: 22px -3px;
  }

  @media (-moz-platform: windows) {
    margin-inline-end: 1em;
  }

As you can see, in Firefox, we can use the @media (-moz-platform: [os_name]) at-rule to target specific CSS code to different operating systems. Note that for security/privacy reasons, this functionality is only available in certain contexts, but those contexts include userChrome.css and userContent.css, so this is perfect.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Would the anonymous downvoter who didn't leave any comment like to be helpful and explain how this answer can be improved?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.