From 82dc5e69fa9b5db32c794dbeb794df5a0e0ac007 Mon Sep 17 00:00:00 2001
From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com>
Date: Mon, 9 Sep 2024 15:19:54 +0530
Subject: [PATCH] use new syntax for CSS color function values (#196)

use new syntax for css color function values
---
 assets/styles.css                                    | 10 +++++-----
 backdrop/styles.css                                  | 10 +++++-----
 box-alignment/flexbox/auto-margins.html              |  4 ++--
 box-alignment/flexbox/gap.html                       |  4 ++--
 box-alignment/overview/flex-align-items.html         |  4 ++--
 box-alignment/overview/grid-align-items.html         |  4 ++--
 box-alignment/overview/grid-gap.html                 |  4 ++--
 css-cookbook/center--download.html                   |  4 ++--
 css-cookbook/center.html                             |  4 ++--
 css-cookbook/columns-flexbox--download.html          |  4 ++--
 css-cookbook/columns-flexbox-wrapping--download.html |  4 ++--
 css-cookbook/columns-flexbox-wrapping.html           |  4 ++--
 css-cookbook/columns-flexbox.html                    |  4 ++--
 css-cookbook/columns-grid--download.html             |  4 ++--
 css-cookbook/columns-grid.html                       |  4 ++--
 css-cookbook/columns-multicol--download.html         |  4 ++--
 css-cookbook/columns-multicol.html                   |  6 +++---
 css-cookbook/grid-wrapper--download.html             |  2 +-
 css-cookbook/grid-wrapper.html                       |  2 +-
 css-cookbook/sticky-footer--download.html            |  2 +-
 css-cookbook/sticky-footer-flexbox--download.html    |  2 +-
 css-cookbook/sticky-footer-flexbox.html              |  2 +-
 css-cookbook/sticky-footer.html                      |  2 +-
 css-cookbook/styles.css                              | 10 +++++-----
 css-text/styles.css                                  | 10 +++++-----
 display/multi-keyword/inline-flex.html               |  2 +-
 display/multi-keyword/multi-keyword-flex.html        |  2 +-
 editable-samples-2/pages/border-top-color/index.html |  2 +-
 feature-queries/step1.html                           |  4 ++--
 feature-queries/step2.html                           |  4 ++--
 feature-queries/step3.html                           |  4 ++--
 feature-queries/step4.html                           |  4 ++--
 flexbox/alignment/align-content-column.html          |  4 ++--
 flexbox/alignment/align-content.html                 |  4 ++--
 flexbox/alignment/align-items.html                   |  4 ++--
 flexbox/alignment/align-self-column.html             |  4 ++--
 flexbox/alignment/align-self.html                    |  4 ++--
 flexbox/alignment/auto-margins.html                  |  4 ++--
 flexbox/alignment/intro.html                         |  4 ++--
 flexbox/alignment/justify-content-column.html        |  4 ++--
 flexbox/alignment/justify-content-reverse.html       |  4 ++--
 flexbox/alignment/justify-content-writing-mode.html  |  4 ++--
 flexbox/alignment/justify-content.html               |  4 ++--
 flexbox/basics/align-items.html                      |  4 ++--
 flexbox/basics/flex-direction.html                   |  4 ++--
 flexbox/basics/flex-flow.html                        |  4 ++--
 flexbox/basics/flex-properties.html                  |  4 ++--
 flexbox/basics/flex-shorthands.html                  |  4 ++--
 flexbox/basics/flex-wrap.html                        |  4 ++--
 flexbox/basics/justify-content.html                  |  4 ++--
 flexbox/basics/simple-example-anon.html              |  4 ++--
 flexbox/basics/simple-example.html                   |  4 ++--
 flexbox/basics/the-flex-container.html               |  4 ++--
 flexbox/browsers/float.html                          |  4 ++--
 flexbox/browsers/inline-block.html                   |  4 ++--
 flexbox/browsers/table-cell.html                     |  4 ++--
 flexbox/browsers/vertical-align.html                 |  4 ++--
 flexbox/order/flex-direction.html                    |  4 ++--
 flexbox/order/negative-order.html                    |  4 ++--
 flexbox/order/order.html                             |  4 ++--
 flexbox/order/usecase-order.html                     |  2 +-
 flexbox/ratios/flex-basis.html                       |  4 ++--
 flexbox/ratios/flex-grow-ratios.html                 |  4 ++--
 flexbox/ratios/flex-grow.html                        |  4 ++--
 flexbox/ratios/flex-shrink-min-content.html          |  4 ++--
 flexbox/ratios/flex-shrink-ratios.html               |  4 ++--
 flexbox/ratios/flex-shrink.html                      |  4 ++--
 flexbox/ratios/min-max-content.html                  |  8 ++++----
 flexbox/relationship/display-contents.html           |  4 ++--
 flexbox/relationship/flex-layout.html                |  4 ++--
 flexbox/relationship/floats.html                     |  4 ++--
 flexbox/relationship/grid-layout.html                |  4 ++--
 flexbox/relationship/writing-modes.html              |  4 ++--
 flexbox/use-cases/cards.html                         |  2 +-
 flexbox/use-cases/center.html                        |  4 ++--
 flexbox/use-cases/input-button.html                  |  4 ++--
 flexbox/use-cases/label-input-button.html            |  4 ++--
 flexbox/use-cases/media-flipped.html                 |  2 +-
 flexbox/use-cases/media.html                         |  2 +-
 flexbox/use-cases/navigation-flex.html               |  2 +-
 flexbox/use-cases/navigation.html                    |  2 +-
 flexbox/use-cases/split-navigation.html              |  2 +-
 flexbox/wrapping/column-wrap.html                    |  4 ++--
 flexbox/wrapping/flex-grid.html                      |  4 ++--
 flexbox/wrapping/gaps.html                           |  6 +++---
 flexbox/wrapping/grid-example.html                   |  4 ++--
 flexbox/wrapping/row-reverse-wrap.html               |  4 ++--
 flexbox/wrapping/row-wrap.html                       |  4 ++--
 flexbox/wrapping/visibility-collapse.html            |  4 ++--
 flexbox/wrapping/wrapped-visibility-collapse.html    |  4 ++--
 flow/formatting-contexts/bfc-flow-root.html          |  4 ++--
 flow/formatting-contexts/bfc-overflow.html           |  4 ++--
 flow/formatting-contexts/float.html                  |  4 ++--
 font-features/styles.css                             | 10 +++++-----
 grid/styles.css                                      | 10 +++++-----
 grid/subgrid/adding-line-names.html                  |  2 +-
 grid/subgrid/both.html                               |  2 +-
 grid/subgrid/columns.html                            |  2 +-
 grid/subgrid/gap.html                                |  2 +-
 grid/subgrid/line-names.html                         |  2 +-
 grid/subgrid/rows.html                               |  2 +-
 howto/center.html                                    |  2 +-
 howto/styles.css                                     | 10 +++++-----
 images/styles.css                                    | 10 +++++-----
 logical/float.html                                   |  2 +-
 logical/intro-feature-queries.html                   |  2 +-
 logical/intro-grid-example.html                      |  2 +-
 logical/margin-longhands.html                        |  2 +-
 logical/padding-longhands.html                       |  2 +-
 logical/positioning-inset.html                       |  2 +-
 logical/size-inline-block.html                       |  2 +-
 logical/size-max.html                                |  2 +-
 logical/size-min.html                                |  2 +-
 logical/size-resize.html                             |  2 +-
 modules/compositing.html                             |  2 +-
 modules/transforms.html                              |  2 +-
 time/styles.css                                      | 10 +++++-----
 117 files changed, 230 insertions(+), 230 deletions(-)

diff --git a/assets/styles.css b/assets/styles.css
index 11945fee..f46d5bc4 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -1,10 +1,10 @@
 /* Some default styling for cookbook examples */
 /*
-rgb(53,43,34)
-rgb(75,70,74)
-rgb(95,97,110)
-rgb(137,151,188)
-rgb(160,178,226)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
 */
 body {
   background-color: #fff;
diff --git a/backdrop/styles.css b/backdrop/styles.css
index 11945fee..f46d5bc4 100644
--- a/backdrop/styles.css
+++ b/backdrop/styles.css
@@ -1,10 +1,10 @@
 /* Some default styling for cookbook examples */
 /*
-rgb(53,43,34)
-rgb(75,70,74)
-rgb(95,97,110)
-rgb(137,151,188)
-rgb(160,178,226)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
 */
 body {
   background-color: #fff;
diff --git a/box-alignment/flexbox/auto-margins.html b/box-alignment/flexbox/auto-margins.html
index 6676fc54..0f2aca8a 100644
--- a/box-alignment/flexbox/auto-margins.html
+++ b/box-alignment/flexbox/auto-margins.html
@@ -61,12 +61,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/box-alignment/flexbox/gap.html b/box-alignment/flexbox/gap.html
index f01e5e4e..26a1b75c 100644
--- a/box-alignment/flexbox/gap.html
+++ b/box-alignment/flexbox/gap.html
@@ -61,12 +61,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/box-alignment/overview/flex-align-items.html b/box-alignment/overview/flex-align-items.html
index 5fe6f34c..91774e64 100644
--- a/box-alignment/overview/flex-align-items.html
+++ b/box-alignment/overview/flex-align-items.html
@@ -61,12 +61,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/box-alignment/overview/grid-align-items.html b/box-alignment/overview/grid-align-items.html
index a8737d0f..c45bf56c 100644
--- a/box-alignment/overview/grid-align-items.html
+++ b/box-alignment/overview/grid-align-items.html
@@ -61,12 +61,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/box-alignment/overview/grid-gap.html b/box-alignment/overview/grid-gap.html
index 32f048be..b924ef1c 100644
--- a/box-alignment/overview/grid-gap.html
+++ b/box-alignment/overview/grid-gap.html
@@ -61,12 +61,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/css-cookbook/center--download.html b/css-cookbook/center--download.html
index cf6480df..37757470 100644
--- a/css-cookbook/center--download.html
+++ b/css-cookbook/center--download.html
@@ -21,7 +21,7 @@
       }
 
       .container {
-        border: 2px solid rgb(75, 70, 74);
+        border: 2px solid rgb(75 70 74);
         border-radius: 0.5em;
         height: 200px;
         display: flex;
@@ -30,7 +30,7 @@
       }
 
       .item {
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
         padding: 20px;
         width: 10em;
diff --git a/css-cookbook/center.html b/css-cookbook/center.html
index 4404204f..8862bb43 100644
--- a/css-cookbook/center.html
+++ b/css-cookbook/center.html
@@ -7,12 +7,12 @@
     <link rel="stylesheet" href="styles.css" />
     <style>
       .container {
-        border: 2px solid rgb(75, 70, 74);
+        border: 2px solid rgb(75 70 74);
         border-radius: 0.5em;
       }
 
       .item {
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
         padding: 20px;
       }
diff --git a/css-cookbook/columns-flexbox--download.html b/css-cookbook/columns-flexbox--download.html
index c41cfac0..8600658e 100644
--- a/css-cookbook/columns-flexbox--download.html
+++ b/css-cookbook/columns-flexbox--download.html
@@ -21,7 +21,7 @@
       }
 
       .container {
-        border: 2px solid rgb(75, 70, 74);
+        border: 2px solid rgb(75 70 74);
         border-radius: 0.5em;
         padding: 20px 10px;
         display: flex;
@@ -29,7 +29,7 @@
 
       .container > * {
         padding: 10px;
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
         margin: 0 10px;
         flex: 1;
diff --git a/css-cookbook/columns-flexbox-wrapping--download.html b/css-cookbook/columns-flexbox-wrapping--download.html
index 9ab5d88a..f14c8176 100644
--- a/css-cookbook/columns-flexbox-wrapping--download.html
+++ b/css-cookbook/columns-flexbox-wrapping--download.html
@@ -21,7 +21,7 @@
       }
 
       .container {
-        border: 2px solid rgb(75, 70, 74);
+        border: 2px solid rgb(75 70 74);
         border-radius: 0.5em;
         padding: 20px 10px;
         width: 500px;
@@ -31,7 +31,7 @@
 
       .container > * {
         padding: 10px;
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
         margin: 0 10px;
         flex: 1 1 200px;
diff --git a/css-cookbook/columns-flexbox-wrapping.html b/css-cookbook/columns-flexbox-wrapping.html
index acec9cec..d8870074 100644
--- a/css-cookbook/columns-flexbox-wrapping.html
+++ b/css-cookbook/columns-flexbox-wrapping.html
@@ -11,7 +11,7 @@
 
     <style>
       .container {
-        border: 2px solid rgb(75, 70, 74);
+        border: 2px solid rgb(75 70 74);
         border-radius: 0.5em;
         padding: 20px 10px;
         width: 500px;
@@ -19,7 +19,7 @@
 
       .container > * {
         padding: 10px;
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
       }
     </style>
diff --git a/css-cookbook/columns-flexbox.html b/css-cookbook/columns-flexbox.html
index cbcd6c5a..f1921840 100644
--- a/css-cookbook/columns-flexbox.html
+++ b/css-cookbook/columns-flexbox.html
@@ -11,14 +11,14 @@
 
     <style>
       .container {
-        border: 2px solid rgb(75, 70, 74);
+        border: 2px solid rgb(75 70 74);
         border-radius: 0.5em;
         padding: 20px 10px;
       }
 
       .container > * {
         padding: 10px;
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
       }
     </style>
diff --git a/css-cookbook/columns-grid--download.html b/css-cookbook/columns-grid--download.html
index 91349f2d..be9b851e 100644
--- a/css-cookbook/columns-grid--download.html
+++ b/css-cookbook/columns-grid--download.html
@@ -21,7 +21,7 @@
       }
 
       .container {
-        border: 2px solid rgb(75, 70, 74);
+        border: 2px solid rgb(75 70 74);
         border-radius: 0.5em;
         padding: 20px;
         width: 500px;
@@ -32,7 +32,7 @@
 
       .container > * {
         padding: 10px;
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
         margin: 0;
       }
diff --git a/css-cookbook/columns-grid.html b/css-cookbook/columns-grid.html
index ffbc7af1..75ec4044 100644
--- a/css-cookbook/columns-grid.html
+++ b/css-cookbook/columns-grid.html
@@ -11,7 +11,7 @@
 
     <style>
       .container {
-        border: 2px solid rgb(75, 70, 74);
+        border: 2px solid rgb(75 70 74);
         border-radius: 0.5em;
         padding: 20px;
         width: 500px;
@@ -19,7 +19,7 @@
 
       .container > * {
         padding: 10px;
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
         margin: 0;
       }
diff --git a/css-cookbook/columns-multicol--download.html b/css-cookbook/columns-multicol--download.html
index 6b29dbe7..be2f75b3 100644
--- a/css-cookbook/columns-multicol--download.html
+++ b/css-cookbook/columns-multicol--download.html
@@ -23,11 +23,11 @@
       }
 
       .container {
-        border: 2px solid rgb(75, 70, 74);
+        border: 2px solid rgb(75 70 74);
         border-radius: 0.5em;
         padding: 20px;
         column-width: 10em;
-        column-rule: 1px solid rgb(75, 70, 74);
+        column-rule: 1px solid rgb(75 70 74);
       }
     </style>
   </head>
diff --git a/css-cookbook/columns-multicol.html b/css-cookbook/columns-multicol.html
index e8bea1af..b6794a8d 100644
--- a/css-cookbook/columns-multicol.html
+++ b/css-cookbook/columns-multicol.html
@@ -11,7 +11,7 @@
 
     <style>
       .container {
-        border: 2px solid rgb(75, 70, 74);
+        border: 2px solid rgb(75 70 74);
         border-radius: 0.5em;
         padding: 20px;
       }
@@ -20,7 +20,7 @@
     <style class="editable">
       .container {
         column-width: 10em;
-        column-rule: 1px solid rgb(75, 70, 74);
+        column-rule: 1px solid rgb(75 70 74);
       }
     </style>
   </head>
@@ -51,7 +51,7 @@
     <textarea class="playable playable-css">
 .container {
   column-width: 10em;
-  column-rule: 1px solid rgb(75, 70, 74);
+  column-rule: 1px solid rgb(75 70 74);
 }</textarea
     >
 
diff --git a/css-cookbook/grid-wrapper--download.html b/css-cookbook/grid-wrapper--download.html
index 7c5706a0..95dfc3f0 100644
--- a/css-cookbook/grid-wrapper--download.html
+++ b/css-cookbook/grid-wrapper--download.html
@@ -31,7 +31,7 @@
       }
 
       .grid > * {
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
         padding: 20px;
       }
diff --git a/css-cookbook/grid-wrapper.html b/css-cookbook/grid-wrapper.html
index 166418bb..62802904 100644
--- a/css-cookbook/grid-wrapper.html
+++ b/css-cookbook/grid-wrapper.html
@@ -17,7 +17,7 @@
       }
 
       .grid > * {
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
         padding: 20px;
       }
diff --git a/css-cookbook/sticky-footer--download.html b/css-cookbook/sticky-footer--download.html
index 0ec88b6a..c4bd3ba7 100644
--- a/css-cookbook/sticky-footer--download.html
+++ b/css-cookbook/sticky-footer--download.html
@@ -44,7 +44,7 @@
 
       .page-header,
       .page-footer {
-        background-color: rgb(75, 70, 74);
+        background-color: rgb(75 70 74);
         color: #fff;
         padding: 20px;
       }
diff --git a/css-cookbook/sticky-footer-flexbox--download.html b/css-cookbook/sticky-footer-flexbox--download.html
index 60b1c7bc..8a447013 100644
--- a/css-cookbook/sticky-footer-flexbox--download.html
+++ b/css-cookbook/sticky-footer-flexbox--download.html
@@ -45,7 +45,7 @@
       }
       .page-header,
       .page-footer {
-        background-color: rgb(75, 70, 74);
+        background-color: rgb(75 70 74);
         color: #fff;
         padding: 20px;
       }
diff --git a/css-cookbook/sticky-footer-flexbox.html b/css-cookbook/sticky-footer-flexbox.html
index 7d764a60..e460daba 100644
--- a/css-cookbook/sticky-footer-flexbox.html
+++ b/css-cookbook/sticky-footer-flexbox.html
@@ -23,7 +23,7 @@
 
       .page-header,
       .page-footer {
-        background-color: rgb(75, 70, 74);
+        background-color: rgb(75 70 74);
         color: #fff;
         padding: 20px;
       }
diff --git a/css-cookbook/sticky-footer.html b/css-cookbook/sticky-footer.html
index 2f238620..eccb73b5 100644
--- a/css-cookbook/sticky-footer.html
+++ b/css-cookbook/sticky-footer.html
@@ -25,7 +25,7 @@
 
       .page-header,
       .page-footer {
-        background-color: rgb(75, 70, 74);
+        background-color: rgb(75 70 74);
         color: #fff;
         padding: 20px;
       }
diff --git a/css-cookbook/styles.css b/css-cookbook/styles.css
index 11945fee..f46d5bc4 100644
--- a/css-cookbook/styles.css
+++ b/css-cookbook/styles.css
@@ -1,10 +1,10 @@
 /* Some default styling for cookbook examples */
 /*
-rgb(53,43,34)
-rgb(75,70,74)
-rgb(95,97,110)
-rgb(137,151,188)
-rgb(160,178,226)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
 */
 body {
   background-color: #fff;
diff --git a/css-text/styles.css b/css-text/styles.css
index 11945fee..f46d5bc4 100644
--- a/css-text/styles.css
+++ b/css-text/styles.css
@@ -1,10 +1,10 @@
 /* Some default styling for cookbook examples */
 /*
-rgb(53,43,34)
-rgb(75,70,74)
-rgb(95,97,110)
-rgb(137,151,188)
-rgb(160,178,226)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
 */
 body {
   background-color: #fff;
diff --git a/display/multi-keyword/inline-flex.html b/display/multi-keyword/inline-flex.html
index 57ef7b6b..59f687b6 100644
--- a/display/multi-keyword/inline-flex.html
+++ b/display/multi-keyword/inline-flex.html
@@ -60,7 +60,7 @@
       }
 
       .flex > div {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/display/multi-keyword/multi-keyword-flex.html b/display/multi-keyword/multi-keyword-flex.html
index e12f6c60..512c5e34 100644
--- a/display/multi-keyword/multi-keyword-flex.html
+++ b/display/multi-keyword/multi-keyword-flex.html
@@ -65,7 +65,7 @@
       }
 
       .flex > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/editable-samples-2/pages/border-top-color/index.html b/editable-samples-2/pages/border-top-color/index.html
index cd1b9c34..d971f961 100644
--- a/editable-samples-2/pages/border-top-color/index.html
+++ b/editable-samples-2/pages/border-top-color/index.html
@@ -21,7 +21,7 @@
 
     <pre
       class="prettyprint lang-css"
-      id="example-choice-list"><div class=" example-choice">border-top-color: red;</div><div class=" example-choice">border-top-color: rgb(255, 128, 0);</div><div class=" example-choice">border-top-color: hsl(240 50% 25% / 0.75);</div><div class=" example-choice">border-top-color: #ffbb00;</div><div class=" example-choice">border-top-color: currentColor;</div><div class=" example-choice">border-top-color: transparent;</div></pre>
+      id="example-choice-list"><div class=" example-choice">border-top-color: red;</div><div class=" example-choice">border-top-color: rgb(255 128 0);</div><div class=" example-choice">border-top-color: hsl(240 50% 25% / 0.75);</div><div class=" example-choice">border-top-color: #ffbb00;</div><div class=" example-choice">border-top-color: currentColor;</div><div class=" example-choice">border-top-color: transparent;</div></pre>
 
     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
     <script src="../../js/editable.js"></script>
diff --git a/feature-queries/step1.html b/feature-queries/step1.html
index cceec733..e390d100 100644
--- a/feature-queries/step1.html
+++ b/feature-queries/step1.html
@@ -18,7 +18,7 @@
       .box {
         float: left;
         width: 33%;
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
         padding: 20px;
       }
@@ -41,7 +41,7 @@
 .box {
   float: left;
   width: 33%;
-  border: 2px solid rgb(95, 97, 110);
+  border: 2px solid rgb(95 97 110);
   border-radius: .5em;
   padding: 20px;
 }</textarea
diff --git a/feature-queries/step2.html b/feature-queries/step2.html
index c4e3e5b2..057d3be6 100644
--- a/feature-queries/step2.html
+++ b/feature-queries/step2.html
@@ -18,7 +18,7 @@
       .box {
         float: left;
         width: 33%;
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
         padding: 20px;
       }
@@ -47,7 +47,7 @@
 .box {
   float: left;
   width: 33%;
-  border: 2px solid rgb(95, 97, 110);
+  border: 2px solid rgb(95 97 110);
   border-radius: .5em;
   padding: 20px;
 }
diff --git a/feature-queries/step3.html b/feature-queries/step3.html
index 0a9879eb..ea82c3a2 100644
--- a/feature-queries/step3.html
+++ b/feature-queries/step3.html
@@ -18,7 +18,7 @@
       .box {
         float: left;
         width: 33%;
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
         padding: 20px;
       }
@@ -53,7 +53,7 @@
 .box {
   float: left;
   width: 33%;
-  border: 2px solid rgb(95, 97, 110);
+  border: 2px solid rgb(95 97 110);
   border-radius: .5em;
   padding: 20px;
 }
diff --git a/feature-queries/step4.html b/feature-queries/step4.html
index 2ad840f7..07ef89d0 100644
--- a/feature-queries/step4.html
+++ b/feature-queries/step4.html
@@ -18,7 +18,7 @@
       .box {
         float: left;
         width: 33%;
-        border: 2px solid rgb(95, 97, 110);
+        border: 2px solid rgb(95 97 110);
         border-radius: 0.5em;
         padding: 20px;
       }
@@ -53,7 +53,7 @@
 .box {
   float: left;
   width: 33%;
-  border: 2px solid rgb(95, 97, 110);
+  border: 2px solid rgb(95 97 110);
   border-radius: .5em;
   padding: 20px;
 }
diff --git a/flexbox/alignment/align-content-column.html b/flexbox/alignment/align-content-column.html
index 3d73044b..85fec95f 100644
--- a/flexbox/alignment/align-content-column.html
+++ b/flexbox/alignment/align-content-column.html
@@ -62,12 +62,12 @@
       }
 
       .box {
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         flex: 1 1 100px;
diff --git a/flexbox/alignment/align-content.html b/flexbox/alignment/align-content.html
index 45962562..e9ce451c 100644
--- a/flexbox/alignment/align-content.html
+++ b/flexbox/alignment/align-content.html
@@ -61,12 +61,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         flex: 1 1 100px;
diff --git a/flexbox/alignment/align-items.html b/flexbox/alignment/align-items.html
index 156ad313..6a13714f 100644
--- a/flexbox/alignment/align-items.html
+++ b/flexbox/alignment/align-items.html
@@ -61,12 +61,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/alignment/align-self-column.html b/flexbox/alignment/align-self-column.html
index a5889ac0..918d54ff 100644
--- a/flexbox/alignment/align-self-column.html
+++ b/flexbox/alignment/align-self-column.html
@@ -63,12 +63,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/alignment/align-self.html b/flexbox/alignment/align-self.html
index a1f67d0f..4fdd31eb 100644
--- a/flexbox/alignment/align-self.html
+++ b/flexbox/alignment/align-self.html
@@ -63,12 +63,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/alignment/auto-margins.html b/flexbox/alignment/auto-margins.html
index 6676fc54..0f2aca8a 100644
--- a/flexbox/alignment/auto-margins.html
+++ b/flexbox/alignment/auto-margins.html
@@ -61,12 +61,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/alignment/intro.html b/flexbox/alignment/intro.html
index 45ac2ab4..147ab171 100644
--- a/flexbox/alignment/intro.html
+++ b/flexbox/alignment/intro.html
@@ -62,11 +62,11 @@
       .box {
         width: 500px;
         height: 300px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/alignment/justify-content-column.html b/flexbox/alignment/justify-content-column.html
index 75d07571..9e455cd4 100644
--- a/flexbox/alignment/justify-content-column.html
+++ b/flexbox/alignment/justify-content-column.html
@@ -64,12 +64,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/alignment/justify-content-reverse.html b/flexbox/alignment/justify-content-reverse.html
index 603ca61a..14640c8b 100644
--- a/flexbox/alignment/justify-content-reverse.html
+++ b/flexbox/alignment/justify-content-reverse.html
@@ -64,12 +64,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/alignment/justify-content-writing-mode.html b/flexbox/alignment/justify-content-writing-mode.html
index 2d65395b..07a51bb3 100644
--- a/flexbox/alignment/justify-content-writing-mode.html
+++ b/flexbox/alignment/justify-content-writing-mode.html
@@ -63,12 +63,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/alignment/justify-content.html b/flexbox/alignment/justify-content.html
index 9561d576..155ebd76 100644
--- a/flexbox/alignment/justify-content.html
+++ b/flexbox/alignment/justify-content.html
@@ -63,12 +63,12 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
         padding: 20px;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/basics/align-items.html b/flexbox/basics/align-items.html
index a07bf7f2..83c02ceb 100644
--- a/flexbox/basics/align-items.html
+++ b/flexbox/basics/align-items.html
@@ -62,11 +62,11 @@
       .box {
         width: 500px;
         height: 130px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/basics/flex-direction.html b/flexbox/basics/flex-direction.html
index 1a8164b2..0fd02cc2 100644
--- a/flexbox/basics/flex-direction.html
+++ b/flexbox/basics/flex-direction.html
@@ -60,14 +60,14 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/basics/flex-flow.html b/flexbox/basics/flex-flow.html
index 85617623..fb6e6ee0 100644
--- a/flexbox/basics/flex-flow.html
+++ b/flexbox/basics/flex-flow.html
@@ -60,7 +60,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         width: 200px;
@@ -68,7 +68,7 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/basics/flex-properties.html b/flexbox/basics/flex-properties.html
index 1e17927b..39af58d5 100644
--- a/flexbox/basics/flex-properties.html
+++ b/flexbox/basics/flex-properties.html
@@ -60,7 +60,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
@@ -68,7 +68,7 @@
       .box {
         display: flex;
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/basics/flex-shorthands.html b/flexbox/basics/flex-shorthands.html
index 89b475dd..6566683b 100644
--- a/flexbox/basics/flex-shorthands.html
+++ b/flexbox/basics/flex-shorthands.html
@@ -60,7 +60,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
@@ -68,7 +68,7 @@
       .box {
         display: flex;
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/basics/flex-wrap.html b/flexbox/basics/flex-wrap.html
index a4a6e280..6de90a3d 100644
--- a/flexbox/basics/flex-wrap.html
+++ b/flexbox/basics/flex-wrap.html
@@ -60,7 +60,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         width: 200px;
@@ -68,7 +68,7 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/basics/justify-content.html b/flexbox/basics/justify-content.html
index cbda9195..aba72e7f 100644
--- a/flexbox/basics/justify-content.html
+++ b/flexbox/basics/justify-content.html
@@ -61,11 +61,11 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/basics/simple-example-anon.html b/flexbox/basics/simple-example-anon.html
index 0338ed7b..0d02b381 100644
--- a/flexbox/basics/simple-example-anon.html
+++ b/flexbox/basics/simple-example-anon.html
@@ -62,11 +62,11 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/flexbox/basics/simple-example.html b/flexbox/basics/simple-example.html
index 41ef2080..1d1e0ac7 100644
--- a/flexbox/basics/simple-example.html
+++ b/flexbox/basics/simple-example.html
@@ -62,11 +62,11 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/flexbox/basics/the-flex-container.html b/flexbox/basics/the-flex-container.html
index 78d3da23..b2b6c122 100644
--- a/flexbox/basics/the-flex-container.html
+++ b/flexbox/basics/the-flex-container.html
@@ -62,11 +62,11 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/browsers/float.html b/flexbox/browsers/float.html
index 56d0be88..47a9b4e1 100644
--- a/flexbox/browsers/float.html
+++ b/flexbox/browsers/float.html
@@ -61,7 +61,7 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box::after {
@@ -71,7 +71,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/browsers/inline-block.html b/flexbox/browsers/inline-block.html
index 04ec6d41..6c278e99 100644
--- a/flexbox/browsers/inline-block.html
+++ b/flexbox/browsers/inline-block.html
@@ -61,11 +61,11 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/browsers/table-cell.html b/flexbox/browsers/table-cell.html
index 3867c4a9..0e18ca4f 100644
--- a/flexbox/browsers/table-cell.html
+++ b/flexbox/browsers/table-cell.html
@@ -61,11 +61,11 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/browsers/vertical-align.html b/flexbox/browsers/vertical-align.html
index cc96393c..c252e760 100644
--- a/flexbox/browsers/vertical-align.html
+++ b/flexbox/browsers/vertical-align.html
@@ -61,11 +61,11 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/order/flex-direction.html b/flexbox/order/flex-direction.html
index 0c0a7b58..595a3cbd 100644
--- a/flexbox/order/flex-direction.html
+++ b/flexbox/order/flex-direction.html
@@ -60,7 +60,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
@@ -73,7 +73,7 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/order/negative-order.html b/flexbox/order/negative-order.html
index 39060062..894e5964 100644
--- a/flexbox/order/negative-order.html
+++ b/flexbox/order/negative-order.html
@@ -63,7 +63,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
@@ -76,7 +76,7 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/order/order.html b/flexbox/order/order.html
index 03702528..b2ec358b 100644
--- a/flexbox/order/order.html
+++ b/flexbox/order/order.html
@@ -60,7 +60,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
@@ -73,7 +73,7 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/order/usecase-order.html b/flexbox/order/usecase-order.html
index 4bd5b2b9..07de26dd 100644
--- a/flexbox/order/usecase-order.html
+++ b/flexbox/order/usecase-order.html
@@ -68,7 +68,7 @@
       }
 
       .card {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/flexbox/ratios/flex-basis.html b/flexbox/ratios/flex-basis.html
index 5ba374d4..6766b04a 100644
--- a/flexbox/ratios/flex-basis.html
+++ b/flexbox/ratios/flex-basis.html
@@ -62,7 +62,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
@@ -70,7 +70,7 @@
       .box {
         display: flex;
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/ratios/flex-grow-ratios.html b/flexbox/ratios/flex-grow-ratios.html
index 36fad7ac..1392fe59 100644
--- a/flexbox/ratios/flex-grow-ratios.html
+++ b/flexbox/ratios/flex-grow-ratios.html
@@ -60,7 +60,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
@@ -68,7 +68,7 @@
       .box {
         display: flex;
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/ratios/flex-grow.html b/flexbox/ratios/flex-grow.html
index 0ad11f2e..60815ad8 100644
--- a/flexbox/ratios/flex-grow.html
+++ b/flexbox/ratios/flex-grow.html
@@ -62,7 +62,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
@@ -70,7 +70,7 @@
       .box {
         display: flex;
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/ratios/flex-shrink-min-content.html b/flexbox/ratios/flex-shrink-min-content.html
index bb3d485b..2c7171e8 100644
--- a/flexbox/ratios/flex-shrink-min-content.html
+++ b/flexbox/ratios/flex-shrink-min-content.html
@@ -62,14 +62,14 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
         display: flex;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/ratios/flex-shrink-ratios.html b/flexbox/ratios/flex-shrink-ratios.html
index c780b1d5..f1a9e00e 100644
--- a/flexbox/ratios/flex-shrink-ratios.html
+++ b/flexbox/ratios/flex-shrink-ratios.html
@@ -62,7 +62,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
@@ -70,7 +70,7 @@
       .box {
         display: flex;
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/ratios/flex-shrink.html b/flexbox/ratios/flex-shrink.html
index ba86dc7b..f76189ff 100644
--- a/flexbox/ratios/flex-shrink.html
+++ b/flexbox/ratios/flex-shrink.html
@@ -62,7 +62,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
@@ -70,7 +70,7 @@
       .box {
         display: flex;
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/ratios/min-max-content.html b/flexbox/ratios/min-max-content.html
index 758f1dcf..cb18b334 100644
--- a/flexbox/ratios/min-max-content.html
+++ b/flexbox/ratios/min-max-content.html
@@ -63,11 +63,11 @@
     <style class="editable">
       .min-content {
         width: min-content;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
       .max-content {
         width: max-content;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
   </head>
@@ -86,11 +86,11 @@
     <textarea class="playable-css">
 .min-content {
   width: min-content;
-  border: 2px dotted rgb(96, 139, 168);
+  border: 2px dotted rgb(96 139 168);
 }
 .max-content {
   width: max-content;
-  border: 2px dotted rgb(96, 139, 168);
+  border: 2px dotted rgb(96 139 168);
 }</textarea
     >
     <textarea id="code" class="playable-html">
diff --git a/flexbox/relationship/display-contents.html b/flexbox/relationship/display-contents.html
index dbddf736..1005d9f5 100644
--- a/flexbox/relationship/display-contents.html
+++ b/flexbox/relationship/display-contents.html
@@ -64,7 +64,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 20px;
@@ -72,7 +72,7 @@
 
       .box {
         padding: 20px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/relationship/flex-layout.html b/flexbox/relationship/flex-layout.html
index a35b1852..ff04d29f 100644
--- a/flexbox/relationship/flex-layout.html
+++ b/flexbox/relationship/flex-layout.html
@@ -64,7 +64,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 20px;
@@ -72,7 +72,7 @@
 
       .box {
         padding: 20px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/relationship/floats.html b/flexbox/relationship/floats.html
index 6e79ba87..cd0562ff 100644
--- a/flexbox/relationship/floats.html
+++ b/flexbox/relationship/floats.html
@@ -60,14 +60,14 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       section::after {
diff --git a/flexbox/relationship/grid-layout.html b/flexbox/relationship/grid-layout.html
index bbf71f78..2f8e854f 100644
--- a/flexbox/relationship/grid-layout.html
+++ b/flexbox/relationship/grid-layout.html
@@ -64,7 +64,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 20px;
@@ -72,7 +72,7 @@
 
       .box {
         padding: 20px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/relationship/writing-modes.html b/flexbox/relationship/writing-modes.html
index 021ddb9d..e77edc17 100644
--- a/flexbox/relationship/writing-modes.html
+++ b/flexbox/relationship/writing-modes.html
@@ -60,14 +60,14 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
     <style class="editable">
diff --git a/flexbox/use-cases/cards.html b/flexbox/use-cases/cards.html
index aade8a63..113cc126 100644
--- a/flexbox/use-cases/cards.html
+++ b/flexbox/use-cases/cards.html
@@ -66,7 +66,7 @@
       }
 
       .card {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
       }
 
diff --git a/flexbox/use-cases/center.html b/flexbox/use-cases/center.html
index 3fe53a89..1c17abb1 100644
--- a/flexbox/use-cases/center.html
+++ b/flexbox/use-cases/center.html
@@ -62,11 +62,11 @@
       .box {
         width: 500px;
         height: 300px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
diff --git a/flexbox/use-cases/input-button.html b/flexbox/use-cases/input-button.html
index 8007551a..355e00f5 100644
--- a/flexbox/use-cases/input-button.html
+++ b/flexbox/use-cases/input-button.html
@@ -67,7 +67,7 @@
       }
 
       .wrapper {
-        border: 1px solid rgb(96, 139, 168);
+        border: 1px solid rgb(96 139 168);
       }
 
       .wrapper > * {
@@ -76,7 +76,7 @@
       }
       .wrapper input[type="text"] {
         background-color: rgb(96 139 168 / 0.5);
-        border-right: 1px solid rgb(96, 139, 168);
+        border-right: 1px solid rgb(96 139 168);
       }
       .wrapper input[type="submit"] {
         background-color: rgb(96 139 168);
diff --git a/flexbox/use-cases/label-input-button.html b/flexbox/use-cases/label-input-button.html
index 3bf06a1e..29d6f309 100644
--- a/flexbox/use-cases/label-input-button.html
+++ b/flexbox/use-cases/label-input-button.html
@@ -68,7 +68,7 @@
       }
 
       .wrapper {
-        border: 1px solid rgb(96, 139, 168);
+        border: 1px solid rgb(96 139 168);
       }
 
       .wrapper > * {
@@ -77,7 +77,7 @@
       }
       .wrapper > input[type="text"] {
         background-color: rgb(96 139 168 / 0.5);
-        border-right: 1px solid rgb(96, 139, 168);
+        border-right: 1px solid rgb(96 139 168);
       }
       .wrapper input[type="submit"] {
         background-color: rgb(96 139 168);
diff --git a/flexbox/use-cases/media-flipped.html b/flexbox/use-cases/media-flipped.html
index 06bb0efa..46ca4f9a 100644
--- a/flexbox/use-cases/media-flipped.html
+++ b/flexbox/use-cases/media-flipped.html
@@ -61,7 +61,7 @@
 
       .media {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .media img {
diff --git a/flexbox/use-cases/media.html b/flexbox/use-cases/media.html
index 40eca5dd..9a85ca2f 100644
--- a/flexbox/use-cases/media.html
+++ b/flexbox/use-cases/media.html
@@ -61,7 +61,7 @@
 
       .media {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .media .image {
diff --git a/flexbox/use-cases/navigation-flex.html b/flexbox/use-cases/navigation-flex.html
index f8d7e414..169a9102 100644
--- a/flexbox/use-cases/navigation-flex.html
+++ b/flexbox/use-cases/navigation-flex.html
@@ -72,7 +72,7 @@
       nav a {
         text-decoration: none;
         color: #000;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/flexbox/use-cases/navigation.html b/flexbox/use-cases/navigation.html
index 84614a9a..76d7445f 100644
--- a/flexbox/use-cases/navigation.html
+++ b/flexbox/use-cases/navigation.html
@@ -72,7 +72,7 @@
       nav a {
         text-decoration: none;
         color: #000;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/flexbox/use-cases/split-navigation.html b/flexbox/use-cases/split-navigation.html
index db0139d4..c61d6c39 100644
--- a/flexbox/use-cases/split-navigation.html
+++ b/flexbox/use-cases/split-navigation.html
@@ -72,7 +72,7 @@
       nav a {
         text-decoration: none;
         color: #000;
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/flexbox/wrapping/column-wrap.html b/flexbox/wrapping/column-wrap.html
index 2b92aafa..93c4709f 100644
--- a/flexbox/wrapping/column-wrap.html
+++ b/flexbox/wrapping/column-wrap.html
@@ -60,13 +60,13 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/wrapping/flex-grid.html b/flexbox/wrapping/flex-grid.html
index 6eca9f5b..b25d79c8 100644
--- a/flexbox/wrapping/flex-grid.html
+++ b/flexbox/wrapping/flex-grid.html
@@ -63,13 +63,13 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/wrapping/gaps.html b/flexbox/wrapping/gaps.html
index 7e8bd23b..2b646bc8 100644
--- a/flexbox/wrapping/gaps.html
+++ b/flexbox/wrapping/gaps.html
@@ -63,7 +63,7 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
@@ -74,7 +74,7 @@
 
     <style class="editable">
       .wrapper {
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
         width: 500px;
       }
       .box {
@@ -107,7 +107,7 @@
     </section>
     <textarea class="playable-css">
 .wrapper {
-  border: 2px dotted rgb(96, 139, 168);
+  border: 2px dotted rgb(96 139 168);
   width: 500px;
 }
 .box {
diff --git a/flexbox/wrapping/grid-example.html b/flexbox/wrapping/grid-example.html
index 28adcd64..6aca7158 100644
--- a/flexbox/wrapping/grid-example.html
+++ b/flexbox/wrapping/grid-example.html
@@ -60,14 +60,14 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/wrapping/row-reverse-wrap.html b/flexbox/wrapping/row-reverse-wrap.html
index 4d72279e..82877441 100644
--- a/flexbox/wrapping/row-reverse-wrap.html
+++ b/flexbox/wrapping/row-reverse-wrap.html
@@ -60,14 +60,14 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/wrapping/row-wrap.html b/flexbox/wrapping/row-wrap.html
index c8de825f..5c29f085 100644
--- a/flexbox/wrapping/row-wrap.html
+++ b/flexbox/wrapping/row-wrap.html
@@ -60,14 +60,14 @@
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
       }
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
     </style>
 
diff --git a/flexbox/wrapping/visibility-collapse.html b/flexbox/wrapping/visibility-collapse.html
index a904357c..f42a9956 100644
--- a/flexbox/wrapping/visibility-collapse.html
+++ b/flexbox/wrapping/visibility-collapse.html
@@ -62,11 +62,11 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/flexbox/wrapping/wrapped-visibility-collapse.html b/flexbox/wrapping/wrapped-visibility-collapse.html
index 1be1c97b..bd048cd6 100644
--- a/flexbox/wrapping/wrapped-visibility-collapse.html
+++ b/flexbox/wrapping/wrapped-visibility-collapse.html
@@ -62,11 +62,11 @@
 
       .box {
         width: 500px;
-        border: 2px dotted rgb(96, 139, 168);
+        border: 2px dotted rgb(96 139 168);
       }
 
       .box > * {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/flow/formatting-contexts/bfc-flow-root.html b/flow/formatting-contexts/bfc-flow-root.html
index 9f071012..a1d4f63e 100644
--- a/flow/formatting-contexts/bfc-flow-root.html
+++ b/flow/formatting-contexts/bfc-flow-root.html
@@ -62,7 +62,7 @@
     </style>
     <style class="editable">
       .box {
-        background-color: rgb(224, 206, 247);
+        background-color: rgb(224 206 247);
         border: 5px solid rebeccapurple;
         display: flow-root;
       }
@@ -87,7 +87,7 @@
     </section>
     <textarea class="playable-css">
 .box {
-  background-color: rgb(224, 206, 247);
+  background-color: rgb(224 206 247);
   border: 5px solid rebeccapurple;
   display: flow-root;
 }
diff --git a/flow/formatting-contexts/bfc-overflow.html b/flow/formatting-contexts/bfc-overflow.html
index 6e986f9e..98353bd5 100644
--- a/flow/formatting-contexts/bfc-overflow.html
+++ b/flow/formatting-contexts/bfc-overflow.html
@@ -62,7 +62,7 @@
     </style>
     <style class="editable">
       .box {
-        background-color: rgb(224, 206, 247);
+        background-color: rgb(224 206 247);
         border: 5px solid rebeccapurple;
         overflow: auto;
       }
@@ -87,7 +87,7 @@
     </section>
     <textarea class="playable-css">
 .box {
-  background-color: rgb(224, 206, 247);
+  background-color: rgb(224 206 247);
   border: 5px solid rebeccapurple;
   overflow: auto;
 }
diff --git a/flow/formatting-contexts/float.html b/flow/formatting-contexts/float.html
index 911ef824..56845ca4 100644
--- a/flow/formatting-contexts/float.html
+++ b/flow/formatting-contexts/float.html
@@ -62,7 +62,7 @@
     </style>
     <style class="editable">
       .box {
-        background-color: rgb(224, 206, 247);
+        background-color: rgb(224 206 247);
         border: 5px solid rebeccapurple;
       }
 
@@ -86,7 +86,7 @@
     </section>
     <textarea class="playable-css">
 .box {
-  background-color: rgb(224, 206, 247);
+  background-color: rgb(224 206 247);
   border: 5px solid rebeccapurple;
 }
 
diff --git a/font-features/styles.css b/font-features/styles.css
index 11945fee..f46d5bc4 100644
--- a/font-features/styles.css
+++ b/font-features/styles.css
@@ -1,10 +1,10 @@
 /* Some default styling for cookbook examples */
 /*
-rgb(53,43,34)
-rgb(75,70,74)
-rgb(95,97,110)
-rgb(137,151,188)
-rgb(160,178,226)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
 */
 body {
   background-color: #fff;
diff --git a/grid/styles.css b/grid/styles.css
index 11945fee..f46d5bc4 100644
--- a/grid/styles.css
+++ b/grid/styles.css
@@ -1,10 +1,10 @@
 /* Some default styling for cookbook examples */
 /*
-rgb(53,43,34)
-rgb(75,70,74)
-rgb(95,97,110)
-rgb(137,151,188)
-rgb(160,178,226)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
 */
 body {
   background-color: #fff;
diff --git a/grid/subgrid/adding-line-names.html b/grid/subgrid/adding-line-names.html
index 74557db4..8de41f74 100644
--- a/grid/subgrid/adding-line-names.html
+++ b/grid/subgrid/adding-line-names.html
@@ -23,7 +23,7 @@
       }
 
       .subitem {
-        background-color: rgb(40, 240, 83);
+        background-color: rgb(40 240 83);
       }
     </style>
 
diff --git a/grid/subgrid/both.html b/grid/subgrid/both.html
index 3cf82d7b..1ac5a5da 100644
--- a/grid/subgrid/both.html
+++ b/grid/subgrid/both.html
@@ -23,7 +23,7 @@
       }
 
       .subitem {
-        background-color: rgb(40, 240, 83);
+        background-color: rgb(40 240 83);
       }
     </style>
 
diff --git a/grid/subgrid/columns.html b/grid/subgrid/columns.html
index 780a37e1..2c08d63f 100644
--- a/grid/subgrid/columns.html
+++ b/grid/subgrid/columns.html
@@ -23,7 +23,7 @@
       }
 
       .subitem {
-        background-color: rgb(40, 240, 83);
+        background-color: rgb(40 240 83);
       }
     </style>
 
diff --git a/grid/subgrid/gap.html b/grid/subgrid/gap.html
index f5aea822..fb3c7b4b 100644
--- a/grid/subgrid/gap.html
+++ b/grid/subgrid/gap.html
@@ -23,7 +23,7 @@
       }
 
       .subitem {
-        background-color: rgb(40, 240, 83);
+        background-color: rgb(40 240 83);
       }
     </style>
 
diff --git a/grid/subgrid/line-names.html b/grid/subgrid/line-names.html
index 22b88644..52b5cbdd 100644
--- a/grid/subgrid/line-names.html
+++ b/grid/subgrid/line-names.html
@@ -23,7 +23,7 @@
       }
 
       .subitem {
-        background-color: rgb(40, 240, 83);
+        background-color: rgb(40 240 83);
       }
     </style>
 
diff --git a/grid/subgrid/rows.html b/grid/subgrid/rows.html
index d3bf2d57..b4553e47 100644
--- a/grid/subgrid/rows.html
+++ b/grid/subgrid/rows.html
@@ -23,7 +23,7 @@
       }
 
       .subitem {
-        background-color: rgb(40, 240, 83);
+        background-color: rgb(40 240 83);
       }
     </style>
 
diff --git a/howto/center.html b/howto/center.html
index 51bd2cb5..d8c2a34a 100644
--- a/howto/center.html
+++ b/howto/center.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="styles.css" />
     <style>
       .box {
-        background-color: rgb(69, 164, 181);
+        background-color: rgb(69 164 181);
         border-radius: 5px;
         padding: 10px;
         width: 100px;
diff --git a/howto/styles.css b/howto/styles.css
index 11945fee..f46d5bc4 100644
--- a/howto/styles.css
+++ b/howto/styles.css
@@ -1,10 +1,10 @@
 /* Some default styling for cookbook examples */
 /*
-rgb(53,43,34)
-rgb(75,70,74)
-rgb(95,97,110)
-rgb(137,151,188)
-rgb(160,178,226)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
 */
 body {
   background-color: #fff;
diff --git a/images/styles.css b/images/styles.css
index 11945fee..f46d5bc4 100644
--- a/images/styles.css
+++ b/images/styles.css
@@ -1,10 +1,10 @@
 /* Some default styling for cookbook examples */
 /*
-rgb(53,43,34)
-rgb(75,70,74)
-rgb(95,97,110)
-rgb(137,151,188)
-rgb(160,178,226)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
 */
 body {
   background-color: #fff;
diff --git a/logical/float.html b/logical/float.html
index 4a904fab..13abacf3 100644
--- a/logical/float.html
+++ b/logical/float.html
@@ -11,7 +11,7 @@
       }
 
       .box {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/logical/intro-feature-queries.html b/logical/intro-feature-queries.html
index 45df599f..c90e0710 100644
--- a/logical/intro-feature-queries.html
+++ b/logical/intro-feature-queries.html
@@ -10,7 +10,7 @@
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-auto-rows: minmax(100px, auto);
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
       }
 
diff --git a/logical/intro-grid-example.html b/logical/intro-grid-example.html
index 698d1919..e72e3583 100644
--- a/logical/intro-grid-example.html
+++ b/logical/intro-grid-example.html
@@ -10,7 +10,7 @@
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         grid-auto-rows: minmax(100px, auto);
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
       }
 
diff --git a/logical/margin-longhands.html b/logical/margin-longhands.html
index e76ca0a5..a766ffd9 100644
--- a/logical/margin-longhands.html
+++ b/logical/margin-longhands.html
@@ -13,7 +13,7 @@
         border: 2px dotted grey;
       }
       .box {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/logical/padding-longhands.html b/logical/padding-longhands.html
index 8b96abcf..ae9697ef 100644
--- a/logical/padding-longhands.html
+++ b/logical/padding-longhands.html
@@ -10,7 +10,7 @@
         display: flex;
       }
       .box {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         margin: 10px;
diff --git a/logical/positioning-inset.html b/logical/positioning-inset.html
index 1713872d..f531e36f 100644
--- a/logical/positioning-inset.html
+++ b/logical/positioning-inset.html
@@ -18,7 +18,7 @@
       }
 
       .box {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/logical/size-inline-block.html b/logical/size-inline-block.html
index ead39b8a..986c419a 100644
--- a/logical/size-inline-block.html
+++ b/logical/size-inline-block.html
@@ -10,7 +10,7 @@
         display: flex;
       }
       .box {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/logical/size-max.html b/logical/size-max.html
index cf6ecdb3..6055778d 100644
--- a/logical/size-max.html
+++ b/logical/size-max.html
@@ -10,7 +10,7 @@
         display: flex;
       }
       .box {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/logical/size-min.html b/logical/size-min.html
index de7925c2..d87445d0 100644
--- a/logical/size-min.html
+++ b/logical/size-min.html
@@ -10,7 +10,7 @@
         display: flex;
       }
       .box {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/logical/size-resize.html b/logical/size-resize.html
index 752e4a8f..c176b977 100644
--- a/logical/size-resize.html
+++ b/logical/size-resize.html
@@ -10,7 +10,7 @@
         display: flex;
       }
       .box {
-        border: 2px solid rgb(96, 139, 168);
+        border: 2px solid rgb(96 139 168);
         border-radius: 5px;
         background-color: rgb(96 139 168 / 0.2);
         padding: 10px;
diff --git a/modules/compositing.html b/modules/compositing.html
index b71a8b3c..d82d7ff9 100644
--- a/modules/compositing.html
+++ b/modules/compositing.html
@@ -45,7 +45,7 @@
         background: radial-gradient(
           circle,
           transparent 0 20px,
-          rgb(255, 200, 200) 20px
+          rgb(255 200 200) 20px
         );
         background-size: 60px 60px;
         background-position: center;
diff --git a/modules/transforms.html b/modules/transforms.html
index 1bc26495..b2c8e301 100644
--- a/modules/transforms.html
+++ b/modules/transforms.html
@@ -60,7 +60,7 @@
         #z0 {
             width: 50px;
             height: 50px;
-            background: linear-gradient(to right bottom, rgb(223, 223, 223), rgb(190, 190, 190));
+            background: linear-gradient(to right bottom, rgb(223 223 223), rgb(190 190 190));
             transform: translateZ(0px);
             position: absolute;
             display: flex;
diff --git a/time/styles.css b/time/styles.css
index 11945fee..f46d5bc4 100644
--- a/time/styles.css
+++ b/time/styles.css
@@ -1,10 +1,10 @@
 /* Some default styling for cookbook examples */
 /*
-rgb(53,43,34)
-rgb(75,70,74)
-rgb(95,97,110)
-rgb(137,151,188)
-rgb(160,178,226)
+rgb(53 43 34)
+rgb(75 70 74)
+rgb(95 97 110)
+rgb(137 151 188)
+rgb(160 178 226)
 */
 body {
   background-color: #fff;