Merge pull request #631 from alphagov/simplify-legacy-ie-logic

Simplify legacy IE logic
alphagov · Apr 5, 2018 · 938cbf0 · 938cbf0
2 parents f016ee8 + a4043fa
commit 938cbf0
Show file tree

Hide file tree

Showing 21 changed files with 95 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,7 +11,20 @@ Breaking changes:
   `govuk-c-radios--inline` which will automatically make all the radio buttons
   within that block inline.
   (PR [#607](https://github.com/alphagov/govuk-frontend/pull/607))
-- Prefix `$global-images` variable (PR [#617](https://github.com/alphagov/govuk-frontend/pull/615))
+- Prefix `$global-images` variable
+  (PR [#617](https://github.com/alphagov/govuk-frontend/pull/615))
+- Simplified how we build stylesheets that target old versions of IE:
+  - Removed styles that target IE6 and IE7
+  - Replaced IE mixins with a simpler version for targeting IE8 specifically
+    without having to specify versions
+  - Add a new tool mixin to easily exclude styles when targeting IE8
+  - Automatically set $mq-responsive based on the value of the $govuk-is-ie8
+    variable.
+
+  If you are building an IE8 stylesheet for your application you'll need to
+  update it to reference the new variable $govuk-is-ie8 – see the README for
+  details.
+  (PR [#631](https://github.com/alphagov/govuk-frontend/pull/631))
 
 Fixes:
 - Link styles, as well as links within the  back-link, breadcrumbs, button,

diff --git a/README.md b/README.md
@@ -143,7 +143,7 @@ Add the CSS and JavaScript code to your HTML template:
       <link rel="stylesheet" href="assets/govuk-frontend-[latest version].min.css">
     <!--<![endif]-->
     <!--[if IE 8]>
-      <link rel="stylesheet" href="assets/govuk-frontend-oldie-[latest version].min.css">
+      <link rel="stylesheet" href="assets/govuk-frontend-old-ie-[latest version].min.css">
     <![endif]-->
   </head>
   <body>
@@ -164,8 +164,7 @@ For instance, if your application Sass lives in `app.scss`, you might create an
 
 ```SCSS
 // Target IE8
-$govuk-is-ie: true;
-$govuk-ie-version: 8;
+$govuk-is-ie8: true;
 
 @import "app";
 ```

diff --git a/src/all/_all-old-ie.scss b/src/all/_all-old-ie.scss
@@ -1,12 +1,6 @@
-// To enable support for browsers that do not support @media queries,
-// (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
-// Create a separate stylesheet served exclusively to these browsers,
-// meaning @media queries will be rasterized, relying on the cascade itself
-$mq-responsive: false;
-
-// Set is-ie to true to output IE specific styles
-// uses the IE helpers in globals/_helpers.scss
-$govuk-is-ie: true;
-$govuk-ie-version: 8;
+// By setting $govuk-is-ie8 to true, we create a version of the stylesheet that
+// targets IE8 – e.g. conditionally including or excluding styles, and
+// rasterizing media queries.
+$govuk-is-ie8: true;
 
 @import "all";
diff --git a/src/breadcrumbs/_breadcrumbs.scss b/src/breadcrumbs/_breadcrumbs.scss
@@ -7,7 +7,7 @@
 @import "../globals/settings/spacing";
 @import "../globals/settings/measurements";
 
-@import "../globals/tools/legacy-ie";
+@import "../globals/tools/ie8";
 
 @import "../globals/helpers/clearfix";
 @import "../globals/helpers/media-queries";
@@ -102,7 +102,7 @@
       border-color: $chevron-border-colour;
 
       // Fall back to a greater than sign for IE8
-      @include govuk-ie(8) {
+      @include govuk-if-ie8 {
         content: "\003e"; // Greater than sign (>)
         width: auto;
         height: auto;

diff --git a/src/button/_button.scss b/src/button/_button.scss
@@ -1,6 +1,6 @@
 @import "../globals/tools/exports";
 @import "../globals/tools/compatibility";
-@import "../globals/tools/legacy-ie";
+@import "../globals/tools/ie8";
 @import "../globals/tools/iff";
 
 @import "../globals/settings/colours-palette";
@@ -146,7 +146,7 @@
     &:active {
       top: 0;
       box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
-      @include govuk-ie-lte(8) {
+      @include govuk-if-ie8 {
         border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
       }
     }

diff --git a/src/checkboxes/_checkboxes.scss b/src/checkboxes/_checkboxes.scss
@@ -1,4 +1,5 @@
 @import "../globals/tools/exports";
+@import "../globals/tools/ie8";
 
 @import "../fieldset/fieldset";
 @import "../label/label";
@@ -36,7 +37,7 @@
     cursor: pointer;
 
     // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there.
-    @if ($govuk-is-ie == false) or ($govuk-ie-version == 9) {
+    @include govuk-not-ie8 {
       margin: 0;
       opacity: 0;
     }

diff --git a/src/date-input/_date-input.scss b/src/date-input/_date-input.scss
@@ -1,5 +1,4 @@
 @import "../globals/tools/exports";
-@import "../globals/tools/legacy-ie";
 @import "../globals/tools/iff";
 
 @import "../label/label";

diff --git a/src/error-summary/_error-summary.scss b/src/error-summary/_error-summary.scss
@@ -1,6 +1,5 @@
 @import "../globals/tools/exports";
 @import "../globals/tools/compatibility";
-@import "../globals/tools/legacy-ie";
 @import "../globals/tools/iff";
 
 @import "../globals/settings/colours-palette";
@@ -33,11 +32,6 @@
     @include mq($from: tablet) {
       border: $govuk-border-width solid $govuk-error-colour;
     }
-
-    // TODO: Fix IE < 8
-    @include govuk-ie-lte(6) {
-      zoom: 1;
-    }
   }
 
   .govuk-c-error-summary__title {

diff --git a/src/fieldset/_fieldset.scss b/src/fieldset/_fieldset.scss
@@ -1,5 +1,4 @@
 @import "../globals/tools/exports";
-@import "../globals/tools/legacy-ie";
 @import "../globals/tools/iff";
 
 @import "../error-message/error-message";

diff --git a/src/footer/_footer.scss b/src/footer/_footer.scss
@@ -1,6 +1,5 @@
 @import "../globals/tools/exports";
 @import "../globals/tools/compatibility";
-@import "../globals/tools/legacy-ie";
 @import "../globals/tools/iff";
 
 @import "../globals/settings/colours-palette";

diff --git a/src/globals/_common.scss b/src/globals/_common.scss
@@ -4,25 +4,31 @@
 // This means that every component has access to all things within the settings,
 // tools and helpers layers
 
-// Settings
+// Settings - order is important as some settings files rely on others
+@import "settings/paths";
+
+@import "settings/compatibility";
+@import "settings/ie8";
+
+@import "settings/media-queries";
+
 @import "settings/colours-palette";
 @import "settings/colours-organisations";
 @import "settings/colours-applied";
-@import "settings/compatibility";
+
 @import "settings/spacing";
 @import "settings/measurements";
+
 @import "settings/typography-font-stacks";
 @import "settings/typography-font";
 @import "settings/typography-responsive";
-@import "settings/media-queries";
-@import "settings/paths";
 
 // Tools
 @import "tools/compatibility";
 @import "tools/exports";
 @import "tools/file-url";
+@import "tools/ie8";
 @import "tools/iff";
-@import "tools/legacy-ie";
 @import "tools/px-to-em";
 
 // Helpers

diff --git a/src/globals/core/_lists.scss b/src/globals/core/_lists.scss
@@ -57,10 +57,6 @@
   }
 
   %govuk-list--number {
-    // TODO: Fix IE < 8
-    @include govuk-ie-lte(7) {
-      padding-left: $govuk-spacing-scale-6; //used to be 28
-    }
     padding-left: $govuk-spacing-scale-4;
     list-style-type: decimal;
   }

diff --git a/src/globals/helpers/_clearfix.scss b/src/globals/helpers/_clearfix.scss
@@ -5,9 +5,6 @@
     display: block;
     clear: both;
   }
-  @include govuk-ie-lte(7) {
-    zoom: 1;
-  }
 }
 
 @include govuk-exports("clearfix") {

diff --git a/src/globals/objects/_width-container.scss b/src/globals/objects/_width-container.scss
@@ -2,7 +2,7 @@
   // Limit the width of the container to the page width
   max-width: $govuk-page-width;
 
-  @include govuk-ie-lte(8) {
+  @include govuk-if-ie8 {
     width: $govuk-page-width;
   }
 

diff --git a/src/globals/settings/_ie8.scss b/src/globals/settings/_ie8.scss
@@ -0,0 +1,4 @@
+// Whether the stylesheet being built is targeting Internet Explorer 8. Used by
+// the ie8 mixin tools and in other settings.
+// @type Bool
+$govuk-is-ie8: false !default;
diff --git a/src/globals/settings/_media-queries.scss b/src/globals/settings/_media-queries.scss
@@ -37,7 +37,11 @@
 // (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false
 // Create a separate stylesheet served exclusively to these browsers,
 // meaning @media queries will be rasterized, relying on the cascade itself
-$mq-responsive: true;
+@if ($govuk-is-ie8) {
+  $mq-responsive: false;
+} @else {
+  $mq-responsive: true;
+}
 
 // Name your breakpoints in a way that creates a ubiquitous language
 // across team members. It will improve communication between

diff --git a/src/globals/tools/_ie8.scss b/src/globals/tools/_ie8.scss
@@ -0,0 +1,46 @@
+// Include IE8 settings where these tools are used directly within a component
+@import "../settings/ie8";
+
+/// Conditionally include rules only for IE8
+///
+/// Only output the CSS passed to the mixin if the $govuk-is-ie8 variable is
+/// set to true, which means the rules should only be outputted if compiling an
+/// IE8 specific stylesheet.
+///
+/// @example scss - Usage
+///
+///   .foo {
+///     min-width: 100px;
+///     // Specify width for IE8 only
+///     @include govuk-is-ie8 {
+///       width: 100px;
+///     }
+///   }
+@mixin govuk-if-ie8 {
+  @if $govuk-is-ie8 {
+    @content;
+  }
+}
+
+/// Conditionally exclude rules for IE8
+///
+/// Only output the CSS passed to the mixin if the $govuk-is-ie8 variable is
+/// not set to true, which means the rules should be excluded when compiling
+/// an IE8 specific stylesheet.
+///
+/// @example scss - Usage
+///
+///   .foo {
+///     font-weight: bold;
+///
+///     // Enhance foo only for modern browsers (not IE8)
+///     @include govuk-not-ie8 {
+///       font-family: "Comic Sans MS", "Curlz MT" cursive, sans-serif;
+///       color: #FF69B4;
+///     }
+///   }
+@mixin govuk-not-ie8 {
+  @if not $govuk-is-ie8 {
+    @content;
+  }
+}
diff --git a/src/globals/tools/_legacy-ie.scss b/src/globals/tools/_legacy-ie.scss
diff --git a/src/panel/_panel.scss b/src/panel/_panel.scss
@@ -1,5 +1,4 @@
 @import "../globals/tools/exports";
-@import "../globals/tools/legacy-ie";
 @import "../globals/tools/iff";
 
 @import "../globals/settings/colours-palette";

diff --git a/src/radios/_radios.scss b/src/radios/_radios.scss
@@ -1,4 +1,5 @@
 @import "../globals/tools/exports";
+@import "../globals/tools/ie8";
 
 @import "../fieldset/fieldset";
 @import "../label/label";
@@ -37,7 +38,7 @@
     cursor: pointer;
 
     // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there. Double colons get ommited by IE8.
-    @if ($govuk-is-ie == false) or ($govuk-ie-version == 9) {
+    @include govuk-not-ie8 {
       margin: 0;
       opacity: 0;
     }

diff --git a/src/tag/_tag.scss b/src/tag/_tag.scss
@@ -1,5 +1,4 @@
 @import "../globals/tools/exports";
-@import "../globals/tools/legacy-ie";
 @import "../globals/tools/iff";
 
 @import "../globals/settings/colours-palette";