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

Question

In Simon Collison's new old Responsive Web Design, in the CSS, there are several declarations like this:

@-moz-document url-prefix() {
  .fl { float:left; margin:12px 4px 0 0; padding:0; font-size:65px;  line-height:62%;  color:#ba1820; }
  .fs { float:left; margin:12px 4px 10px 0; padding:0; font-size:65px; line-height:62%; color:#ba1820; }
}

What does this actually do? I've googled for @-moz-document url-prefix() and have found references for its use within userchrome but not standard site stylesheets.

It usually has a URL passed in as an argument which then restricts the content of the declaration to that URL. However, on Colly's site, there is no argument being passed in. This would indicate that the declaration is operating on the current URL, or any URL, no? So is what we're seeing here a way of targeting Mozilla-only browsers with certain rules?

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.

View more solutions

Comments

[Charles Roper]

I've expanded the question a bit because I didn't get across a key point. I intuitively guessed what you put here, but was puzzled by the lack of argument being passed in. I think I figured it out, though.

[Yash Vekaria]

I have trouble in letter spacing in mozilla for specific font. (i.e prime). In chorme it renders ok but in firefox it shows little wider. so i want to reduce letter spacing in firefox but not in chrome. I can't find such moz extension for letter spacing.

[Stout Joe]

@YashVekaria It wouldn't be a moz extension, you would use the CSS property. @-moz-document url-prefix() { .your-class { letter-spacing: 2em; } }

[Adam]

@jaepage, Yes, it will not work anymore. You should use: _:-moz-tree-row(hover), .selector {}. Where .selector is your desired selector.

[Orlando]

Firefox will support @-moz-document url-prefix() (with empty url-prefix) fxsitecompat.com/en-CA/docs/2018/…

[Dave Morse]

That link now says @-moz-document url-prefix() (with empty url-prefix) "will be removed in the near future once major compatibility issues are solved." and indeed it does not seem to be working anymore.