Update scrollbar-gutter description (#6512)

The CSS WG recently reached consensus on the initial specification of the `scrollbar-gutter` property:
  w3c/csswg-drafts#4674 (comment)

This is the updated spec:
  https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property

This change updates the description of `scrollbar-gutter` to match the new spec.

For more details, an explainer is available at https://github.com/felipeerias/scrollbar-gutter-explainer

files/en-us/web/css/scrollbar-gutter/index.html

@@ -26,17 +26,9 @@ <h2 id="Syntax">Syntax</h2>
 <pre class="brush:css no-line-numbers">/* Initial value */
 scrollbar-gutter: auto;
 
-/* "stable" keyword, with optional modifiers */
+/* "stable" keyword, with optional modifier */
 scrollbar-gutter: stable;
-scrollbar-gutter: stable both;
-scrollbar-gutter: stable force;
-scrollbar-gutter: stable both force;
-
-/* "always" keyword, with optional modifiers */
-scrollbar-gutter: always;
-scrollbar-gutter: always both;
-scrollbar-gutter: always force;
-scrollbar-gutter: always both force;
+scrollbar-gutter: stable mirror;
 
 /* Global values */
 scrollbar-gutter: inherit;
@@ -50,13 +42,9 @@ <h3 id="Values">Values</h3>
  <dt><code>auto</code></dt>
  <dd>The initial value. Classic scrollbars create a gutter when <code>overflow</code> is <code>scroll</code>, or when <code>overflow</code> is <code>auto</code> and the box is overflowing. Overlay scrollbars do not consume space.</dd>
  <dt><code>stable</code></dt>
- <dd>When using classic scrollbars, the gutter will be present if <code>overflow</code> is <code>scroll</code> or <code>auto</code> even if the box is not overflowing. When using overlay scrollbars, the gutter will not be present.</dd>
- <dt><code>always</code></dt>
- <dd>The scrollbar gutter will always be present when <code>overflow</code> is <code>scroll</code> or <code>auto</code>, regardless of the type of scrollbar or of whether the box is overflowing.</dd>
- <dt><code>both</code></dt>
+ <dd>When using classic scrollbars, the gutter will be present if <code>overflow</code> is <code>auto</code>, <code>scroll</code>, or <code>hidden</code> even if the box is not overflowing. When using overlay scrollbars, the gutter will not be present.</dd>
+ <dt><code>mirror</code></dt>
  <dd>If a gutter would be present on one of the inline start/end edges of the box, another will be present on the opposite edge as well.</dd>
- <dt><code>force</code></dt>
- <dd>The keywords <code>stable</code> and <code>always</code> will also be in effect when <code>overflow</code> is <code>visible</code>, <code>hidden</code> or <code>clip</code>. Only the gutter will be displayed, not a scrollbar.</dd>
 </dl>
 
 <h2 id="Formal_definition">Formal definition</h2>
@@ -71,41 +59,33 @@ <h2 id="Examples">Examples</h2>
 
 <h3 id="Example_1">Example 1</h3>
 
-<p>Prevent layout changes when the content grows or shrinks:</p>
+<p>Prevent unneeded layout changes as the content growing or shrinking causes the scrollbar to appear/disappear:</p>
 
 <pre class="brush: css">.container {
     scrollbar-gutter: stable;
 }
 </pre>
 
-<h3 id="Example_2">Example 2</h3>
-
-<p>Prevent an overlay scrollbar from obscuring content:</p>
-
-<pre class="brush: css">.container {
-    scrollbar-gutter: always;
-}
-</pre>
-
 <h3 id="Example_3">Example 3</h3>
 
-<p>Keep the symmetry between both sides of the box:</p>
+<p>Add symmetric spacing to both sides of the box so the content is centered:</p>
 
 <pre class="brush: css">.container {
-    scrollbar-gutter: stable both;
+    scrollbar-gutter: stable mirror;
 }
 </pre>
 
 <h3 id="Example_4">Example 4</h3>
 
-<p>Reserve the same amount of space on the edges of an element that is adjacent to a scrolling element as is being reserved in the latter, so that both line up visually:</p>
+<p>Align the contents of a non-scrolling element and a scrolling one adjacent to it:</p>
 
 <pre class="brush: css">.header {
-    scrollbar-gutter: always force;
+    overflow: hidden;
+    scrollbar-gutter: stable;
 }
 
 .container {
-    scrollbar-gutter: always;
+    scrollbar-gutter: stable;
 }
 </pre>