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

alexgibson · Sep 4, 2019 · d9e0881 · d9e0881
1 parent 651e1a2
commit d9e0881
Show file tree

Hide file tree

Showing 25 changed files with 219 additions and 332 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/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/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 %}
 
     {# Bug 1381776 #}

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 %}
 
     {# Bug 1381776 #}

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/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.html b/bedrock/firefox/templates/firefox/home/index.html
@@ -21,6 +21,12 @@
   {{ css_bundle('firefox-home') }}
 {% endblock %}
 
+{% block extrahead %}
+  <!--[if IE 9]><!-->
+    {{ css_bundle('firefox-home-ie9') }}
+  <!--<![endif]-->
+{% endblock %}
+
 {% block body_id %}firefox-home{% endblock %}
 {% block body_attrs %}{% if variation %}data-variant="{{ variation }}"{% endif %}{% endblock %}
 
@@ -85,7 +91,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/private-browsing.png', placeholder_url='firefox/home/spacer.gif', include_highres_image=True, optional_attributes={'alt': '', 'width': '502', 'height': '325'}) }}
         {{ lazy_img(image_url='firefox/home/tracking-protection.png', placeholder_url='firefox/home/spacer.gif', include_highres_image=True, optional_attributes={'alt': '', 'width': '503', 'height': '305'}) }}
       </div>
@@ -112,7 +118,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/sync.png', placeholder_url='firefox/home/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>
@@ -204,7 +210,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/less-memory.png', placeholder_url='firefox/home/spacer.gif', include_highres_image=True, optional_attributes={'alt': '', 'width': '645', 'height': '400'}) }}
           </div>
         </div>
@@ -226,7 +232,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/switch-to-firefox.png', placeholder_url='firefox/home/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/docs/browser-support.rst b/docs/browser-support.rst
@@ -4,9 +4,9 @@
 
 .. _browser_support:
 
-=================
+===============
 Browser Support
-=================
+===============
 
 We seek to provide usable experiences of our most important web content to all user agents. But newer browsers are far more capable than older browsers, and the capabilities they provide are valuable to developers and site visitors. We **will** take advantage of modern browser capabilities. Older browsers **will** have a different experience of the website than newer browsers. We will strike this balance by generally adhering to the core principles of `Progressive Enhancement <https://en.wikipedia.org/wiki/Progressive_enhancement>`_::
 
@@ -20,33 +20,39 @@ We seek to provide usable experiences of our most important web content to all u
 Some website experiences may require us to deviate from these principles -- imagine *a marketing campaign page built under timeline pressure to deliver novel functionality to a particular locale for a short while* -- but those will be exceptions and rare.
 
 Technical details
--------------------
+-----------------
 
 We deliver enhanced CSS & JS to browsers in our browser support matrix (below). We deliver basic support to all other user agents.
 
 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)
--------------------
+-----------------------------------------
 
 **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.
 
 **The following pages get enhanced support for a longer list of user agents:**
 
   * www.mozilla.org/firefox/new/
   * www.mozilla.org/firefox/download/thanks/
 
-Future Support (Updated 20190809)
--------------------
-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.
+.. 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)
+---------------------------------
+
+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]-->