Drop 1st class support for IE9 (Fixes mozilla#7559)

alexgibson · Sep 12, 2019 · d3a2ff4 · d3a2ff4
1 parent 1a7622b
commit d3a2ff4
Show file tree

Hide file tree

Showing 28 changed files with 251 additions and 387 deletions.
diff --git a/bedrock/base/templates/base-article.html b/bedrock/base/templates/base-article.html
@@ -40,7 +40,7 @@
 
 {% block site_js %}
   {{ super() }}
-  <!--[if !lte IE 8]><!-->
+  <!--[if !IE]><!-->
     {{ js_bundle('basic-article') }}
   <!--<![endif]-->
 {% endblock %}

diff --git a/bedrock/base/templates/base-pebbles.html b/bedrock/base/templates/base-pebbles.html
@@ -9,7 +9,7 @@
 
     {{ js_bundle('site') }}
 
-    <!--[if !lte IE 8]><!-->
+    <!--[if !IE]><!-->
     {% block experiments %}{% endblock %}
     <!--<![endif]-->
 
@@ -50,28 +50,30 @@
 
     {{ l10n_css() }}
 
-    <!--[if lte IE 8]>
+    <!--[if lt IE 9]>
       {# Only needed for IE before v9 #}
       <script src="{{ static('js/libs/html5shiv.js') }}"></script>
+    <![endif]-->
 
-      {# Basic styles, only for IE8 and lower #}
+    <!--[if IE]>
+      {# Basic styles, only for IE9 and lower #}
       {% block old_ie_styles %}
       {{ css_bundle('oldIE-pebbles') }}
       {% endblock %}
     <![endif]-->
 
-    <!--[if !lte IE 8]><!-->
-    {# Global styles, hidden from IE8 and lower #}
+    <!--[if !IE]><!-->
+    {# Global styles, hidden from IE9 and lower #}
     {% block site_css %}
       {{ css_bundle('pebbles') }}
     {% endblock %}
 
-    {# Page-specific styles, hidden from IE8 and lower #}
+    {# Page-specific styles, hidden from IE9 and lower #}
     {% block page_css %}{% endblock %}
     <!--<![endif]-->
 
     {% block extrahead %}
-      {# Extra header stuff (scripts, styles, metadata, etc) seen by all browsers. Use the 'page_css' block for CSS you want to hide from IE7 and lower. #}
+      {# Extra header stuff (scripts, styles, metadata, etc) seen by all browsers. Use the 'page_css' block for CSS you want to hide from IE9 and lower. #}
     {% endblock %}
 
     {% block js_pretrack %}{# include JavaScript that must be run pre GA tracking here #}{% endblock %}
@@ -91,29 +93,25 @@
       data-global-fx-out-of-date-banner-confirm="{{ _('Update Firefox') }}"
       {% block string_data %}{% endblock %}></div>
 
-  {% block site_header %}
-    {% include 'includes/protocol/navigation/menu-mozilla/index.html' %}
-  {% endblock %}
-
-  <div id="outer-wrapper">
-    {% block content %}{% endblock %}
-
-    {% block site_footer %}
-      {% include 'includes/site-footer.html' %}
+    {% block site_header %}
+      {% include 'includes/protocol/navigation/menu-mozilla/index.html' %}
     {% endblock %}
-  </div>
 
-  <!--[if IE 9]>
-    {{ js_bundle('matchmedia') }}
-  <![endif]-->
+    <div id="outer-wrapper">
+      {% block content %}{% endblock %}
+
+      {% block site_footer %}
+        {% include 'includes/site-footer.html' %}
+      {% endblock %}
+    </div>
 
     {% block site_js %}
-      <!--[if !lte IE 8]><!-->
+      <!--[if !IE]><!-->
         {{ js_bundle('common') }}
       <!--<![endif]-->
 
-      <!--[if lte IE 8]>
-        {{ js_bundle('common-ie8') }}
+      <!--[if IE]>
+        {{ js_bundle('common-ie') }}
       <![endif]-->
     {% endblock %}
 
@@ -124,7 +122,7 @@
       {% endif %}
     {% endblock %}
 
-    <!--[if !lte IE 8]><!-->
+    <!--[if !IE]><!-->
     {% block js %}{% endblock %}
 
     {% if self.structured_data()|trim|length %}

diff --git a/bedrock/base/templates/base-protocol.html b/bedrock/base/templates/base-protocol.html
@@ -13,12 +13,12 @@
 {% endblock %}
 
 {% block site_js %}
-<!--[if !lte IE 8]><!-->
+<!--[if !IE]><!-->
   {{ js_bundle('common-protocol') }}
 <!--<![endif]-->
 
-<!--[if lte IE 8]>
-  {{ js_bundle('common-ie8') }}
+<!--[if IE]>
+  {{ js_bundle('common-ie') }}
 <![endif]-->
 {% endblock %}
 

diff --git a/bedrock/base/templates/base-resp.html b/bedrock/base/templates/base-resp.html
@@ -9,7 +9,7 @@
 
     {{ js_bundle('site') }}
 
-    <!--[if !lte IE 8]><!-->
+    <!--[if !IE]><!-->
     {% block experiments %}{% endblock %}
     <!--<![endif]-->
 
@@ -50,26 +50,28 @@
 
     {{ l10n_css() }}
 
-    <!--[if lte IE 8]>
+    <!--[if lt IE 9]>
       {# Only needed for IE before v9 #}
       <script src="{{ static('js/libs/html5shiv.js') }}"></script>
+    <![endif]-->
 
-      {# Basic styles, only for IE8 and lower #}
+    <!--[if IE]>
+      {# Basic styles, only for IE9 and lower #}
       {{ css_bundle('oldIE') }}
     <![endif]-->
 
-    <!--[if !lte IE 8]><!-->
-    {# Global styles, hidden from IE8 and lower #}
+    <!--[if !IE]><!-->
+    {# Global styles, hidden from IE9 and lower #}
     {% block site_css %}
       {{ css_bundle('responsive') }}
     {% endblock %}
 
-    {# Page-specific styles, hidden from IE8 and lower #}
+    {# Page-specific styles, hidden from IE9 and lower #}
     {% block page_css %}{% endblock %}
     <!--<![endif]-->
 
     {% block extrahead %}
-      {# Extra header stuff (scripts, styles, metadata, etc) seen by all browsers. Use the 'page_css' block for CSS you want to hide from IE8 and lower. #}
+      {# Extra header stuff (scripts, styles, metadata, etc) seen by all browsers. Use the 'page_css' block for CSS you want to hide from IE9 and lower. #}
     {% endblock %}
 
     {% block js_pretrack %}{# include JavaScript that must be run pre GA tracking here #}{% endblock %}
@@ -127,17 +129,13 @@
 
     </div><!-- close #outer-wrapper -->
 
-    <!--[if IE 9]>
-      {{ js_bundle('matchmedia') }}
-    <![endif]-->
-
     {% block site_js %}
-      <!--[if !lte IE 8]><!-->
+      <!--[if !IE]><!-->
         {{ js_bundle('common') }}
       <!--<![endif]-->
 
-      <!--[if lte IE 8]>
-        {{ js_bundle('common-ie8') }}
+      <!--[if IE]>
+        {{ js_bundle('common-ie') }}
       <![endif]-->
     {% endblock %}
 
@@ -148,7 +146,7 @@
       {% endif %}
     {% endblock %}
 
-    <!--[if !lte IE 8]><!-->
+    <!--[if !IE]><!-->
     {% block js %}{% endblock %}
 
     {% if self.structured_data()|trim|length %}

diff --git a/bedrock/firefox/templates/firefox/election/index.html b/bedrock/firefox/templates/firefox/election/index.html
@@ -18,17 +18,6 @@
 
 {% block body_class %}election{% endblock %}
 
-{% block extrahead %}
-<!--[if lt IE 10]>
-  <style>
-    /* avoid IE9 background calc() bug */
-    .mzp-c-hero.mzp-has-image {
-      background: none !important;
-    }
-  </style>
-<![endif]-->
-{% endblock %}
-
 {% block site_header %}
   {% include 'includes/protocol/navigation/menu-mozilla/index.html' %}
 {% endblock %}

diff --git a/bedrock/firefox/templates/firefox/fights-for-you.de.html b/bedrock/firefox/templates/firefox/fights-for-you.de.html
@@ -16,18 +16,6 @@
   {{ css_bundle('fights-for-you') }}
 {% endblock %}
 
-{% block extrahead %}
-<!--[if lt IE 10]>
-  <style>
-    /* avoid IE9 background calc() bug */
-    .fffy-c-hero,
-    .mzp-c-call-out-compact.fffy-c-footer-callout {
-    background: #2A0140 !important;
-  }
-  </style>
-<![endif]-->
-{% endblock %}
-
 {% block body_id %}fights-for-you{% endblock %}
 
 {% block content %}

diff --git a/bedrock/firefox/templates/firefox/fights-for-you.fr.html b/bedrock/firefox/templates/firefox/fights-for-you.fr.html
@@ -16,18 +16,6 @@
   {{ css_bundle('fights-for-you') }}
 {% endblock %}
 
-{% block extrahead %}
-<!--[if lt IE 10]>
-  <style>
-    /* avoid IE9 background calc() bug */
-    .fffy-c-hero,
-    .mzp-c-call-out-compact.fffy-c-footer-callout {
-    background: #2A0140 !important;
-  }
-  </style>
-<![endif]-->
-{% endblock %}
-
 {% block body_id %}fights-for-you{% endblock %}
 
 {% block content %}

diff --git a/bedrock/firefox/templates/firefox/fights-for-you.html b/bedrock/firefox/templates/firefox/fights-for-you.html
@@ -17,18 +17,6 @@
   {{ css_bundle('fights-for-you') }}
 {% endblock %}
 
-{% block extrahead %}
-<!--[if lt IE 10]>
-  <style>
-    /* avoid IE9 background calc() bug */
-    .fffy-c-hero,
-    .mzp-c-call-out-compact.fffy-c-footer-callout {
-    background: #2A0140 !important;
-  }
-  </style>
-<![endif]-->
-{% endblock %}
-
 {% block body_id %}fights-for-you{% endblock %}
 
 {% block content %}

diff --git a/bedrock/firefox/templates/firefox/home/index-quantum.html b/bedrock/firefox/templates/firefox/home/index-quantum.html
@@ -21,6 +21,12 @@
   {{ css_bundle('firefox-quantum') }}
 {% endblock %}
 
+{% block extrahead %}
+  <!--[if IE 9]><!-->
+    {{ css_bundle('firefox-home-ie9') }}
+  <!--<![endif]-->
+{% endblock %}
+
 {% block body_id %}firefox-home{% endblock %}
 
 {% block content %}
@@ -84,7 +90,7 @@ <h3>{{ _('Faster Page Loading') }}</h3>
         </li>
       </ul>
 
-      <div class="privacy-section-media">
+      <div class="privacy-section-media is-js-dependent">
         {{ lazy_img(image_url='firefox/home/quantum/private-browsing.png', placeholder_url='firefox/home/quantum/spacer.gif', include_highres_image=True, optional_attributes={'alt': '', 'width': '502', 'height': '325'}) }}
         {{ lazy_img(image_url='firefox/home/quantum/tracking-protection.png', placeholder_url='firefox/home/quantum/spacer.gif', include_highres_image=True, optional_attributes={'alt': '', 'width': '503', 'height': '305'}) }}
       </div>
@@ -111,7 +117,7 @@ <h2 class="section-title"><a href="{{ url('firefox.accounts') }}">{{ _('Sync you
         {% endif %}
       </div>
 
-      <div class="sync-section-image">
+      <div class="sync-section-image is-js-dependent">
         {{ lazy_img(image_url='firefox/home/quantum/sync.png', placeholder_url='firefox/home/quantum/spacer.gif', include_highres_image=True, optional_attributes={'alt': _('Image of Gif shared from desktop to mobile using the Send Tab feature.'), 'width': '788', 'height': '571'}) }}
       </div>
     </div>
@@ -203,7 +209,7 @@ <h2 class="section-title">{{ _('30% lighter than Chrome') }}</h2>
             {% endtrans %}
             </p>
           </div>
-          <div class="key-feature-media image">
+          <div class="key-feature-media image is-js-dependent">
             {{ lazy_img(image_url='firefox/home/quantum/less-memory.png', placeholder_url='firefox/home/quantum/spacer.gif', include_highres_image=True, optional_attributes={'alt': '', 'width': '645', 'height': '400'}) }}
           </div>
         </div>
@@ -225,7 +231,7 @@ <h2 class="section-title"><a href="{{ url('firefox.switch') }}">{{ _('Moving bro
           <a href="{{ url('firefox.switch') }}">{{ _('Learn more') }}</a>
         </div>
       </div>
-      <div class="section-media">
+      <div class="section-media is-js-dependent">
         <a href="{{ url('firefox.switch') }}">
           {{ lazy_img(image_url='firefox/home/quantum/switch-to-firefox.png', placeholder_url='firefox/home/quantum/spacer.gif', include_highres_image=True, optional_attributes={'width': '643', 'height': '377'}) }}
         </a>

diff --git a/bedrock/mozorg/templates/mozorg/contribute/contribute-embed.html b/bedrock/mozorg/templates/mozorg/contribute/contribute-embed.html
@@ -12,8 +12,8 @@
 
     <title>Mozilla — {{_('Get Involved: Volunteer Opportunities at Mozilla')}} — mozilla.org</title>
 
-    <!--[if lte IE 8]>
-    <script src="{{ static('js/libs/html5shiv.js') }}"></script>
+    <!--[if lt IE 9]>
+      <script src="{{ static('js/libs/html5shiv.js') }}"></script>
     <![endif]-->
 
     {{ css_bundle('responsive') }}

diff --git a/bedrock/mozorg/templates/mozorg/home/includes/fundraiser.html b/bedrock/mozorg/templates/mozorg/home/includes/fundraiser.html
@@ -2,7 +2,7 @@
  # 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/. -#}
 
-<aside class="c-fundraiser" id="fundraiser">
+<aside class="c-fundraiser is-js-dependent" id="fundraiser">
   <button type="button" class="c-fundraiser-close" id="fundraiser-close"><span>{{ _('Close') }}</span></button>
   <div class="content mzp-l-content">
     <h2 class="c-fundraiser-title">

diff --git a/docs/browser-support.rst b/docs/browser-support.rst
@@ -26,19 +26,19 @@ We deliver enhanced CSS & JS to browsers in our browser support matrix (below).
 
 Basic support consists of no page-specific CSS or JS. Instead, we deliver basic semantic HTML, a universal CSS stylesheet that gets applied to all pages, and a universal JS bundle that only handles downloading Firefox (click a button, get a file), and Google Analytics.
 
-Browser Support Matrix (Updated 20190809)
+Browser Support Matrix (Updated 20190409)
 -----------------------------------------
 
 **The following browsers have enhanced support:**
 
   * All evergreen browsers (Firefox, Chrome, Safari, Edge, Opera, etc.)
-  * IE9 and above.
+  * IE10 and above.
 
 **The following browsers have basic support:**
 
   * All other IE browsers.
 
-Exceptions (Updated 20190809)
+Exceptions (Updated 20190409)
 -----------------------------
 
 Some pages of the website provide critical functionality to older browsers. In particular, the Firefox desktop download funnel enables users on older browsers to get a modern browser. To the extent possible, we try to deliver enhanced experiences to all user agents on these pages.
@@ -48,7 +48,11 @@ Some pages of the website provide critical functionality to older browsers. In p
   * www.mozilla.org/firefox/new/
   * www.mozilla.org/firefox/download/thanks/
 
-Future Support (Updated 20190809)
+.. Note::
+
+    An enhanced experience can be defined as a step above basic support. This can be achieved by delivering extra page-specific CSS or JS to legacy browsers. It does not mean continuing to deliver 1st class support.
+
+Future Support (Updated 20190409)
 ---------------------------------
 
-The audience visiting in IE9 and IE10 is small and growing smaller. In late 2019 these browsers will be moved to the basic support list.
+Since IE10 does not support conditional comments (the mechanism currently used to deliver basic support to old IE browsers), in the future bedrock will adopt a universal JS feature detection snippet. This snippet will be used to limit the execution of JS on older browsers, delivering a better degraded experience.
diff --git a/docs/stub-attribution.rst b/docs/stub-attribution.rst
@@ -82,7 +82,7 @@ the page template where an experiment exists:
 
     {% block stub_attribution %}
       {% if settings.STUB_ATTRIBUTION_RATE %}
-        <!--[if !lte IE 8]><!-->
+        <!--[if !IE]><!-->
         {{ js_bundle('stub-attribution-custom') }}
         {{ js_bundle('my-page-experiment-script') }}
         <!--<![endif]-->