Remove IE8–10 related Sass and CSS build tasks #3559

querkmachine · 2023-04-27T12:38:21Z

A big one, probably easier to go through it one commit at a time.

Because trimming out Internet Explorer 8–10 support (especially IE8) is such a big chunk of work, I've chosen to only focus on the Sass/CSS elements here. Any JavaScript-related pieces haven't been touched, nor have any aspects related to compatibility mode.

Resolves #3461 and resolves #2622 — except for documentation changes.

Changes

Removes instances of the govuk-if-ie8 mixin and any code within them.
Removes instances of the govuk-not-ie8 mixin, maintaining any code within them.
Removes all Sass settings and mixins relating to IE8.
Removes all IE8 related Sass/CSS entry files.
Removes tests relating to IE8 CSS generation.
Removes references to IE8-specific stylesheets from the review app.
Removes IE8-specific build steps from PostCSS configuration.
Removes PostCSS dependencies that were only needed for IE8.
Removes IE8–10 from Browserslist configuration.
Removes IE8 related sections from Sassdoc generation.
Removes the block on Autoprefixer updates being made by Dependabot, as IE8 is no longer a blocker to updating.
Updates single colon pseudo-element selectors (:before) to the standards compliant double colon (::before). Single colons were only needed for IE8 support.
Adds a temporary override to the Stylelint configuration to not raise failures for using double colons. This can be removed when the upstream Stylelint configuration is updated: Remove selector-pseudo-element-colon-notation stylelint-config-gds#36

Notes

This PR doesn't:

change anything in Nunjucks/HTML or JavaScript files.
touch any CSS relating to compatibility mode, even though the legacy frontend toolkits also ship IE8-compatible code.
update any documentation relating to IE8–10.
remove any CSS hacks needed for IE11, even if they also apply to older IE versions.

colinrotherham · 2023-04-28T13:37:10Z

This is brilliant work @querkmachine

I've found a few more bits to remove that fall between the gaps of not-strictly-CSS:

Commit 33382c7 delicately removes app-legacy-ie8.min.css but ?legacy=true mode still loads:

govuk-frontend/app/src/views/layouts/_generic.njk

Line 10 in 8ccbb60

<link rel="stylesheet" href="/vendor/govuk_template/govuk-template-ie8.css">

There's also the SVG fallback govuk-logotype-crown.png image to delete:

govuk-frontend/src/govuk/components/header/template.njk

Line 38 in 8ccbb60

    
                     <img src="{{ params.assetsPath | default('/assets/images') }}/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32" alt="">

govuk-frontend/src/govuk/components/header/_index.scss

Line 308 in 8ccbb60

// Hide the inverted crown when printing in browsers that don't support SVG.

Documentation to test in Internet Explorer 8, 9 and 10

govuk-frontend/docs/contributing/testing.md

Line 61 in 8ccbb60

    
           - in [Internet Explorer 8](https://frontend.design-system.service.gov.uk/supporting-ie8/), 9 and 10 - components do not need to look perfect

govuk-frontend/CONTRIBUTING.md

Line 66 in 8ccbb60

    
           Your contribution needs to work with certain browsers as set out in [README](README.md#browser-and-assistive-technology-support). See also [supporting Internet Explorer 8](https://frontend.design-system.service.gov.uk/supporting-ie8/).

govuk-frontend/README.md

Line 42 in 8ccbb60

- Internet Explorer 8, 9 and 10, although components may not look perfect

govuk-frontend/README.md

Line 54 in 8ccbb60

    
           - [a separate stylesheet](https://frontend.design-system.service.gov.uk/supporting-ie8/) if you support Internet Explorer 8

govuk-frontend/docs/contributing/coding-standards/css.md

Line 200 in 8ccbb60

    
           This is to ensure compatibility with Internet Explorer 8, which doesn't support the double colon syntax.

govuk-frontend/docs/contributing/resize-text-in-browsers.md

Line 46 in 8ccbb60

## Resize text in Internet Explorer versions 8 to 11

colinrotherham · 2023-04-28T13:44:48Z

Suppose there's always the bits we did incorrectly (ish) on purpose like :before vs ::before

Require single colons for pseudo-element rules stylelint-config-gds#1

Tagging @kevindew as he's been looking at Stylelint v15 breaking changes recently

querkmachine · 2023-04-28T14:26:46Z

@colinrotherham Thanks for looking!

For most of them, as you mention, I purposefully left them alone for not being strictly CSS related. The govuk_template reference I imagine being removed when we strip out compatibility mode code.

Good catch on pseudo-elements though, I would include updating those as part of this work!

kevindew · 2023-05-02T09:21:21Z

Suppose there's always the bits we did incorrectly (ish) on purpose like :before vs ::before

Require single colons for pseudo-element rules stylelint-config-gds#1

Tagging @kevindew as he's been looking at Stylelint v15 breaking changes recently

Yup, the argument for keeping the single colon was to not actively break compatibility with old IE by using a syntax they don't understand. There was, of course, always going to be a point that other stuff broken in those browers or usage sufficiently insignificant that we could drop it. Maybe we've hit that point? I imagine it's within the scope of your team to decide that.

To make the switch, what I'd suggest doing is opening a draft PR to propose changing the rule in stylelint-config-gds and then changing the rule in this repo's stylelint.config.js with a link to the PR - to basically state, temporary override while we wait for the upstream rules to reflect it.

colinrotherham · 2023-05-03T08:57:54Z

stylelint.config.js

+     * https://github.com/alphagov/stylelint-config-gds/pull/36
+     * https://stylelint.io/user-guide/rules/list/selector-pseudo-element-colon-notation/
+     */
+    'selector-pseudo-element-colon-notation': 'double'


This is brilliant. Thanks for the PR too:

Remove selector-pseudo-element-colon-notation stylelint-config-gds#36

colinrotherham · 2023-05-03T10:35:36Z

CHANGELOG.md

@@ -22,6 +22,14 @@ Instead we recommend checking for the disabled attribute using [`$button.hasAttr

 This change was introduced in [pull request #2830: Set the boolean disabled attribute consistently in the button component](https://github.com/alphagov/govuk-frontend/pull/2830).

+#### Remove Internet Explorer 8 stylesheets, settings and mixins


@querkmachine I liked your suggestion on Slack

Would you mind if we removed this CHANGELOG entry in favour of a (future) combined entry for all the IE8, IE9 and IE10 things we've taken out?

Probably can't say we've stopped supporting IE8 until we've removed the internal documentation too

colinrotherham

✅ All looks good, approving

I've rebased this into the new ~~src~~ packages/govuk-frontend/src directory layout so hold off merging for now until we get main as the new base (once #3491 merges)

Removes uses of the `govuk-if-ie8` and `govuk-not-ie8` mixins from Sass, removing IE8 specific code in the process, whilst maintaing any non-IE8 code. This commit does not remove the mixins themselves.

Clean up some other code which wasn't specifically scoped to IE8, but where the code structure had been altered to accommodate IE8.

…syntax. We can change from single colons to double colons, as single colons were only needed for IE8 support. Includes a temporary override of the GDS Stylelint configuration to not raise complaints about the use of double colons.

colinrotherham · 2023-05-03T13:08:55Z

Ah you've accidentally merged into the other PR @querkmachine

Did you want to revert until we're ready for main?

I don't mind, but it might mean this PR needs opening again

querkmachine · 2023-05-03T13:24:34Z

@colinrotherham Ah crap, sorry, the hold on merging totally slipped my mind.

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3559 April 27, 2023 12:38 Inactive

querkmachine self-assigned this Apr 27, 2023

querkmachine requested a review from a team April 27, 2023 12:41

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3559 April 27, 2023 13:00 Inactive

querkmachine force-pushed the remove-ie8-css branch from 07853ef to 18192c0 Compare April 27, 2023 13:05

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3559 April 27, 2023 13:05 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3559 April 27, 2023 13:16 Inactive

colinrotherham mentioned this pull request May 2, 2023

Remove IE8-10 JavaScript polyfills, helpers, config #3570

Merged

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3559 May 2, 2023 16:48 Inactive

querkmachine force-pushed the remove-ie8-css branch from 986f11f to 54c9691 Compare May 2, 2023 16:55

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3559 May 2, 2023 16:55 Inactive

querkmachine marked this pull request as ready for review May 2, 2023 17:03

querkmachine changed the title ~~Remove IE8-related Sass and CSS build tasks~~ Remove IE8–10 related Sass and CSS build tasks May 3, 2023

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3559 May 3, 2023 07:47 Inactive

colinrotherham reviewed May 3, 2023

View reviewed changes

colinrotherham self-requested a review May 3, 2023 10:50

colinrotherham force-pushed the remove-ie8-css branch from e106835 to 63932b1 Compare May 3, 2023 12:20

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3559 May 3, 2023 12:20 Inactive

colinrotherham changed the base branch from main to review-app-user May 3, 2023 12:20

colinrotherham force-pushed the remove-ie8-css branch from 63932b1 to 21a995b Compare May 3, 2023 12:21

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3559 May 3, 2023 12:22 Inactive

colinrotherham approved these changes May 3, 2023

View reviewed changes

querkmachine added 3 commits May 3, 2023 13:33

Remove unnecesary class from Warning Text component

1254e73

Remove instances of govuk-if-ie8 and govuk-not-ie8 mixins

1f1b2ce

Removes uses of the `govuk-if-ie8` and `govuk-not-ie8` mixins from Sass, removing IE8 specific code in the process, whilst maintaing any non-IE8 code. This commit does not remove the mixins themselves.

Clean up other IE8-specific Sass code

204b722

Clean up some other code which wasn't specifically scoped to IE8, but where the code structure had been altered to accommodate IE8.

querkmachine added 9 commits May 3, 2023 13:38

Remove IE8 settings, mixins and entry files

28ed837

Remove IE8 sections from Sassdoc

25d8fa4

Remove references to IE8 stylesheets from review app

9454969

Remove IE8 CSS related tests

5720e0c

Remove IE8 from PostCSS config

ed52314

Add changelog entry

a6c490d

Allow Autoprefixer updates in Dependabot config

482a82f

Also remove IE9 and 10 from browserslist config

d736de5

colinrotherham force-pushed the remove-ie8-css branch from 21a995b to d736de5 Compare May 3, 2023 12:41

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3559 May 3, 2023 12:41 Inactive

querkmachine merged commit 8586ba4 into review-app-user May 3, 2023

querkmachine deleted the remove-ie8-css branch May 3, 2023 13:04

querkmachine restored the remove-ie8-css branch May 3, 2023 13:24

querkmachine mentioned this pull request May 3, 2023

(re-)Remove IE8–10 related Sass and CSS build tasks #3572

Merged

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3572 May 3, 2023 13:31 Inactive

colinrotherham mentioned this pull request May 3, 2023

Update browser support in README #3573

Merged

colinrotherham mentioned this pull request May 15, 2023

Reduce Internet Explorer (IE) support in GOV.UK Frontend #2621

Closed

romaricpascal mentioned this pull request Dec 8, 2023

Release v5.0.0 #4540

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove IE8–10 related Sass and CSS build tasks #3559

Remove IE8–10 related Sass and CSS build tasks #3559

querkmachine commented Apr 27, 2023 •

edited

Loading

colinrotherham commented Apr 28, 2023

colinrotherham commented Apr 28, 2023 •

edited

Loading

querkmachine commented Apr 28, 2023

kevindew commented May 2, 2023

colinrotherham May 3, 2023

colinrotherham May 3, 2023

colinrotherham left a comment •

edited

Loading

colinrotherham commented May 3, 2023

querkmachine commented May 3, 2023

		@@ -22,6 +22,14 @@ Instead we recommend checking for the disabled attribute using [`$button.hasAttr

		This change was introduced in [pull request #2830: Set the boolean disabled attribute consistently in the button component](https://github.com/alphagov/govuk-frontend/pull/2830).

		#### Remove Internet Explorer 8 stylesheets, settings and mixins

Remove IE8–10 related Sass and CSS build tasks #3559

Remove IE8–10 related Sass and CSS build tasks #3559

Conversation

querkmachine commented Apr 27, 2023 • edited Loading

Changes

Notes

colinrotherham commented Apr 28, 2023

colinrotherham commented Apr 28, 2023 • edited Loading

querkmachine commented Apr 28, 2023

kevindew commented May 2, 2023

colinrotherham May 3, 2023

Choose a reason for hiding this comment

colinrotherham May 3, 2023

Choose a reason for hiding this comment

colinrotherham left a comment • edited Loading

Choose a reason for hiding this comment

colinrotherham commented May 3, 2023

querkmachine commented May 3, 2023

querkmachine commented Apr 27, 2023 •

edited

Loading

colinrotherham commented Apr 28, 2023 •

edited

Loading

colinrotherham left a comment •

edited

Loading