Remove dead browser-support JS, fix a matchMedia support-detect bug

.stylelintrc.json

@@ -5,8 +5,6 @@
         "declaration-no-important": true,
         "color-function-notation": "legacy",
         "alpha-value-notation": "number",
-        "property-no-vendor-prefix": null,
-        "value-no-vendor-prefix": null,
         "at-rule-empty-line-before": null,
         "no-descending-specificity": null,
         "value-keyword-case": [

CHANGELOG.md

@@ -13,6 +13,11 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust
 * (breaking) Updated the supported browser matrix to Firefox ESR, Safari 15.6+, and evergreen browsers (`browserslist` in `package.json`).
 * (breaking) Removed the Babel `targets: { ie: '10' }` override in every webpack config (docs site, npm package, and test bundle). The compiled JS now targets the `browserslist` matrix above instead of IE10.
 * (breaking) Remove support for vendor prefixing (#957)
+* Removed dead CSS for browsers outside the new matrix: unwrapped the two remaining `@supports` feature-query blocks (`position: sticky` in Navigation, `display: flex` in Menu), removed the `&::-ms-expand` selector in form Select styles, and removed the HTML5-elements-to-`display: block` reset in `_reset.scss` (every element it covered has had correct default display in every supported browser for years)
+* Replaced `-webkit-appearance` with the standard unprefixed `appearance` property in two form resets, and re-enabled the `property-no-vendor-prefix`/`value-no-vendor-prefix` stylelint rules
+* Removed stale "in IE"/"in Edge and IE" references from comments in `_forms.scss` (the resets they document are left in place)
+* Removed the IE8 `Element.matches()` polyfill from `utils.js`, and the `addListener`-else-`addEventListener` `MediaQueryList` fallbacks in `navigation.js`, `menu.js`, and `footer.js`
+* Fixed a bug in `MzpSupports.matchMedia`: it required `window.matchMedia('all').addListener`, the deprecated legacy `MediaQueryList` API, so it would incorrectly report `matchMedia` as unsupported (silently disabling sticky navigation and other features gated on it) in any browser that removes the deprecated method while keeping standard `matchMedia`
 
 ### Typography
 

assets/js/protocol/footer.js

@@ -28,11 +28,7 @@ MzpFooter.init = () => {
                 window.MzpDetails.init(footerHeadings);
             }
 
-            if (window.matchMedia('all').addEventListener) {
-                _mqWide.addEventListener('change', screenChange, false);
-            } else if (window.matchMedia('all').addListener) {
-                _mqWide.addListener(screenChange);
-            }
+            _mqWide.addEventListener('change', screenChange, false);
         }
     }
 

assets/js/protocol/menu.js

@@ -44,11 +44,7 @@ MzpMenu.close = () => {
     const current = document.querySelectorAll('.mzp-c-menu-category.mzp-is-selected');
 
     for (let i = 0; i < current.length; i++) {
-        // The following classes must be removed in the correct order
-        // to work around a bug in bedrock's classList polyfill for IE9.
-        // https://github.com/mozilla/bedrock/issues/6221 :/
-        current[i].classList.remove('mzp-is-selected');
-        current[i].classList.remove('mzp-is-animated');
+        current[i].classList.remove('mzp-is-selected', 'mzp-is-animated');
 
         current[i].querySelector('.mzp-c-menu-title').setAttribute('aria-expanded', false);
     }
@@ -92,11 +88,7 @@ MzpMenu.toggle = (el) => {
     if (!state) {
         MzpMenu.open(el);
     } else {
-        // The following classes must be removed in the correct order
-        // to work around a bug in bedrock's classList polyfill for IE9.
-        // https://github.com/mozilla/bedrock/issues/6221 :/
-        el.classList.remove('mzp-is-selected');
-        el.classList.remove('mzp-is-animated');
+        el.classList.remove('mzp-is-selected', 'mzp-is-animated');
         el.querySelector('.mzp-c-menu-title').setAttribute('aria-expanded', false);
 
         if (typeof _options.onMenuClose === 'function') {
@@ -205,11 +197,7 @@ MzpMenu.handleState = () => {
         }
     }
 
-    if (window.matchMedia('all').addEventListener) {
-        _mqWideNav.addEventListener('change', menuBind, false);
-    } else if (window.matchMedia('all').addListener) {
-        _mqWideNav.addListener(menuBind);
-    }
+    _mqWideNav.addEventListener('change', menuBind, false);
 
     if (MzpMenu.isWideViewport()) {
         MzpMenu.bindEventsWide();

assets/js/protocol/navigation.js

@@ -104,11 +104,7 @@ MzpNavigation.initSticky = () => {
         }
     }
 
-    if (window.matchMedia('all').addEventListener) {
-        _mqLargeNav.addEventListener('change', makeStickyNav, false);
-    } else if (window.matchMedia('all').addListener) {
-        _mqLargeNav.addListener(makeStickyNav);
-    }
+    _mqLargeNav.addEventListener('change', makeStickyNav, false);
 
     if (MzpNavigation.isLargeViewport()) {
         MzpNavigation.createSticky();

assets/js/protocol/supports.js

@@ -9,7 +9,7 @@ const MzpSupports = {};
 * @return {Boolean} boolean value for if the browser supports matchMedia
 */
 MzpSupports.matchMedia = (function() {
-    return typeof window.matchMedia !== 'undefined' && window.matchMedia('all').addListener;
+    return typeof window.matchMedia !== 'undefined';
 }());
 
 /**

assets/js/protocol/utils.js

@@ -4,26 +4,6 @@
 
 const MzpUtils = {};
 
-/**
- * Element.matches() polyfill (IE8 support)
- * https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
- * - https://vanillajstoolkit.com/polyfills/matches-ie8/
- */
-if (!Element.prototype.matches) {
-    Element.prototype.matches =
-        Element.prototype.matchesSelector ||
-        Element.prototype.mozMatchesSelector ||
-        Element.prototype.msMatchesSelector ||
-        Element.prototype.oMatchesSelector ||
-        Element.prototype.webkitMatchesSelector ||
-        function (s) {
-            const matches = (this.document || this.ownerDocument).querySelectorAll(s);
-            let i = matches.length;
-            while (--i >= 0 && matches.item(i) !== this) { } // eslint-disable-line no-empty
-            return i > -1;
-        };
-}
-
 /**
  * nextUntil
  * @param {Object} el - Element that you want to get the siblings of

assets/sass/protocol/base/elements/_forms.scss

@@ -18,8 +18,8 @@ legend {
     padding: 0;
 }
 
-//  1. Correct the text wrapping in Edge and IE.
-//  2. Correct the color inheritance from `fieldset` elements in IE.
+//  1. Correct the text wrapping.
+//  2. Correct the color inheritance from `fieldset` elements.
 //  3. Remove the padding so developers are not caught out when they zero out
 //    `fieldset` elements in all browsers.
 legend {
@@ -60,7 +60,7 @@ button,
     appearance: auto;
 }
 
-// Remove the default vertical scrollbar in IE 10+.
+// Remove the default vertical scrollbar.
 textarea {
     overflow: auto;
     height: auto;
@@ -74,21 +74,19 @@ textarea {
 }
 
 // Remove the inner padding in Chrome and Safari on macOS.
-/* stylelint-disable-line value-no-vendor-prefix */
 [type='search']::-webkit-search-decoration {
-    -webkit-appearance: none;
+    appearance: none;
 }
 
 // 1. Correct the inability to style clickable types in iOS and Safari.
 // 2. Change font properties to `inherit` in Safari.
-/* stylelint-disable-next-line value-no-vendor-prefix */
 ::-webkit-file-upload-button {
-    -webkit-appearance: button; // 1
+    appearance: auto; // 1
     font: inherit; // 2
 }
 
-// 1. Add the correct box sizing in IE 10.
-// 2. Remove the padding in IE 10.
+// 1. Add the correct box sizing.
+// 2. Remove the padding.
 [type='checkbox'],
 [type='radio'] {
     box-sizing: border-box; // 1
@@ -325,10 +323,6 @@ select {
         }
     }
 
-    &::-ms-expand {
-        display: none;
-    }
-
     &:hover {
         border-color: var(--theme-field-border-color-hover);
         background-image: $url-image-caret-down-link-hover, forms.$select-bg;

assets/sass/protocol/base/elements/_reset.scss

@@ -2,22 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-// Set new HTML5 elements to block or inline-block for older browsers
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section,
-summary {
-    display: block;
-}
-
+// audio, video, and canvas are inline-level by spec in every supported
+// browser; set them to inline-block instead.
 audio,
 video,
 canvas {

assets/sass/protocol/components/_menu.scss

@@ -46,9 +46,10 @@
 
 .mzp-c-menu-category {
     .mzp-c-menu-title {
+        align-items: center;
         border-bottom: 1px solid $color-marketing-gray-30;
         color: var(--theme-body-text-color);
-        display: block;
+        display: flex;
         font-weight: bold;
         margin-bottom: 0;
         min-height: 40px;
@@ -87,13 +88,6 @@
         }
     }
 
-    @supports (display: flex) {
-        .mzp-c-menu-title {
-            align-items: center;
-            display: flex;
-        }
-    }
-
     @media #{$mq-md} {
         @include bidi(((float, left, right),));
         display: inline-block;

assets/sass/protocol/components/_navigation.scss

@@ -41,30 +41,28 @@
 // * -------------------------------------------------------------------------- */
 // Sticky navigation styles
 
-@supports (position: sticky) {
-    html.mzp-has-sticky-navigation {
-        .mzp-c-navigation.mzp-is-sticky {
-            transition: transform 300ms ease-in-out;
-            left: 0;
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-
-            &.mzp-is-scrolling {
-                // Shadow colors are equivalent to $color-ink-90, $color-blue-90, $color-ink-90
-                box-shadow: 0 0 6px 1px rgb(29, 17, 51, 0.04), 0 0 8px 2px rgb(9, 32, 77, 0.12), 0 0 5px -3px rgb(29, 17, 51, 0.12);
-            }
-
-            &.mzp-is-hidden {
-                transform: translate(0, -110%);
-            }
+html.mzp-has-sticky-navigation {
+    .mzp-c-navigation.mzp-is-sticky {
+        transition: transform 300ms ease-in-out;
+        left: 0;
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+
+        &.mzp-is-scrolling {
+            // Shadow colors are equivalent to $color-ink-90, $color-blue-90, $color-ink-90
+            box-shadow: 0 0 6px 1px rgb(29, 17, 51, 0.04), 0 0 8px 2px rgb(9, 32, 77, 0.12), 0 0 5px -3px rgb(29, 17, 51, 0.12);
         }
 
-        // add scroll-offset for anchor links.
-        .mzp-is-anchor-link {
-            scroll-margin-top: 120px; /* stylelint-disable-line property-no-unknown */
+        &.mzp-is-hidden {
+            transform: translate(0, -110%);
         }
     }
+
+    // add scroll-offset for anchor links.
+    .mzp-is-anchor-link {
+        scroll-margin-top: 120px; /* stylelint-disable-line property-no-unknown */
+    }
 }
 
 // * -------------------------------------------------------------------------- */