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

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?

cssfirefoxbrowser


Solution 1:[1]

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 2:[2]

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 3:[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bella
Solution 2 Adam
Solution 3 Krisztián Balla

Related Questions