@-moz-document受限后，Firefox专属CSS规则实现及相关术语疑问

阿华AIGC实验室

2026-5-28

Answers to Your Firefox CSS Questions

Hey there! Let's tackle your questions now that the old @-moz-document trick is no longer working in Firefox Developer Edition (and soon stable builds).

1. What's a user stylesheet, compared to UA stylesheets?

You nailed the UA stylesheet definition—those are the default styles browsers come preloaded with, setting basics like default font sizes, paragraph margins, or link colors. They’re what make a <h1> bold and large without you writing any custom CSS.

A user stylesheet is exactly what it sounds like: a stylesheet you create and add to your browser to override both the UA styles and the styles from the websites you visit. It’s your personal way to customize how the web looks for you. For example, if you hate harsh white backgrounds on every site, you could write a user stylesheet that sets a soft dark background on all <body> elements across every page.

In Firefox, to use user stylesheets, you’ll need to:

Enable the toolkit.legacyUserProfileCustomizations.stylesheets setting in about:config
Create a chrome folder in your Firefox profile directory
Add a userContent.css file (for styling websites) or userChrome.css (for styling Firefox’s own UI, like the toolbar) with your custom rules.

2. Is there a pure CSS alternative to `@-moz-document`?

Absolutely! The go-to method now is using the @supports rule with a Firefox-specific CSS property to target only Firefox browsers. Here’s how it works:

@supports (-moz-appearance: none) {
  /* Your Firefox-only CSS rules go here */
  .some-element {
    padding: 1rem;
    border-radius: 8px;
  }
}

The @supports rule checks if the browser supports the given CSS property. Since -moz-appearance is a Firefox-only prefixed property, this block will only apply its styles in Firefox. It’s a clean, standards-compliant way to target Firefox without relying on deprecated hacks like @-moz-document.

This works for both website stylesheets and user stylesheets—so you can use it in your own site’s CSS or in your personal userContent.css file.

内容的提问来源于stack exchange，提问作者Frederick Zhang