CODEWITHSUNDEEP
cssfirefox
historystamp
historystamp

Reputation: 1478

How does firefox decide which @-moz-document rules to use?

I've created a custom userContent.css file for Firefox 26 running on Fedora 19.

I trying to figure out the precedence order to @-moz-document rules.

What I would like to do is to have a set of rules for the community pages and another set if rules for all other pages on the site.

I tried...

@-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. */}

What I found was that my url-prefix rules were ignored.

Upvotes: 0

Views: 895

Answers (2)

historystamp
historystamp

Reputation: 1478

/*

  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 */

Upvotes: 0

Wobbles
Wobbles

Reputation: 3135

Well if you have identical attributes in both rules, then the latter are going to overwrite the former because CSS when all thing are considered equal applies rules from top to bottom, so since https://discussions.apple.com/community/ also matches discussions.apple.com the rules from the latter will apply, if you want you can swap the order and this should help.

Upvotes: 2

Related Questions