Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deprecate IE8 related settings and tools #3343

Merged
merged 4 commits into from
Feb 28, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,19 @@ Disabling links that are styled to look like buttons will not be supported by fu

This was added in [pull request #3326: Deprecate `govuk-button--disabled` class](https://github.com/alphagov/govuk-frontend/pull/3326).

#### Stop using the deprecated IE8 mixins and settings

The next major version of GOV.UK Frontend will remove support for Internet Explorer 8 (IE8). In preparation for this, we've deprecated the settings and mixins used when [generating IE8 specific stylesheets](https://frontend.design-system.service.gov.uk/supporting-ie8/#2-generate-an-ie8-specific-stylesheet).

You'll start seeing deprecation warnings if you're:

- using the [`govuk-if-ie8`](https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-if-ie8) and [`govuk-not-ie8`](https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-not-ie8) mixins in your own Sass code (for example `@include govuk-if-ie8`)
- changing the [`$govuk-is-ie8`](https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-is-ie8) and [`$govuk-ie8-breakpoint`](https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-ie8-breakpoint) settings to anything other than their default values

If you no longer need to support IE8, we recommend you stop generating an IE8 specific stylesheet and remove references to the IE8 mixins from your code.

You can also silence these deprecation warnings by adding `ie8` to the [$govuk-suppressed-warnings](https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-suppressed-warnings) setting, but once v5.0 has been released you will need to address them as part of the upgrade process.

### Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:
Expand Down
3 changes: 2 additions & 1 deletion app/stylesheets/app-legacy-ie8.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ $govuk-compatibility-govukelements: true;

// Suppress compatibility mode deprecation warnings locally
$govuk-suppressed-warnings: (
"compatibility-mode"
"compatibility-mode",
"ie8"
);

// Set Elements assets path
Expand Down
2 changes: 1 addition & 1 deletion app/stylesheets/partials/_app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
clear: both;
box-shadow: 0 0 0 5px $app-preview-border-colour;

@include govuk-if-ie8 {
@include _govuk-if-ie8 {
outline: 5px solid $app-preview-border-colour;
}
}
Expand Down
8 changes: 8 additions & 0 deletions src/govuk/all-ie8.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
// Ignore IE8 related warnings whilst we continue to generate IE8 specific
// stylesheets for the review app or dist versions of GOV.UK Frontend
$govuk-suppressed-warnings: if(
variable-exists(govuk-suppressed-warnings),
append($govuk-suppressed-warnings, "ie8"),
("ie8")
);

// 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.
Expand Down
6 changes: 3 additions & 3 deletions src/govuk/components/accordion/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@
vertical-align: middle;

// IE8 fallback of icon
@include govuk-if-ie8 {
@include _govuk-if-ie8 {
display: inline-block;
max-height: 20px;
line-height: 1;
Expand All @@ -180,7 +180,7 @@
border-right: govuk-px-to-rem(2px) solid;

// IE8 fallback of icon with HTML symbol
@include govuk-if-ie8 {
@include _govuk-if-ie8 {
content: "\25B2"; // "▲"
position: relative;
border: 0;
Expand All @@ -193,7 +193,7 @@
transform: rotate(180deg);

// IE8 fallback of arrow icon
@include govuk-if-ie8 {
@include _govuk-if-ie8 {
&:after {
content: "\25BC"; // "▼"
transform: none;
Expand Down
2 changes: 1 addition & 1 deletion src/govuk/components/back-link/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
}

// Fall back to a less than sign for IE8
@include govuk-if-ie8 {
@include _govuk-if-ie8 {
content: "\003c"; // Less than sign (<)
width: auto;
height: auto;
Expand Down
2 changes: 1 addition & 1 deletion src/govuk/components/breadcrumbs/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@
}

// Fall back to a greater than sign for IE8
@include govuk-if-ie8 {
@include _govuk-if-ie8 {
content: "\003e"; // Greater than sign (>)
width: auto;
height: auto;
Expand Down
10 changes: 5 additions & 5 deletions src/govuk/components/button/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ $govuk-button-text-colour: govuk-colour("white") !default;
cursor: pointer;
-webkit-appearance: none;

@include govuk-if-ie8 {
@include _govuk-if-ie8 {
border-bottom: $button-shadow-size solid $govuk-button-shadow-colour;
}

Expand Down Expand Up @@ -92,7 +92,7 @@ $govuk-button-text-colour: govuk-colour("white") !default;
// Bump the button down so it looks like its being pressed in
top: $button-shadow-size;

@include govuk-if-ie8 {
@include _govuk-if-ie8 {
border-bottom-width: 0;
}
}
Expand All @@ -103,11 +103,11 @@ $govuk-button-text-colour: govuk-colour("white") !default;
// backgrounds and box-shadows disappear, so we need to ensure there's a
// transparent outline which will be set to a visible colour.
// Since Internet Explorer 8 does not support box-shadow, we want to force the user-agent outlines
@include govuk-not-ie8 {
@include _govuk-not-ie8 {
outline: $govuk-focus-width solid transparent;
}
// Since Internet Explorer does not support `:not()` we set a clearer focus style to match user-agent outlines.
@include govuk-if-ie8 {
@include _govuk-if-ie8 {
color: $govuk-focus-text-colour;
background-color: $govuk-focus-colour;
}
Expand Down Expand Up @@ -181,7 +181,7 @@ $govuk-button-text-colour: govuk-colour("white") !default;
&:active {
top: 0;
box-shadow: 0 $button-shadow-size 0 $govuk-button-shadow-colour; // s0
@include govuk-if-ie8 {
@include _govuk-if-ie8 {
border-bottom: $button-shadow-size solid $govuk-button-shadow-colour; // s0
}
}
Expand Down
10 changes: 5 additions & 5 deletions src/govuk/components/checkboxes/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@

// IE8 doesn’t support pseudo-elements, so we don’t want to hide native
// elements there.
@include govuk-not-ie8 {
@include _govuk-not-ie8 {
position: absolute;

z-index: 1;
Expand All @@ -50,7 +50,7 @@
opacity: 0;
}

@include govuk-if-ie8 {
@include _govuk-if-ie8 {
margin-top: 10px;
margin-right: $govuk-checkboxes-size / -2;
margin-left: $govuk-checkboxes-size / -2;
Expand All @@ -72,7 +72,7 @@
touch-action: manipulation;
}

@include govuk-not-ie8 {
@include _govuk-not-ie8 {
// [ ] Check box
.govuk-checkboxes__label:before {
content: "";
Expand Down Expand Up @@ -224,11 +224,11 @@
// ▲┆└─ Check box pseudo element, aligned with margin
// └─── Touch target (invisible input), shifted into the margin
.govuk-checkboxes__input {
@include govuk-not-ie8 {
@include _govuk-not-ie8 {
left: $input-offset * -1;
}

@include govuk-if-ie8 {
@include _govuk-if-ie8 {
margin-left: $govuk-small-checkboxes-size * -1;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/govuk/components/file-upload/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
// yellow focus state.
box-shadow: inset 0 0 0 4px $govuk-input-border-colour;

@include govuk-if-ie8 {
@include _govuk-if-ie8 {
// IE8 doesn't support `box-shadow` so add an actual border
border: 4px solid $govuk-input-border-colour;
}
Expand Down
6 changes: 3 additions & 3 deletions src/govuk/components/input/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
// here as it is already used for the yellow focus state.
box-shadow: inset 0 0 0 $govuk-border-width-form-element;

@include govuk-if-ie8 {
@include _govuk-if-ie8 {
// IE8 doesn't support `box-shadow` so double the border with
// `border-width`.
border-width: $govuk-border-width-form-element * 2;
Expand Down Expand Up @@ -163,7 +163,7 @@
border-bottom: 0;
}
@include govuk-media-query($from: mobile) {
@include govuk-not-ie8 {
@include _govuk-not-ie8 {
border-right: 0;
}
}
Expand All @@ -175,7 +175,7 @@
border-top: 0;
}
@include govuk-media-query($from: mobile) {
@include govuk-not-ie8 {
@include _govuk-not-ie8 {
border-left: 0;
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/govuk/components/radios/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

// IE8 doesn’t support pseudo-elements, so we don’t want to hide native
// elements there.
@include govuk-not-ie8 {
@include _govuk-not-ie8 {
position: absolute;

z-index: 1;
Expand All @@ -53,7 +53,7 @@
opacity: 0;
}

@include govuk-if-ie8 {
@include _govuk-if-ie8 {
margin-top: 10px;
margin-right: $govuk-radios-size / -2;
margin-left: $govuk-radios-size / -2;
Expand Down Expand Up @@ -238,11 +238,11 @@
// ▲┆└─ Radio pseudo element, aligned with margin
// └─── Touch target (invisible input), shifted into the margin
.govuk-radios__input {
@include govuk-not-ie8 {
@include _govuk-not-ie8 {
left: $input-offset * -1;
}

@include govuk-if-ie8 {
@include _govuk-if-ie8 {
margin-left: $govuk-small-radios-size * -1;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/govuk/components/select/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
// since `outline` is already used for the yellow focus state.
box-shadow: inset 0 0 0 $govuk-border-width-form-element;

@include govuk-if-ie8 {
@include _govuk-if-ie8 {
// IE8 doesn't support `box-shadow` so double the border with
// `border-width`.
border-width: $govuk-border-width-form-element * 2;
Expand Down
2 changes: 1 addition & 1 deletion src/govuk/components/textarea/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
// since `outline` is already used for the yellow focus state.
box-shadow: inset 0 0 0 $govuk-border-width-form-element;

@include govuk-if-ie8 {
@include _govuk-if-ie8 {
// IE8 doesn't support `box-shadow` so double the border with
// `border-width`.
border-width: $govuk-border-width-form-element * 2;
Expand Down
2 changes: 1 addition & 1 deletion src/govuk/helpers/_focused.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

// Since Internet Explorer 8 does not support box-shadow, we want to force the
// user-agent outlines
@include govuk-not-ie8 {
@include _govuk-not-ie8 {
outline: $govuk-focus-width solid transparent;
}
color: $govuk-focus-text-colour;
Expand Down
2 changes: 1 addition & 1 deletion src/govuk/helpers/_font-faces.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
/// @access private

@mixin _govuk-font-face-gds-transport {
@include govuk-not-ie8 { // In IE8, which cannot render WOFF format, we fall back to system fonts
@include _govuk-not-ie8 { // In IE8, which cannot render WOFF format, we fall back to system fonts
@include govuk-exports("govuk/helpers/font-faces") {
@at-root {
/*! Copyright (c) 2011 by Margaret Calvert & Henrik Kubel. All rights reserved. The font has been customised for exclusive use on gov.uk. This cut is not commercially available. */ /* stylelint-disable-line scss/comment-no-loud */
Expand Down
2 changes: 1 addition & 1 deletion src/govuk/objects/_width-container.scss
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
}
}

@include govuk-if-ie8 {
@include _govuk-if-ie8 {
width: $width;
// Since media queries are not supported in IE8,
// we need to duplicate this margin that centers the page.
Expand Down
16 changes: 16 additions & 0 deletions src/govuk/settings/_ie8.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,29 @@
///
/// @type Boolean
/// @access public
/// @deprecated Will be removed in v5.0

$govuk-is-ie8: false !default;

@if $govuk-is-ie8 == true {
@include _warning(
ie8,
"The $govuk-is-ie8 setting is deprecated and will be removed in v5.0."
);
}

/// The name of the breakpoint to use as the target when rasterizing media
/// queries
///
/// @type String
/// @access public
/// @deprecated Will be removed in v5.0

$govuk-ie8-breakpoint: desktop !default;

@if not $govuk-ie8-breakpoint == desktop {
@include _warning(
ie8,
"The $govuk-ie8-breakpoint setting is deprecated and will be removed in v5.0."
);
}
40 changes: 38 additions & 2 deletions src/govuk/tools/_ie8.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,20 @@
@import "../settings/warnings";

////
/// @group tools/internet-explorer-8
////

/// A private version of the govuk-if-ie8 mixin to avoid deprecation
/// warnings where we use it internally
///
/// @access private

@mixin _govuk-if-ie8 {
@if $govuk-is-ie8 {
@content;
}
}

/// Conditionally include rules only for IE8
///
/// @content Passed content is only outputted if we're compiling a stylesheet
Expand All @@ -18,9 +31,26 @@
/// }
///
/// @access public
/// @deprecated Will be removed in v5.0

@mixin govuk-if-ie8 {
@if $govuk-is-ie8 {
@include _warning(
ie8,
"The govuk-if-ie8 mixin is deprecated and will be removed in v5.0."
);

@include _govuk-if-ie8 {
@content;
}
}

/// A private version of the govuk-not-ie8 mixin to avoid deprecation
/// warnings where we use it internally
///
/// @access private

@mixin _govuk-not-ie8 {
@if not $govuk-is-ie8 {
@content;
}
}
Expand All @@ -43,9 +73,15 @@
/// }
///
/// @access public
/// @deprecated Will be removed in v5.0

@mixin govuk-not-ie8 {
@if not $govuk-is-ie8 {
@include _warning(
ie8,
"The govuk-not-ie8 mixin is deprecated and will be removed in v5.0."
);

@include _govuk-not-ie8 {
@content;
}
}
Loading