diff --git a/.stylelintrc.json b/.stylelintrc.json index 438f12c76..06dfb736a 100644 --- a/.stylelintrc.json +++ b/.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": [ diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c04173d3..7d02c6556 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/assets/js/protocol/footer.js b/assets/js/protocol/footer.js index 45746fd8c..d52afaac7 100644 --- a/assets/js/protocol/footer.js +++ b/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); } } diff --git a/assets/js/protocol/menu.js b/assets/js/protocol/menu.js index 2c066d715..87fde65d5 100644 --- a/assets/js/protocol/menu.js +++ b/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(); diff --git a/assets/js/protocol/navigation.js b/assets/js/protocol/navigation.js index 70f73491e..9f76b847f 100644 --- a/assets/js/protocol/navigation.js +++ b/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(); diff --git a/assets/js/protocol/supports.js b/assets/js/protocol/supports.js index 171995cf0..db41c2525 100644 --- a/assets/js/protocol/supports.js +++ b/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'; }()); /** diff --git a/assets/js/protocol/utils.js b/assets/js/protocol/utils.js index 4dc9cf68f..996724fae 100644 --- a/assets/js/protocol/utils.js +++ b/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 diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss index b00601d8c..9c63ad4bb 100644 --- a/assets/sass/protocol/base/elements/_forms.scss +++ b/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; diff --git a/assets/sass/protocol/base/elements/_reset.scss b/assets/sass/protocol/base/elements/_reset.scss index 9d88c1db6..008085bb3 100644 --- a/assets/sass/protocol/base/elements/_reset.scss +++ b/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 { diff --git a/assets/sass/protocol/components/_menu.scss b/assets/sass/protocol/components/_menu.scss index a06a428f1..d198ea78b 100644 --- a/assets/sass/protocol/components/_menu.scss +++ b/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; diff --git a/assets/sass/protocol/components/_navigation.scss b/assets/sass/protocol/components/_navigation.scss index 7fa695b6a..5ae65eb03 100644 --- a/assets/sass/protocol/components/_navigation.scss +++ b/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 */ + } } // * -------------------------------------------------------------------------- */