STRF-4599: Remove Modernizr

* Modernizr is a blocking script that has very little benefit for us. Removing this
  script improves page responsiveness.
* We used Modernizr via the css classes `csscolumns`, `flexbox`, `objectfit`, and `js`.
* The `csscolumns` class was used for productMasonry for older browsers, but since then
  all of our supported browsers support css columns. There is one small problem with
  Firefox: it does not support break-inside, but it does support page-break-inside,
  which does the same thing. See https://caniuse.com/#feat=multicolumn
* The `flexbox` class is unused
* The `objectfit` class is used by carousel. Reimplmented without using Modernizer.
  The previous implmentation put a background image on the wrapper div and then
  hid it if object-fit is supported. The new implementation does not put the background
  image on the wrapper div by default, but instead assumes that your browser supports
  object-fit (all ours do except for IE). For IE, we use javascript to copy the image
  source from the image tag to the background image of the wrapper div and then hide
  the image.
* The `js` class is used for a few things in css, so mimic this behavior with a simple
  inline script.

assets/js/theme/common/carousel.js

@@ -7,4 +7,16 @@ export default function () {
     if ($carousel.length) {
         $carousel.slick();
     }
+
+    // Alternative image styling for IE, which doesn't support objectfit
+    if (typeof document.documentElement.style.objectFit === 'undefined') {
+        $('.heroCarousel-slide').each(() => {
+            const $container = $(this);
+            const imgUrl = $container.find('img').data('lazy');
+
+            if (imgUrl) {
+                $container.css('backgroundImage', `url(${imgUrl})`).addClass('compat-object-fit');
+            }
+        });
+    }
 }

assets/scss/components/stencil/heroCarousel/_heroCarousel.scss

@@ -4,9 +4,10 @@
 // Purpose: Styles the hero carousel component, which basically adds extras to the
 // vendor slick carousel, to specifically display hero images.
 //
-// 1. Hide the actual image element to allow background-size: cover treatment on
-//    large screens to scale image. Use visibility because the JS uses the height
-//    to set the slide size. (For browsers with object-fit only)
+// 1. Use object-fit on the image tag to keep aspect ratio and cover the space
+//    created by the outer div. The JS will detect browsers that do not support
+//    object-fit and instead copy the image src to a the background-image of the
+//    wrapper div and add the compat-object-fit class.
 //
 // 2. With JS on, minimise the jump in content as you progressively enhance the
 //    slider. Slowly fade and slide the height, instead of a jump in collapsing
@@ -76,38 +77,33 @@
 }
 
 .heroCarousel-slide {
-    background-position: 50%;
-    background-repeat: no-repeat;
-    background-size: cover;
     position: relative;
-
     a {
         text-decoration: none;
     }
-}
-
-.objectfit .heroCarousel-slide {
-    // scss-lint:disable ImportantRule
-    background-image: none !important;
-}
 
-.heroCarousel-slide--stretch {
-    @include breakpoint("large") { // 4
-        background-size: 100% 100%;
+    .heroCarousel-image {
+        @include breakpoint("medium") {
+            object-fit: cover; // 1
+            max-height: remCalc(600px);
+            width: 100%;
+        }
     }
-}
 
-.heroCarousel-image {
-    @include breakpoint("medium") {
-        max-height: remCalc(600px);
-        object-fit: cover;
-        width: 100%;
-    }
-}
+    &.compat-object-fit { // 1
+        background-size: cover;
+        background-position: 50%;
+        background-repeat: no-repeat;
 
-.no-objectfit .heroCarousel-image {
-    @include breakpoint("medium") { // 1
-        visibility: hidden;
+        &.stretch {
+            @include breakpoint("large") { // 4
+                background-size: 100% 100%;
+            }
+        }
+
+        .heroCarousel-image {
+            opacity: 0;
+        }
     }
 }
 

assets/scss/layouts/products/_productGrid.scss

@@ -61,7 +61,6 @@
 // Purpose: Display products in a masonry grid, with a display inline-block for
 // older browsers that don't support css multicolumn
 //
-// 1. Some older browser support. This class comes from Modernizr
 // -----------------------------------------------------------------------------
 
 .productMasonry {
@@ -81,6 +80,7 @@
 
     .product {
         break-inside: avoid;
+        page-break-inside: avoid; // for firefox
         display: block;
         margin-bottom: spacing("double");
         padding: 0;
@@ -90,24 +90,6 @@
     .card {
         margin: 0;
     }
-
-    .no-csscolumns & { // 1
-        @include u-listBullets("none");
-        @include grid-row($behavior: "nest");
-        font-size: 0;
-
-        // scss-lint:disable SelectorDepth, NestingDepth
-        .product {
-            @include grid-column(3, $float: none);
-            display: inline-block;
-            font-size: fontSize("base"); // 1
-            vertical-align: top;
-        }
-
-        .card {
-            margin: 0;
-        }
-    }
 }
 
 

templates/components/carousel.html

@@ -10,8 +10,7 @@
     }'>
     {{#each carousel.slides}}
     <a href="{{url}}">
-        <div class="heroCarousel-slide {{#if ../theme_settings.homepage_stretch_carousel_images}}heroCarousel-slide--stretch{{/if}}"
-            style="background-image: url({{image}})">
+        <div class="heroCarousel-slide {{#if ../theme_settings.homepage_stretch_carousel_images}}stretch{{/if}}">
             <img class="heroCarousel-image" data-lazy="{{image}}" alt="{{alt_text}}" title="{{alt_text}}""
              {{#if image_width}}width="{{image_width}}"{{/if}} {{#if image_height}}height="{{image_height}}"{{/if}} />
             {{#if heading}}

templates/layout/amp-iframe.html

@@ -9,7 +9,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
         {{{stylesheet '/assets/css/theme.css'}}}
         {{ getFontsCollection }}
-        <script src="{{cdn 'assets/modernizr-custom.js'}}"></script>
+
+        <script>
+            // Change document class from no-js to js so we can detect this in css
+            document.documentElement.className = 'js';
+        </script>
 
         {{{ head.scripts }}}
 

templates/layout/base.html

@@ -9,7 +9,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
         {{{stylesheet '/assets/css/theme.css'}}}
         {{ getFontsCollection }}
-        <script src="{{cdn 'assets/modernizr-custom.js'}}"></script>
+
+        <script>
+            // Change document class from no-js to js so we can detect this in css
+            document.documentElement.className = 'js';
+        </script>
 
         {{{head.scripts}}}
         {{{head.rsslinks}}}