Merge pull request mdn#77 from estelle/cascade

dipikabh · web-flow · commit 73d48267adb9 · 2022-06-22T15:36:06.000+02:00
Minor: updates specificity weights to reflect updated tutorial. Add cascade file
diff --git a/learn/cascade/cascade-layers.html b/learn/cascade/cascade-layers.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>cascade layers demo</title>
+    <link rel="stylesheet" href="../styles.css">
+    <style>
+        
+    </style>
+
+    <style class="editable">
+@layer firstLayer, secondLayer;
+
+p { /* 0-0-1 */
+  background-color: red;
+  color: grey !important;
+  border: 5px inset purple;
+  margin: 15px;
+}
+p#addSpecificity { /* 1-0-1 */
+  border-style: solid !important;
+}
+
+@layer firstLayer {
+  #addSpecificity { /* 1-0-0 */
+    background-color: blue;
+    color: white !important;
+    border-width: 5px;
+    border-style: dashed !important;
+  }
+}
+
+@layer secondLayer {
+  p#addSpecificity { /* 1-0-1 */
+    background-color: green;
+    color: orange !important;
+    border-width: 10px;
+    border-style: dotted !important;
+  }
+}
+
+    </style>
+</head>
+
+<body>
+  <section class="preview">
+        <p id="addSpecificity">
+          A paragraph with a border and background
+        </p>
+  </section>
+
+    <textarea class="playable playable-css" style="height: 280px;">
+@layer firstLayer, secondLayer;
+
+p { /* 0-0-1 */
+  background-color: red;
+  color: grey !important;
+  border: 5px inset purple;
+}
+p#addSpecificity { /* 1-0-1 */
+  border-style: solid !important;
+}
+
+@layer firstLayer {
+  #addSpecificity { /* 1-0-0 */
+    background-color: blue;
+    color: white !important;
+    border-width: 5px;
+    border-style: dashed !important;
+  }
+}
+
+@layer secondLayer {
+  p#addSpecificity { /* 1-0-1 */
+    background-color: green;
+    color: orange !important;
+    border-width: 10px;
+    border-style: dotted !important;
+  }
+}     
+    </textarea>
+
+    <textarea class="playable playable-html" style="height: 140px;">
+<p id="addSpecificity">
+  A paragraph with a border and background
+</p>
+    </textarea>
+
+    <div class="playable-buttons">
+        <input id="reset" type="button" value="Reset">
+    </div>
+</body>
+<script src="../playable.js"></script>
+
+</html>
diff --git a/learn/cascade/specificity-boxes.html b/learn/cascade/specificity-boxes.html
@@ -10,37 +10,37 @@
     </style>
 
     <style class="editable">
-/* specificity: 0101 */
+/* 1. specificity: 1-0-1 */
 #outer a {
   background-color: red;
 }
 
-/* specificity: 0201 */
+/* 2. specificity: 2-0-1 */
 #outer #inner a {
   background-color: blue;
 }
 
-/* specificity: 0104 */
+/* 3. specificity: 1-0-4 */
 #outer div ul li a {
   color: yellow;
 }
 
-/* specificity: 0113 */
+/* 4. specificity: 1-1-3 */
 #outer div ul .nav a {
   color: white;
 }
 
-/* specificity: 0024 */
+/* 5. specificity: 0-2-4 */
 div div li:nth-child(2) a:hover {
   border: 10px solid black;
 }
 
-/* specificity: 0023 */
+/* 6. specificity: 0-2-3 */
 div li:nth-child(2) a:hover {
   border: 10px dashed black;
 }
 
-/* specificity: 0033 */
+/* 7. specificity: 0-3-3 */
 div div .nav:nth-child(2) a:hover {
   border: 10px double black;
 }
@@ -81,37 +81,37 @@
 
     <textarea class="playable playable-css" style="height: 280px;">
 
-/* specificity: 0101 */
+/* 1. specificity: 1-0-1 */
 #outer a {
     background-color: red;
 }
         
-/* specificity: 0201 */
+/* 2. specificity: 2-0-1 */
 #outer #inner a {
     background-color: blue;
 }
 
-/* specificity: 0104 */
+/* 3. specificity: 1-0-4 */
 #outer div ul li a {
     color: yellow;
 }
 
-/* specificity: 0113 */
+/* 4. specificity: 1-1-3 */
 #outer div ul .nav a {
     color: white;
 }
 
-/* specificity: 0024 */
+/* 5. specificity: 0-2-4 */
 div div li:nth-child(2) a:hover {
     border: 10px solid black;
 }
 
-/* specificity: 0023 */
+/* 6. specificity: 0-2-3 */
 div li:nth-child(2) a:hover {
     border: 10px dashed black;
 }
 
-/* specificity: 0033 */
+/* 7. specificity: 0-3-3 */
 div div .nav:nth-child(2) a:hover {
     border: 10px double black;
 }
diff --git a/learn/tasks/cascade/cascade.html b/learn/tasks/cascade/cascade.html
@@ -10,15 +10,25 @@
     </style>
 
     <style class="editable">
-    #outer div ul .nav a {
-      background-color: yellow;
-      padding: 5px;
-      display: inline-block;
-      margin-bottom: 10px;
-    }
+    @layer yellow, purple, green;
 
-    div div li a {
-      color: rebeccapurple;
+    @layer yellow {
+      #outer div ul .nav a {
+        background-color: yellow;
+        padding: 5px;
+        display: inline-block;
+        margin-bottom: 10px;
+      }
+    }
+    @layer purple {
+      div div li a {
+        color: rebeccapurple;
+      }
+    }
+    @layer green {
+      a {
+        color: lightgreen;
+      }
     }
     </style>
 </head>
@@ -34,18 +44,27 @@
         </div>
       </div>
     </section>
+    <textarea class="playable playable-css" style="height: 400px;">
+      @layer yellow, purple, green;
 
-    <textarea class="playable playable-css" style="height: 250px;">
-#outer div ul .nav a {
-  background-color: yellow;
-  padding: 5px;
-  display: inline-block;
-  margin-bottom: 10px;
-}
-
-div div li a {
-  color: rebeccapurple;
-}               
+      @layer yellow {
+        #outer div ul .nav a {
+          background-color: yellow;
+          padding: 5px;
+          display: inline-block;
+          margin-bottom: 10px;
+        }
+      }
+      @layer purple {
+        div div li a {
+          color: rebeccapurple;
+        }
+      }
+      @layer green {
+        a {
+          color: lightgreen;
+        }
+      }               
     </textarea>
 
     <textarea class="playable playable-html" style="height: 170px;">

Original file line number	Diff line number	Diff line change
`@@ -10,37 +10,37 @@`
`10`	`10`	`</style>`
`11`	`11`
`12`	`12`	`<style class="editable">`
`13`		`-/* specificity: 0101 */`
	`13`	`+/* 1. specificity: 1-0-1 */`
`14`	`14`	`#outer a {`
`15`	`15`	`background-color: red;`
`16`	`16`	`}`
`17`	`17`
`18`		`-/* specificity: 0201 */`
	`18`	`+/* 2. specificity: 2-0-1 */`
`19`	`19`	`#outer #inner a {`
`20`	`20`	`background-color: blue;`
`21`	`21`	`}`
`22`	`22`
`23`		`-/* specificity: 0104 */`
	`23`	`+/* 3. specificity: 1-0-4 */`
`24`	`24`	`#outer div ul li a {`
`25`	`25`	`color: yellow;`
`26`	`26`	`}`
`27`	`27`
`28`		`-/* specificity: 0113 */`
	`28`	`+/* 4. specificity: 1-1-3 */`
`29`	`29`	`#outer div ul .nav a {`
`30`	`30`	`color: white;`
`31`	`31`	`}`
`32`	`32`
`33`		`-/* specificity: 0024 */`
	`33`	`+/* 5. specificity: 0-2-4 */`
`34`	`34`	`div div li:nth-child(2) a:hover {`
`35`	`35`	`border: 10px solid black;`
`36`	`36`	`}`
`37`	`37`
`38`		`-/* specificity: 0023 */`
	`38`	`+/* 6. specificity: 0-2-3 */`
`39`	`39`	`div li:nth-child(2) a:hover {`
`40`	`40`	`border: 10px dashed black;`
`41`	`41`	`}`
`42`	`42`
`43`		`-/* specificity: 0033 */`
	`43`	`+/* 7. specificity: 0-3-3 */`
`44`	`44`	`div div .nav:nth-child(2) a:hover {`
`45`	`45`	`border: 10px double black;`
`46`	`46`	`}`
`@@ -81,37 +81,37 @@`
`81`	`81`
`82`	`82`	`<textarea class="playable playable-css" style="height: 280px;">`
`83`	`83`
`84`		`-/* specificity: 0101 */`
	`84`	`+/* 1. specificity: 1-0-1 */`
`85`	`85`	`#outer a {`
`86`	`86`	`background-color: red;`
`87`	`87`	`}`
`88`	`88`
`89`		`-/* specificity: 0201 */`
	`89`	`+/* 2. specificity: 2-0-1 */`
`90`	`90`	`#outer #inner a {`
`91`	`91`	`background-color: blue;`
`92`	`92`	`}`
`93`	`93`
`94`		`-/* specificity: 0104 */`
	`94`	`+/* 3. specificity: 1-0-4 */`
`95`	`95`	`#outer div ul li a {`
`96`	`96`	`color: yellow;`
`97`	`97`	`}`
`98`	`98`
`99`		`-/* specificity: 0113 */`
	`99`	`+/* 4. specificity: 1-1-3 */`
`100`	`100`	`#outer div ul .nav a {`
`101`	`101`	`color: white;`
`102`	`102`	`}`
`103`	`103`
`104`		`-/* specificity: 0024 */`
	`104`	`+/* 5. specificity: 0-2-4 */`
`105`	`105`	`div div li:nth-child(2) a:hover {`
`106`	`106`	`border: 10px solid black;`
`107`	`107`	`}`
`108`	`108`
`109`		`-/* specificity: 0023 */`
	`109`	`+/* 6. specificity: 0-2-3 */`
`110`	`110`	`div li:nth-child(2) a:hover {`
`111`	`111`	`border: 10px dashed black;`
`112`	`112`	`}`
`113`	`113`
`114`		`-/* specificity: 0033 */`
	`114`	`+/* 7. specificity: 0-3-3 */`
`115`	`115`	`div div .nav:nth-child(2) a:hover {`
`116`	`116`	`border: 10px double black;`
`117`	`117`	`}`