Editorial: simplify some UA styles to use shorthands where appropriate

Author: emilio

source

@@ -3580,20 +3580,28 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <ref>CSSLOGICAL</ref></p>
 
     <ul class="brief">
-      <li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-margin-block-start">'margin-block-start'</dfn>,
+      <li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-margin-block">'margin-block'</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-margin-block-start">'margin-block-start'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-margin-block-end">'margin-block-end'</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-margin-inline">'margin-inline'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-margin-inline-start">'margin-inline-start'</dfn>, and
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-margin-inline-end">'margin-inline-end'</dfn> properties</li>
-      <li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-padding-block-start">'padding-block-start'</dfn>,
+      <li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-padding-block">'padding-block'</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-padding-block-start">'padding-block-start'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-padding-block-end">'padding-block-end'</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-padding-inline">'padding-inline'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-padding-inline-start">'padding-inline-start'</dfn>, and
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-padding-inline-end">'padding-inline-end'</dfn> properties</li>
-      <li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-block-start-width">'border-block-start-width'</dfn>,
+      <li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-block-width">'border-block-width'</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-block-start-width">'border-block-start-width'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-block-end-width">'border-block-end-width'</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width">'border-inline-width'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-inline-start-width">'border-inline-start-width'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-inline-end-width">'border-inline-end-width'</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-block-style">'border-block-style'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-block-start-style">'border-block-start-style'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-block-end-style">'border-block-end-style'</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-inline-style">'border-inline-style'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-inline-start-style">'border-inline-start-style'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-inline-end-style">'border-inline-end-style'</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-block-start-color">'border-block-start-color'</dfn>,
@@ -131924,10 +131932,10 @@ header, hr, legend, listing, main, p, plaintext, pre, search, xmp {
 }
 
 blockquote, figure, listing, p, plaintext, pre, xmp {
-  margin-block-start: 1em; margin-block-end: 1em;
+  margin-block: 1em;
 }
 
-blockquote, figure { margin-inline-start: 40px; margin-inline-end: 40px; }
+blockquote, figure { margin-inline: 40px; }
 
 address { font-style: italic; }
 listing, plaintext, pre, xmp {
@@ -132272,23 +132280,23 @@ article, aside, h1, h2, h3, h4, h5, h6, hgroup, nav, section {
   display: block;<!-- see also unicode-bidi: isolate rules-->
 }
 
-h1 { margin-block-start: 0.67em; margin-block-end: 0.67em; font-size: 2.00em; font-weight: bold; }
-h2 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; font-weight: bold; }
-h3 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; font-weight: bold; }
-h4 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; font-weight: bold; }
-h5 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; font-weight: bold; }
-h6 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; font-weight: bold; }</code></pre>
+h1 { margin-block: 0.67em; font-size: 2.00em; font-weight: bold; }
+h2 { margin-block: 0.83em; font-size: 1.50em; font-weight: bold; }
+h3 { margin-block: 1.00em; font-size: 1.17em; font-weight: bold; }
+h4 { margin-block: 1.33em; font-size: 1.00em; font-weight: bold; }
+h5 { margin-block: 1.67em; font-size: 0.83em; font-weight: bold; }
+h6 { margin-block: 2.33em; font-size: 0.67em; font-weight: bold; }</code></pre>
 
   <p>In the following CSS block, <var>x</var> is shorthand for the following selector:
   <code data-x="">:is(article, aside, nav, section)</code></p>
 
   <pre><code class="css">@namespace "http://www.w3.org/1999/xhtml";
 
-<var>x</var> h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; }
-<var>x</var> <var>x</var> h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; }
-<var>x</var> <var>x</var> <var>x</var> h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; }
-<var>x</var> <var>x</var> <var>x</var> <var>x</var> h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; }
-<var>x</var> <var>x</var> <var>x</var> <var>x</var> <var>x</var> h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; }</code></pre>
+<var>x</var> h1 { margin-block: 0.83em; font-size: 1.50em; }
+<var>x</var> <var>x</var> h1 { margin-block: 1.00em; font-size: 1.17em; }
+<var>x</var> <var>x</var> <var>x</var> h1 { margin-block: 1.33em; font-size: 1.00em; }
+<var>x</var> <var>x</var> <var>x</var> <var>x</var> h1 { margin-block: 1.67em; font-size: 0.83em; }
+<var>x</var> <var>x</var> <var>x</var> <var>x</var> <var>x</var> h1 { margin-block: 2.33em; font-size: 0.67em; }</code></pre>
 
   <p class="note">The shorthand is used to keep this block at least mildly readable.</p>
 
@@ -132301,10 +132309,10 @@ h6 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; fo
 dir, dd, dl, dt, menu, ol, ul { display: block; }<!-- see also unicode-bidi:isolate rules -->
 li { display: list-item; text-align: match-parent; }<!-- see also unicode-bidi:isolate rules -->
 
-dir, dl, menu, ol, ul { margin-block-start: 1em; margin-block-end: 1em; }
+dir, dl, menu, ol, ul { margin-block: 1em; }
 
 :is(dir, dl, menu, ol, ul) :is(dir, dl, menu, ol, ul) {
-  margin-block-start: 0; margin-block-end: 0;
+  margin-block: 0;
 }
 
 dd { margin-inline-start: 40px; }
@@ -132462,7 +132470,7 @@ table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
 
 table[align=left i] { float: left; }
 table[align=right i] { float: right; }
-table[align=center i] { margin-inline-start: auto; margin-inline-end: auto; }
+table[align=center i] { margin-inline: auto; }
 thead[align=absmiddle i], tbody[align=absmiddle i], tfoot[align=absmiddle i],
 tr[align=absmiddle i], td[align=absmiddle i], th[align=absmiddle i] {
   text-align: center;
@@ -132547,10 +132555,8 @@ table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
 table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
 table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th {
   border-width: 1px;
-  border-block-start-style: none;
-  border-inline-end-style: solid;
-  border-block-end-style: none;
-  border-inline-start-style: solid;
+  border-block-style: none;
+  border-inline-style: solid;
 }
 table[rules=all i] > tr > td, table[rules=all i] > tr > th,
 table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
@@ -132561,26 +132567,20 @@ table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
 }
 
 table[rules=groups i] > colgroup {
-  border-inline-start-width: 1px;
-  border-inline-start-style: solid;
-  border-inline-end-width: 1px;
-  border-inline-end-style: solid;
+  border-inline-width: 1px;
+  border-inline-style: solid;
 }
 table[rules=groups i] > thead,
 table[rules=groups i] > tbody,
 table[rules=groups i] > tfoot {
-  border-block-start-width: 1px;
-  border-block-start-style: solid;
-  border-block-end-width: 1px;
-  border-block-end-style: solid;
+  border-block-width: 1px;
+  border-block-style: solid;
 }
 
 table[rules=rows i] > tr, table[rules=rows i] > thead > tr,
 table[rules=rows i] > tbody > tr, table[rules=rows i] > tfoot > tr {
-  border-block-start-width: 1px;
-  border-block-start-style: solid;
-  border-block-end-width: 1px;
-  border-block-end-style: solid;
+  border-block-width: 1px;
+  border-block-style: solid;
 }</code></pre>
 
 <!--
@@ -132880,10 +132880,8 @@ hr {
   color: gray;
   border-style: inset;
   border-width: 1px;
-  margin-block-start: 0.5em;
-  margin-inline-end: auto;
-  margin-block-end: 0.5em;
-  margin-inline-start: auto;
+  margin-block: 0.5em;
+  margin-inline: auto;
   overflow: hidden;
 }</code></pre>
 
@@ -132932,18 +132930,15 @@ hr[color], hr[noshade] { border-style: solid; }</code></pre>
 
 fieldset {
   display: block;
-  margin-inline-start: 2px;
-  margin-inline-end: 2px;
+  margin-inline: 2px;
   border: groove 2px ThreeDFace;
-  padding-block-start: 0.35em;
-  padding-inline-end: 0.75em;
-  padding-block-end: 0.625em;
-  padding-inline-start: 0.75em;
+  padding-block: 0.35em 0.625em;
+  padding-inline: 0.75em;
   min-inline-size: min-content;
 }
 
 legend {
-  padding-inline-start: 2px; padding-inline-end: 2px;
+  padding-inline: 2px;
 }
 
 legend[align=left i] {