What Does @-Moz-Document Url-Prefix() Do

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

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.

what does this mean @-moz-document url-prefix()

The @-moz-document means that the following only applies to Gecko browsers.

the url-prefix() states that the following only applies when the beginning of the url matches what is passed in the url-prefix() method.

An example:

url-prefix(http://www.domain.com/page1/)

So the follow css will only apply when that beginning of the page's url begins with http://domain.com/page1/

Unknown @ rule: @-moz-document for Stylish in Firefox 61

Mozilla nuked @-moz-document rules with Firefox version 61. It's supposed to be replaced with @document^(link), but that doesn't work yet.

This needs to be addressed in Stylish. It would be best if the Import tool parses @-moz-document rules to its internal metadata and then strips the text on import, IMO.

I couldn't find anything about this new Firefox breakage in a quick search of the Stylish GitHub, so you may want to raise the issue over there.

As a temporary workaround, you can set the layout.css.moz-document.content.enabled pref to true in about:config.

That won't clear the red error X in the edit dialog, but the script will work.

Successor of @-moz-document url-prefix()

In FF V61 release channel and V59 Beta/Dev it was removed, the exception is the url-prefix() function, so your code should work, here is some info and code:

The @-moz-document rule is no longer available from Web content since
it could be used by attackers for CSS injection to steal private data
in the URL of third-party sites. Firefox users are still able to use
this rule in the user stylesheet to personalize their browsing
experience.

The at-rule support has already been removed from Nightly and early
Beta/DevEdition as of Firefox 59, and removed from all the channels
with Firefox 61.

An exception is the empty url-prefix function that has been used as a
CSS hack targeting Firefox. It continues to be parsed on the Release
channel to avoid breakages but will be removed in the near future once
major compatibility issues are solved

Source

In the current latest version (62.0.3) it still works, as you can see in this fiddle

and using your snippet:

.test{  background-color: red;}
@-moz-document url-prefix()  {  .test {    background-color: blue;  }}

<div class="test">test</div>

<style>
  .attempt {
    float:none
  }
  @-moz-document url-prefix() {
    .attempt {
      float:left
    }
  }
</style>

<div class="attempt">someText</div>