editable style

index.html

@@ -3,6 +3,7 @@
   <li><a href="patterns/break-out-wrapper.html">break-out-wrapper.html</a></li>
   <li><a href="patterns/center-body.html">center-body.html</a></li>
   <li><a href="patterns/center-wrapper.html">center-wrapper.html</a></li>
+  <li><a href="patterns/editable-style.html">editable-style.html</a></li>
   <li><a href="patterns/fade-truncation.html">fade-truncation.html</a></li>
   <li><a href="patterns/focus-visible.html">focus-visible.html</a></li>
   <li>

patterns/editable-style.html

@@ -0,0 +1,28 @@
+<!--
+# Editable style
+
+Make your `<style>` block elements visible and editable in your browser
+
+More info: https://css-tricks.com/books/greatest-css-tricks/editable-style-blocks/
+-->
+
+<p>I'm going to display this text.</p>
+
+<style class="editable-style" contenteditable>
+  p {
+    font-size: 2em;
+    color: red;
+    border: solid dotted blue;
+  }
+</style>
+
+<style>
+  .editable-style {
+    /* User settings */
+    --font-family: monospace;
+
+    display: block;
+    font-family: var(--font-family);
+    white-space: pre;
+  }
+</style>