firefox 如何决定使用哪些@-moz-document 规则？答案

【问题标题】：How does firefox decide which @-moz-document rules to use?firefox 如何决定使用哪些@-moz-document 规则？
【发布时间】：2014-07-23 20:32:59
【问题描述】：

我为在 Fedora 19 上运行的 Firefox 26 创建了一个自定义 userContent.css 文件。

我试图找出@-moz-document 规则的优先顺序。

我想做的是为社区页面设置一组规则，并为网站上的所有其他页面设置另一组规则。

我试过了……

@-moz-document   
    url-prefix(https://discussions.apple.com/community/) 
{/* rules for this page */}


@-moz-document  
    domain(discussions.apple.com) 
{ /* different rules  for all other pages in domain. */}

我发现我的 url-prefix 规则被忽略了。

【问题讨论】：

标签： css firefox

【解决方案1】：

好吧，如果您在两个规则中具有相同的属性，那么后者将覆盖前者，因为当所有事物都被认为相等时，CSS 会从上到下应用规则，所以由于 https://discussions.apple.com/community/ 也匹配 Discussions.apple.com后者的规则将适用，如果您愿意，您可以交换订单，这应该会有所帮助。

【讨论】：

我确实有多个 @-moz-document url-prefix 用于不同的页面。它变得有点乱了。我希望简化事情。您认为 userContent.css 文件中的重复规则是个好主意吗？从长远来看，它会造成更多的混乱吗？
万一它不符合您的特定规则，它完全可以作为一个包罗万象，只要确保考虑到排序，保持你广泛的基本风格在顶部，然后瞄准下面的小派系，因为任何事情下面将覆盖上面的内容。

【解决方案2】：

/*

  Where to place a new css tag?

  Find the conditional code, "the if statements".
  The conditional code starts with @.     

  In some ways, you can think that all the css rules 
  are applied that in parallel. 

  In the case you add a new rule with with an attribute that you haven't used
  before, the rule can be place anywhere in the conditional block that applies.  
  In case of conflicting attributes, the last 
  seen attribute is used.  

*/

/* if the domain of the web page is any of these,
    apply the css below, between the matching {}. */
@-moz-document  
  domain(discussions.apple.com),
  domain(communities.apple.com),
  domain(discussionsjapan.apple.com),  
  domain(discussionskorea.apple.com)  
{  

   ... lots of css ...

   /* for pages from all devices and the width of the page
       is larger than 1265px, apply the css. 
       Remember, we are inside of the @-moz-document conditional. 
       So the @media rule, only see pages that of passed @-moz-document 
       conditional. */
   @media all and (min-width: 1265px) 
   {   
     /* styles for a large browser window  */

     ... lots of css ...

   }

   /* for pages from all devices and the width of the page
      is less than or equal to 1265px, apply the css. */
   @media all and (max-width: 1265px) 
   {                                             
      /* styles for narrow browsers window  */

       ... lots of css ...

    }  

} /* end of @-moz-document */ 


/* another conditional.  The style rules will be applied
   to any page with an URL starting with. Note, this 
   @-moz-document rules is applied separately from the 
   prior @-moz-document conditional. */
@-moz-document  
  url-prefix(https://discussions.apple.com/people/),
  url-prefix(https://discussions.apple.com/welcome),
  url-prefix(https://discussionsjapan.apple.com/people/),  
  url-prefix(https://discussionsjapan.apple.com/welcome/),
  url-prefix(https://discussionskorea.apple.com/people/),
  url-prefix(https://discussionskorea.apple.com/welcome/)    
    {
      /* These rules get applied on the pages that match. 
         Remember, the last setting of the attribute wins. */
      ... lots of css ...
    }  /* end of @-moz-document */

【讨论】：