Skip to main content

Changes to GOV.UK Frontend v5.0.0

The main purposes of v5 are to update how we do graded browser support, remove legacy frameworks, improve performance and make it easier for services to make future changes that will meet the latest accessibility rules.

It’s important to note this release stops Internet Explorer 11 from running GOV.UK Frontend JavaScript and removes support completely for Internet Explorer 8 to 10.

For Internet Explorer 11, your service will not stop working, but components will look and behave differently without JavaScript. Read more about how we provide support for different browsers.

Service teams should use a progressive enhancement approach to make sure users can still access any content and complete their tasks.

Migrating from v4 to v5

Follow the guidance about staying up to date with GOV.UK Frontend.

When making the decision to migrate, consider your service’s requirements. For example, if you currently need to continue CSS support for legacy browsers like Internet Explorer 8, 9 or 10, or need JavaScript support for Internet Explorer 11, you should not migrate to v5 at this time.

You should also consider whether you will need to plan for extra time to split any of the service or 3rd party code. For example, in analytics some code might need to remain in <script> tags alongside GOV.UK Frontend running in <script type="module">.

If you need it, we have a checklist for the changes you might need to make for v5, which you can view or copy (needs a Google account).

If you still need to provide support for older versions of Internet Explorer, you should stay on the latest GOV.UK Frontend v4 release.

We’re supporting GOV.UK Frontend v4 until 08 December 2024. We will conduct a review before this date to decide if we need to extend our support.

Benefits of updating to v5

By updating to v5 you’ll:

  • find it easier to make future changes to comply with WCAG 2.2 accessibility requirements
  • have the option to use the new task list component
  • import less code to your project as our JavaScript code is 25% smaller and our CSS is 5% smaller
  • only run JavaScript in browsers where GOV.UK Frontend is supported which reduces the load in older browsers
  • find it easier to migrate to the new crown logo when it’s available
  • see new error messages that explain when our components fail to initialise

Main changes to v5

This release stops Internet Explorer 11 from running GOV.UK Frontend JavaScript and removes support completely for Internet Explorer 8 to 10. Read the details about the changes to v5 in the release notes.

The new features include:

  • a new ‘Task list’ component
  • changes to the ‘Tag’ component
  • added focus styles for links with non-text content
  • enabling link styles introduced in v3.12.0 by default
  • customisable button colours for dark backgrounds
  • precompiled CSS and JavaScript available on NPMJS.com

There are actions you must make to migrate to v5.0.0. These are items you need to update, check or remove.

You’ll need to update some items, which include:

  • the HTML for warning text if you’re not using Nunjucks - we’ve removed the .govuk-warning-text__assistive class and its styles from GOV.UK Frontend
  • package file paths - we’ve moved our package files into a directory called dist and have provided instructions for Node.js, bundlers, direct JavaScript includes, Sass imports and Nunjucks search paths

You’ll need to check some items still work as expected, which include:

  • browser console - check for errors as the components show the newly-added initialisation error messages
  • Details component - this no longer uses JavaScript, and is no longer polyfilled in older browsers
  • Disabled buttons - the disabled attribute created using our Nunjucks macros no longer includes a value
  • mobile menu button in the Header component - we’ve removed some styles from the .govuk-header__menu-button class
  • Selects - The govukSelect macro will no longer include an empty value attribute for options that do not have a value set
  • inverse buttons - these components now use the $govuk-brand-colour setting
  • JavaScript polyfills, or code that relied on polyfills, for Internet Explorer (8 to11) - we’re no longer using polyfills for these browsers as JavaScript will not be loaded when its included using <script type="module">

You’ll need to remove items, which include:

  • the .init() function from individually instantiated components - components are now initialised automatically
  • Internet Explorer 8 stylesheets, settings and mixins - we no longer support Internet Explorer 8 (IE8) in GOV.UK Frontend or provide dedicated stylesheets for the browser
  • the fallback GOV.UK crown logo from your HTML - Frontend no longer supports IE8 so the fallback version is not needed
  • some font family Sass variables - we’ve removed $govuk-font-family-gds-transport, $govuk-font-family-nta, $govuk-font-family-nta-tabular
  • the deprecated .govuk-button--disabled class
  • deprecated .govuk-!-margin-static and .govuk-!-padding-static classes
  • the deprecated .govuk-header__link--service-name class
  • the deprecated .govuk-header__navigation--no-service-name class

There’s also some changes that are recommendations only and some fixes.