@ -moz-document url-prefix（）は何をしますか？

SimonCollisonの新しい 古いレスポンシブWebデザインのCSSには、次のような宣言がいくつかあります。

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

これは実際に何をしますか？@ -moz-document url-prefix（）をグーグルで検索し、userchrome内で使用するための参照を見つけましたが、標準のサイトスタイルシートではありません。

通常、引数として渡されたURLがあり、宣言の内容をそのURLに制限します。ただし、Collyのサイトでは、渡される引数はありません。これは、宣言が現在のURLまたは任意のURLで機能していることを示します。それで、ここで私たちが見ているのは、特定のルールでMozillaのみのブラウザをターゲットにする方法ですか？

で始まるCSSat-rule@-moz-は、Geckoエンジン固有のルールであり、標準のルールではありません。つまり、Mozilla固有の拡張機能です。

このurl-prefixルールは、含まれているスタイルルールをURLがそれで始まるすべてのページに適用します。すべてのページ@-moz-document url-prefix()に適用されるように、URL引数なしで使用した場合。これは事実上、Gecko（Mozilla Firefox）のみをターゲットにするために使用されるCSSハックです。他のすべてのブラウザはスタイルを無視します。

その他のMozilla固有の拡張機能のリストについては、ここを参照してください。

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

Firefox 59以降では、次のものを使用する必要があります。

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

このプロパティの-mozプレフィックスバージョンのサポートは、バグのためにWebコンテンツで停止されました。

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

@supports (-moz-appearance:none) {...}うまく@-moz-document url-prefix() {...}いかなかった場合に私のために働いた。