{"id":123,"date":"2006-10-26T11:45:11","date_gmt":"2006-10-26T11:45:11","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2006\/10\/cascade2"},"modified":"2006-12-14T00:02:17","modified_gmt":"2006-12-14T00:02:17","slug":"cascade2","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2006\/10\/cascade2","title":{"rendered":"The Cascade: Part 2 (Finally!)"},"content":{"rendered":"

Exactly one year ago from this day, I published part\r\n\t\t1<\/a> in a series of articles about\r\n\tCSS cascading and inheritance. However, due to various factors (mostly laziness),\r\n\tthe sequel never got published\u2026 Until now! Today, I\u2019m going to take a break\r\n\t\tfrom the XBL series of articles (which will<\/em> resume in a day or so) and\r\n\t\tfinally publish the long awaited conclusion to this series. If you haven\u2019t\r\n\t\tread part 1 (or even if did a long time ago), I suggest you do so now\r\n\t\tbefore continuing.<\/p>\r\n

Following on from the first article in which we looked at how to find all\r\n\tthe style declarations that applied to each element, we\u2019re going to show how\r\n\tthese are sorted by order of precedence, to determine which ones are applied\r\n\tto the element.<\/p>\r\n\r\n

Sorting<\/h3>\r\n

Steps 2, 3 and 4 of the algorithm deal with sorting the declarations into\r\n\tthe order of precedence. From the exercise in the part 1, we were left with\r\n\t4 rule sets which applied to the p element in the sample document. For the\r\n\tpurpose of this exercise, I\u2019m just going to add a few more declarations and\r\n\tannotate them with their origin.<\/p>\r\n\r\n

p { margin: 1em 0; } \/* User Agent *\/\r\n* { background: blue none !important; color: white !important; } \/* User *\/\r\nP { text-indent: 1em; text-align: left; } \/* User *\/\r\np { text-align: justify; } \/* User *\/\r\n#content p { margin: .8em 0; line-height: 1.2; text-indent: 0 !important; } \/* Author *\/\r\np { line-height: 1.4; } \/* Author *\/<\/code><\/pre>\r\n\r\n
Step 2<\/h4>\r\n
Step 2 of the cascade says to sort the rules according to importance and origin. \r\n\tThe following is the\r\n\torder of precedence specified in CSS 2.1<\/a>.<\/p>\r\n
    \r\n\t
  1. user agent declarations<\/li>\r\n\t
  2. user normal declarations<\/li>\r\n\t
  3. author normal declarations<\/li>\r\n\t
  4. author important declarations<\/li>\r\n\t
  5. user important declarations<\/li>\r\n<\/ol>\r\n
    If we discard the selectors for now (they\u2019ll be need again in step\r\n\t\t3<\/a> below), we\u2019re\r\n\tleft with a list of declarations.  A declaration is a property and its associated\r\n\tvalue.  We can then proceed to sort them into the order specified.<\/p>\r\n
      \r\n\t
    1. User Agent Declarations\r\n\t\t
        \r\n\t\t\t
      1. margin: 1em 0;<\/code><\/li>\r\n\t\t<\/ol>\r\n\t<\/li>\r\n\t
      2. User Normal Declarations\r\n\t\t
          \r\n\t\t\t
        1. text-indent: 1em;<\/code><\/li>\r\n\t\t\t
        2. text-align: left;<\/code><\/li>\r\n\t\t\t
        3. text-align: justify;<\/code><\/li>\r\n\t\t<\/ol>\r\n\t\t<\/li>\r\n\t
        4. Author Normal Declarations\r\n\t\t
            \r\n\t\t\t
          1. margin: .8em 0;<\/code><\/li>\r\n\t\t\t
          2. line-height: 1.2;<\/code><\/li>\r\n\t\t\t
          3. line-height: 1.4;<\/code><\/li>\r\n\t\t<\/ol>\r\n\t\t<\/li>\r\n\t
          4. Author Important Declarations\r\n\t\t
              \r\n\t\t\t
            1. text-indent: 0 !important;<\/code><\/li>\r\n\t\t<\/ol>\r\n\t<\/li>\r\n\t
            2. User Important Declarations\r\n\t\t
                \r\n\t\t\t
              1. background: blue none !important;<\/code><\/li>\r\n\t\t\t
              2. color: white !important;<\/code><\/li>\r\n\t\t<\/ol>\r\n\t<\/li>\r\n<\/ol>\r\n\r\n
                Step 3<\/h4>\r\n
                Step 3 of the cascade then says to sort the rules with the same importance\r\n\tand origin by the specificity of the selector.  The details of calculating\r\n\tthe specificity<\/a> is out of scope for this article, but it has been covered by others. \r\n\tSee Andy Clarke\u2019s Specificity\r\n\tWars<\/a> and Molly Holzschlag\u2019s CSS2\r\n\tand CSS2.1 Specificity Clarified<\/a>.<\/p>\r\n
                This step is important for cases where two declarations for the same property\r\n\thave the same importance and origin.  In this example, this occurs for both\r\n\tuser normal declarations<\/a> (two text-align declarations) and author\r\n\tnormal declarations<\/a>\t(two line-height declarations).<\/p>\r\n
                For the user normal declarations<\/a>, these are the rule sets involved:<\/p>\r\n\r\n
                p { text-indent: 1em; text-align: left; } \/* User *\/\r\np { text-align: justify; } \/* User *\/<\/code><\/pre>\r\n\r\n
                As you can see, both have the same selector (p<\/code>), which has a specificy of\r\n\t0,0,1.  So, sorting by specificity in this case makes no difference.  However,\r\n\tfor the author normal declarations<\/a>, these are the rule sets involved:<\/p>\r\n\r\n
                p { line-height: 1.4; } \/* Author *\/\r\n#content p { margin: .8em 0; line-height: 1.2; text-indent: 0 !important; } \/* Author *\/<\/code><\/pre>\r\n\r\n
                These 2 rule sets each use different selectors which have different specificity. \r\n\tThe selector #content p has a specificity of 101.  The selector p has a specificity\r\n\tof 0,0,1.  Since 1,0,1 is a higher specificity than 0,0,1, the former takes\r\n\tprecedence.  So the order of author normal\r\n\tdeclarations<\/a> is changed to the following:<\/p>\r\n
                  \r\n\t
                1. margin: .8em 0;<\/code><\/li>\r\n\t
                2. line-height: 1.4;<\/code><\/li>\r\n\t
                3. line-height: 1.2;<\/code><\/li>\r\n<\/ol>\r\n\r\n
                  Step 4<\/h4>\r\n
                  The forth and final step of the sorting process involves sorting declarations\r\n\twhich have the same importance, origin and specificity by the order they are\r\n\tspecified in the CSS.  This is where the order of the user\r\n\tnormal declarations<\/a>\tfrom step 3<\/a> is resolved.  In this example, given that I listed the declarations\r\n\tin the order in which they appeared, no change needs to be made to the above\r\n\tlist.<\/p>\r\n
                  In cases where there is more than one declaration for a property, the latter\r\n\tdeclaration overwrites the former, which is effectively discarded.  This leaves\r\n\tthe following list of declarations to be applied to element.<\/p>\r\n
                    \r\n\t
                  1. text-align: justify;<\/code><\/li>\r\n\t
                  2. margin: .8em 0;<\/code><\/li>\r\n\t
                  3. line-height: 1.4;<\/code><\/li>\r\n\t
                  4. text-indent: 0;<\/code><\/li>\r\n\t
                  5. background: blue none;<\/code><\/li>\r\n\t
                  6. color: white;<\/code><\/li>\r\n<\/ol>\r\n\r\n
                    This concludes the series about the cascade, but the related issue of inheritence\r\n\tstill needs to be addressed and I intend to do so at some point in the future.\r\n   However, I don’t expect that it will take another year before I do\u2026 But who\r\n\tknows? \ud83d\ude42<\/p>\r\n","protected":false},"excerpt":{"rendered":"The long awaited conclusion to my previous article, from last year: The Cascade: Part 1!","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[7,3],"tags":[],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/123"}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=123"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/123\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}