104

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?

4 Answers 4

120

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.

3
  • 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. Commented Jun 27, 2010 at 8:42
  • 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. Commented Jul 6, 2015 at 5:56
  • 2
    @YashVekaria It wouldn't be a moz extension, you would use the CSS property. @-moz-document url-prefix() { .your-class { letter-spacing: 2em; } }
    – Stout Joe
    Commented Jun 3, 2016 at 15:12
18

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; }
}
5

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

4
  • @jaepage, Yes, it will not work anymore. You should use: _:-moz-tree-row(hover), .selector {}. Where .selector is your desired selector.
    – Adam
    Commented Jan 24, 2018 at 22:18
  • 4
    Firefox will support @-moz-document url-prefix() (with empty url-prefix) fxsitecompat.com/en-CA/docs/2018/…
    – Orlando
    Commented Apr 27, 2018 at 20:04
  • 4
    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.
    – Dave Morse
    Commented Sep 26, 2018 at 9:16
  • @DaveMorse for me is working
    – Robert
    Commented Aug 28 at 15:08
5

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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.