What does @-moz-document url-prefix() do?

Solution 1:

Any CSS at-rule that starts with @-moz- is a Gecko-engine-specific rule, not a standard rule. That is, it is a Mozilla-specific extension.

The url-prefix rule applies the contained style rules to any page whose URL starts with it. When used with no URL argument like @-moz-document url-prefix() it applies to ALL pages. That's effectively a CSS hack used to only target Gecko (Mozilla Firefox). All other browsers will ignore the styles.

See here for a list of other Mozilla-specific extensions.

Solution 2:

From https://developer.mozilla.org/en/CSS/@-moz-document

       @-moz-document url(http://www.w3.org/),
                   url-prefix(http://www.w3.org/Style/),
                   domain(mozilla.org)
    {
      /* CSS rules here apply to:
         + The page "http://www.w3.org/".
         + Any page whose URL begins with "http://www.w3.org/Style/"
         + Any page whose URL's host is "mozilla.org" or ends with
           ".mozilla.org"
       */

      /* make the above-mentioned pages really ugly */
      body { color: purple; background: yellow; }
}

Solution 3:

Starting from Firefox 59 you should just use:

@document url("https://www.example.com/")

The support of -moz-prefixed version of this property have been stopped for web content, because of a bug:

https://bugzilla.mozilla.org/show_bug.cgi?id=1035091

Solution 4:

@supports (-moz-appearance:none) {...} worked for me in cases where @-moz-document url-prefix() {...} didn't.