Use :where() in evergreen.css, remove text-size-adjust

Author: jonathantneal

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 npm-debug.log
+yarn.lock
 .*
 !.editorconfig
 !.gitignore

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changes to @csstools/normalize.css
 
+### HEAD
+
+- Changed: Evergreen variations of normalize.css contribute no specificity.
+- Removed: `fieldset` padding in Firefox is no longer needed.
+- Removed: `text-size-adjust` is no longer needed.
+
 ### 11.0.1 (August 20, 2020)
 
 - Fixed: Used case-insensitive attribute selectors in the evergreen variations.

evergreen.css

@@ -3,12 +3,10 @@
 
 /**
  * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
-html {
+:where(html) {
   line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -19,9 +17,10 @@ html {
  * `article` contexts in Chrome, Edge, Firefox, and Safari.
  */
 
-h1 {
+:where(h1) {
   font-size: 2em;
-  margin: 0.67em 0;
+  margin-block-end: 0.67em;
+  margin-block-start: 0.67em;
 }
 
 /* Grouping content
@@ -31,20 +30,17 @@ h1 {
  * Remove the margin on nested lists in Chrome, Edge, and Safari.
  */
 
-dl dl,
-dl ol,
-dl ul,
-ol dl,
-ul dl {
-  margin: 0;
+:where(dl :is(dl, ol, ul), :is(ol, ul) dl) {
+  margin-block-end: 0;
+  margin-block-start: 0;
 }
 
 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Correct the inheritance of border color in Firefox.
  */
 
-hr {
+:where(hr) {
   box-sizing: content-box; /* 1 */
   color: inherit; /* 2 */
   height: 0; /* 1 */
@@ -55,7 +51,7 @@ hr {
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-pre {
+:where(pre) {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
@@ -67,7 +63,7 @@ pre {
  * Add the correct text decoration in Safari.
  */
 
-abbr[title] {
+:where(abbr[title]) {
   text-decoration: underline;
   text-decoration: underline dotted;
 }
@@ -76,8 +72,7 @@ abbr[title] {
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
 
-b,
-strong {
+:where(b, strong) {
   font-weight: bolder;
 }
 
@@ -86,9 +81,7 @@ strong {
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 
-code,
-kbd,
-samp {
+:where(code, kbd, samp) {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
@@ -97,7 +90,7 @@ samp {
  * Add the correct font size in all browsers.
  */
 
-small {
+:where(small) {
   font-size: 80%;
 }
 
@@ -108,7 +101,7 @@ small {
  * Add the correct display in iOS 4-7.
  */
 
-audio:not([controls]) {
+:where(audio:not([controls])) {
   display: none;
   height: 0;
 }
@@ -121,7 +114,7 @@ audio:not([controls]) {
  * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
  */
 
-table {
+:where(table) {
   border-color: inherit; /* 1 */
   text-indent: 0; /* 2 */
 }
@@ -133,60 +126,47 @@ table {
  * Remove the margin on controls in Safari.
  */
 
-button,
-input,
-select {
+:where(button, input, select) {
   margin: 0;
 }
 
 /**
  * Remove the inheritance of text transform in Firefox.
  */
 
-button {
+:where(button) {
   text-transform: none;
 }
 
 /**
  * Correct the inability to style buttons in iOS and Safari.
  */
 
-button,
-[type="button" i],
-[type="reset" i],
-[type="submit" i] {
+:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
   -webkit-appearance: button;
 }
 
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
 /**
  * Add the correct vertical alignment in Chrome, Edge, and Firefox.
  */
 
-progress {
+:where(progress) {
   vertical-align: baseline;
 }
 
 /**
  * Remove the inheritance of text transform in Firefox.
  */
 
-select {
+:where(select) {
   text-transform: none;
 }
 
 /**
  * Remove the margin in Firefox and Safari.
  */
 
-textarea {
+:where(textarea) {
   margin: 0;
 }
 
@@ -195,7 +175,7 @@ textarea {
  * 2. Correct the outline style in Safari.
  */
 
-[type="search" i] {
+:where(input[type="search" i]) {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
@@ -204,16 +184,15 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Safari.
  */
 
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
+:where(input::-webkit-inner-spin-button, input::-webkit-outer-spin-button) {
   height: auto;
 }
 
 /**
  * Correct the text style of placeholders in Chrome, Edge, and Safari.
  */
 
-::-webkit-input-placeholder {
+:where(input::-webkit-input-placeholder) {
   color: inherit;
   opacity: 0.54;
 }
@@ -222,7 +201,7 @@ textarea {
  * Remove the inner padding in Chrome, Edge, and Safari on macOS.
  */
 
-::-webkit-search-decoration {
+:where(input[type="search" i]::-webkit-search-decoration) {
   -webkit-appearance: none;
 }
 
@@ -231,7 +210,7 @@ textarea {
  * 2. Change font properties to `inherit` in Safari.
  */
 
-::-webkit-file-upload-button {
+:where(input[type="file" i]::-webkit-file-upload-button) {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
@@ -240,7 +219,7 @@ textarea {
  * Remove the inner border and padding of focus outlines in Firefox.
  */
 
-::-moz-focus-inner {
+:where(:is(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner) {
   border-style: none;
   padding: 0;
 }
@@ -249,15 +228,15 @@ textarea {
  * Restore the focus outline styles unset by the previous rule in Firefox.
  */
 
-:-moz-focusring {
+:where(:is(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i])):-moz-focusring) {
   outline: 1px dotted ButtonText;
 }
 
 /**
  * Remove the additional :invalid styles in Firefox.
  */
 
-:-moz-ui-invalid {
+:where(:-moz-ui-invalid) {
   box-shadow: none;
 }
 
@@ -268,7 +247,7 @@ textarea {
  * Add the correct styles in Safari.
  */
 
-dialog {
+:where(dialog) {
   background-color: white;
   border: solid;
   color: black;
@@ -285,14 +264,14 @@ dialog {
   width: fit-content;
 }
 
-dialog:not([open]) {
+:where(dialog:not([open])) {
   display: none;
 }
 
 /*
  * Add the correct display in all browsers.
  */
 
-summary {
+:where(summary) {
   display: list-item;
 }

normalize.css

@@ -3,14 +3,10 @@
 
 /**
  * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
  */
 
 html {
   line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -216,14 +212,6 @@ button,
   -webkit-appearance: button;
 }
 
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
 /**
  * Show the overflow in Edge 18- and IE.
  */

opinionated.css

@@ -3,14 +3,10 @@
 
 /**
  * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in
- *    IE on Windows Phone and in iOS.
  */
 
 html {
   line-height: 1.15; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -224,14 +220,6 @@ button,
   -webkit-appearance: button;
 }
 
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
 /**
  * Show the overflow in Edge 18- and IE.
  */

opinionated.evergreen.css

@@ -3,12 +3,10 @@
 
 /**
  * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
 html {
   line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /* Sections
@@ -166,14 +164,6 @@ button,
   -webkit-appearance: button;
 }
 
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
 /**
  * Add the correct vertical alignment in Chrome, Edge, and Firefox.
  */

package.json

@@ -25,7 +25,7 @@
     "test": "stylelint normalize.css evergreen.css opinionated.css opinionated.evergreen.css"
   },
   "devDependencies": {
-    "stylelint": "^13.6.1",
+    "stylelint": "^13.8.0",
     "stylelint-config-standard": "^20.0.0"
   },
   "stylelint": {