From 165d82762751d2bd6a9c79ac05f9afbdc0ab8994 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 5 Apr 2018 09:27:15 +0100 Subject: [PATCH 1/9] Remove conditional styles for IE7, IE6. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit GOV.UK Frontend will not support IE6 or IE7 - we don’t test with those browsers, and we don’t provide any guidance on building stylesheets to target them. Removing these rules simplifies the codebase and allows us to simplify the ‘legacy IE’ logic by removing reference to versions. --- src/error-summary/_error-summary.scss | 5 ----- src/globals/core/_lists.scss | 4 ---- src/globals/helpers/_clearfix.scss | 3 --- 3 files changed, 12 deletions(-) diff --git a/src/error-summary/_error-summary.scss b/src/error-summary/_error-summary.scss index 1125cb266b..2dbfccd02d 100644 --- a/src/error-summary/_error-summary.scss +++ b/src/error-summary/_error-summary.scss @@ -33,11 +33,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/globals/core/_lists.scss b/src/globals/core/_lists.scss index 654e0b6918..367388b78b 100644 --- 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 index 25aa1978fe..8f91ad068f 100644 --- 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") { From e701900838a30d5462212defaff557389c826a65 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 5 Apr 2018 09:31:34 +0100 Subject: [PATCH 2/9] Simplify legacy IE tool mixins Removing the $version check and updating the mixins to be specific to IE8 makes them easier to use and simplifies the codebase. --- src/all/_all-old-ie.scss | 7 ++--- src/breadcrumbs/_breadcrumbs.scss | 2 +- src/button/_button.scss | 2 +- src/checkboxes/_checkboxes.scss | 2 +- src/globals/objects/_width-container.scss | 2 +- src/globals/tools/_legacy-ie.scss | 37 +++++++++++++---------- src/radios/_radios.scss | 2 +- 7 files changed, 29 insertions(+), 25 deletions(-) diff --git a/src/all/_all-old-ie.scss b/src/all/_all-old-ie.scss index 0b17b1730b..8dcf3379d7 100644 --- a/src/all/_all-old-ie.scss +++ b/src/all/_all-old-ie.scss @@ -4,9 +4,8 @@ // 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. +$govuk-is-ie8: true; @import "all"; diff --git a/src/breadcrumbs/_breadcrumbs.scss b/src/breadcrumbs/_breadcrumbs.scss index ac0a30416e..1a947015bf 100644 --- a/src/breadcrumbs/_breadcrumbs.scss +++ b/src/breadcrumbs/_breadcrumbs.scss @@ -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 index 51a620bc76..159f4b0732 100644 --- a/src/button/_button.scss +++ b/src/button/_button.scss @@ -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 index 97521cf0d1..36ccd6a11d 100644 --- a/src/checkboxes/_checkboxes.scss +++ b/src/checkboxes/_checkboxes.scss @@ -36,7 +36,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) { + @if not $govuk-is-ie8 { margin: 0; opacity: 0; } diff --git a/src/globals/objects/_width-container.scss b/src/globals/objects/_width-container.scss index 6ecc99aac8..3064673653 100644 --- 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/tools/_legacy-ie.scss b/src/globals/tools/_legacy-ie.scss index 5515faf52e..f07b39366b 100644 --- a/src/globals/tools/_legacy-ie.scss +++ b/src/globals/tools/_legacy-ie.scss @@ -1,19 +1,24 @@ -// You can use these mixins to output CSS for specific versions of legacy -// Internet Explorer. -$govuk-is-ie: false !default; +/// Whether the stylesheet being compiled is targeting IE8 +/// @type bool +$govuk-is-ie8: false !default; -@mixin govuk-ie-lte($version) { - @if $govuk-is-ie { - @if $govuk-ie-version <= $version { - @content; - } - } -} - -@mixin govuk-ie($version) { - @if $govuk-is-ie { - @if $govuk-ie-version == $version { - @content; - } +/// 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; } } diff --git a/src/radios/_radios.scss b/src/radios/_radios.scss index d444fadc1d..3546aa105f 100644 --- a/src/radios/_radios.scss +++ b/src/radios/_radios.scss @@ -37,7 +37,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) { + @if not $govuk-is-ie8 { margin: 0; opacity: 0; } From e1ac55a83b9c85901c20259e6871cb7a77ab433f Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 5 Apr 2018 09:33:09 +0100 Subject: [PATCH 3/9] Add negated helper to exclude rules for IE8 For consistency, introduce a negated helper that allows rules to be excluded when compiling to target IE8, rather than the current approach of referring to the setting directly. --- src/checkboxes/_checkboxes.scss | 3 ++- src/globals/tools/_legacy-ie.scss | 23 +++++++++++++++++++++++ src/radios/_radios.scss | 3 ++- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/src/checkboxes/_checkboxes.scss b/src/checkboxes/_checkboxes.scss index 36ccd6a11d..dc42ed903d 100644 --- a/src/checkboxes/_checkboxes.scss +++ b/src/checkboxes/_checkboxes.scss @@ -1,4 +1,5 @@ @import "../globals/tools/exports"; +@import "../globals/tools/legacy-ie"; @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 not $govuk-is-ie8 { + @include govuk-not-ie8 { margin: 0; opacity: 0; } diff --git a/src/globals/tools/_legacy-ie.scss b/src/globals/tools/_legacy-ie.scss index f07b39366b..910be92126 100644 --- a/src/globals/tools/_legacy-ie.scss +++ b/src/globals/tools/_legacy-ie.scss @@ -22,3 +22,26 @@ $govuk-is-ie8: false !default; @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/radios/_radios.scss b/src/radios/_radios.scss index 3546aa105f..2c4818eed1 100644 --- a/src/radios/_radios.scss +++ b/src/radios/_radios.scss @@ -1,4 +1,5 @@ @import "../globals/tools/exports"; +@import "../globals/tools/legacy-ie"; @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 not $govuk-is-ie8 { + @include govuk-not-ie8 { margin: 0; opacity: 0; } From 860ebcd2fee219d5ad391ca9d16898d67b426615 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 5 Apr 2018 09:40:42 +0100 Subject: [PATCH 4/9] Remove unnecessary imports of the IE8 tools --- src/date-input/_date-input.scss | 1 - src/error-summary/_error-summary.scss | 1 - src/fieldset/_fieldset.scss | 1 - src/footer/_footer.scss | 1 - src/panel/_panel.scss | 1 - src/tag/_tag.scss | 1 - 6 files changed, 6 deletions(-) diff --git a/src/date-input/_date-input.scss b/src/date-input/_date-input.scss index b1fd8f81ab..362fedc9c8 100644 --- 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 index 2dbfccd02d..7bee2d073a 100644 --- 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"; diff --git a/src/fieldset/_fieldset.scss b/src/fieldset/_fieldset.scss index a49d858964..2f31272b87 100644 --- 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 index ee170d8660..6f27fab80c 100644 --- 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/panel/_panel.scss b/src/panel/_panel.scss index 4197ba6bd8..e464fdcd6a 100644 --- 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/tag/_tag.scss b/src/tag/_tag.scss index 06fd1fa3f6..e4e1cbec8f 100644 --- 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"; From 60e5325f66a6e82b83ee8f93b90069d39f38f5b1 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 5 Apr 2018 09:45:05 +0100 Subject: [PATCH 5/9] Rename helper file from legacy-ie to ie8 --- src/breadcrumbs/_breadcrumbs.scss | 2 +- src/button/_button.scss | 2 +- src/checkboxes/_checkboxes.scss | 2 +- src/globals/_common.scss | 2 +- src/globals/tools/{_legacy-ie.scss => _ie8.scss} | 0 src/radios/_radios.scss | 2 +- 6 files changed, 5 insertions(+), 5 deletions(-) rename src/globals/tools/{_legacy-ie.scss => _ie8.scss} (100%) diff --git a/src/breadcrumbs/_breadcrumbs.scss b/src/breadcrumbs/_breadcrumbs.scss index 1a947015bf..3d83599ffa 100644 --- 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"; diff --git a/src/button/_button.scss b/src/button/_button.scss index 159f4b0732..8026afdf48 100644 --- 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"; diff --git a/src/checkboxes/_checkboxes.scss b/src/checkboxes/_checkboxes.scss index dc42ed903d..09c5df8803 100644 --- a/src/checkboxes/_checkboxes.scss +++ b/src/checkboxes/_checkboxes.scss @@ -1,5 +1,5 @@ @import "../globals/tools/exports"; -@import "../globals/tools/legacy-ie"; +@import "../globals/tools/ie8"; @import "../fieldset/fieldset"; @import "../label/label"; diff --git a/src/globals/_common.scss b/src/globals/_common.scss index dea79ba536..a2c27eaae8 100644 --- a/src/globals/_common.scss +++ b/src/globals/_common.scss @@ -21,8 +21,8 @@ @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/tools/_legacy-ie.scss b/src/globals/tools/_ie8.scss similarity index 100% rename from src/globals/tools/_legacy-ie.scss rename to src/globals/tools/_ie8.scss diff --git a/src/radios/_radios.scss b/src/radios/_radios.scss index 2c4818eed1..a276a2f507 100644 --- a/src/radios/_radios.scss +++ b/src/radios/_radios.scss @@ -1,5 +1,5 @@ @import "../globals/tools/exports"; -@import "../globals/tools/legacy-ie"; +@import "../globals/tools/ie8"; @import "../fieldset/fieldset"; @import "../label/label"; From 0e5dffc7e0151439368afb2db44c5369ec8453ef Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 5 Apr 2018 09:53:57 +0100 Subject: [PATCH 6/9] Automatically rasterise media queries for IE8 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Rather than relying on the user remembering to specify another setting when building a stylesheet that targets IE8, modify the media queries settings to use sensible defaults based on the value of `$govuk-is-ie8`. This means we need to ‘promote’ the `$govuk-is-ie8` variable to the settings layer so that we can include it before the media queries settings. --- src/all/_all-old-ie.scss | 9 ++------- src/globals/_common.scss | 14 ++++++++++---- src/globals/settings/_ie8.scss | 4 ++++ src/globals/settings/_media-queries.scss | 6 +++++- src/globals/tools/_ie8.scss | 4 ---- 5 files changed, 21 insertions(+), 16 deletions(-) create mode 100644 src/globals/settings/_ie8.scss diff --git a/src/all/_all-old-ie.scss b/src/all/_all-old-ie.scss index 8dcf3379d7..e49921b397 100644 --- a/src/all/_all-old-ie.scss +++ b/src/all/_all-old-ie.scss @@ -1,11 +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; - // By setting $govuk-is-ie8 to true, we create a version of the stylesheet that -// targets IE8 – e.g. conditionally including or excluding styles. +// targets IE8 – e.g. conditionally including or excluding styles, and +// rasterizing media queries. $govuk-is-ie8: true; @import "all"; diff --git a/src/globals/_common.scss b/src/globals/_common.scss index a2c27eaae8..505de2bcff 100644 --- a/src/globals/_common.scss +++ b/src/globals/_common.scss @@ -4,18 +4,24 @@ // 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"; diff --git a/src/globals/settings/_ie8.scss b/src/globals/settings/_ie8.scss new file mode 100644 index 0000000000..3c0d0aafed --- /dev/null +++ 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 index 410a5412dd..884faa0be8 100644 --- 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 index 910be92126..adbbb5ebf2 100644 --- a/src/globals/tools/_ie8.scss +++ b/src/globals/tools/_ie8.scss @@ -1,7 +1,3 @@ -/// Whether the stylesheet being compiled is targeting IE8 -/// @type bool -$govuk-is-ie8: false !default; - /// Conditionally include rules only for IE8 /// /// Only output the CSS passed to the mixin if the $govuk-is-ie8 variable is From 2e280cb2e2914a517b7d00f76da9d6e46209ead8 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 5 Apr 2018 10:03:09 +0100 Subject: [PATCH 7/9] Update documentation --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c399f0b7c9..ef3e72ff27 100644 --- a/README.md +++ b/README.md @@ -143,7 +143,7 @@ Add the CSS and JavaScript code to your HTML template: @@ -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"; ``` From 1dbb38177837478fb1a9d334d789c4044f25f560 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 5 Apr 2018 13:56:20 +0100 Subject: [PATCH 8/9] Include settings from IE8 tools --- src/globals/tools/_ie8.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/globals/tools/_ie8.scss b/src/globals/tools/_ie8.scss index adbbb5ebf2..33aff1b746 100644 --- a/src/globals/tools/_ie8.scss +++ b/src/globals/tools/_ie8.scss @@ -1,3 +1,6 @@ +// 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 From a4043fa2455186de14eb19fff6317f02f8f2bade Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Thu, 5 Apr 2018 15:26:02 +0100 Subject: [PATCH 9/9] Update CHANGELOG --- CHANGELOG.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bd916809d5..0d0e8afaed 100644 --- 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,