Que fait @-moz-document url-prefix() ?

Question

Dans l'article de Simon Collison nouveau vieux Responsive Web Design Dans le CSS, il y a plusieurs déclarations comme celle-ci :

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

Qu'est-ce que cela fait réellement ? J'ai fait une recherche sur @-moz-document url-prefix() et j'ai trouvé des références pour son utilisation dans userchrome mais pas dans les feuilles de style de sites standards.

En général, une URL est passée en argument et le contenu de la déclaration est alors limité à cette URL. Cependant, sur le site de Colly, aucun argument n'est passé. Cela indiquerait que la déclaration fonctionne sur l'URL actuelle, ou tout URL, non ? Donc Est-ce que ce que nous voyons ici est un moyen de cibler les navigateurs Mozilla uniquement avec certaines règles ? ?

Answer 1

Tout at-rule CSS qui commence par @-moz- est une règle spécifique au moteur Gecko, et non une règle standard. C'est-à-dire qu'il s'agit d'une extension spécifique à Mozilla.

El url-prefix applique les règles de style contenues à toute page dont l'URL commence par ce terme. Lorsqu'elle est utilisée sans argument URL, comme @-moz-document url-prefix() il s'applique à TOUTES pages. C'est effectivement un Piratage CSS utilisé pour cibler uniquement Gecko (Mozilla Firefox). Tous les autres navigateurs ignoreront les styles.

Voir aquí pour une liste d'autres extensions spécifiques à Mozilla.

Answer 2

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

Answer 3

À partir de Firefox 59, vous devez simplement utiliser :

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

Le support de la version -moz-prefixed de cette propriété a été arrêté pour le contenu web, à cause d'un bug :

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

Answer 4

@supports (-moz-appearance:none) {...} a fonctionné pour moi dans les cas où @-moz-document url-prefix() {...} ne l'a pas fait.