Skip to content

GOV.UK Frontend v5.0.0-beta.2

Pre-release
Pre-release
Compare
Choose a tag to compare
@36degrees 36degrees released this 24 Nov 12:00
· 1693 commits to main since this release
v5.0.0-beta.2
ae5772d
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

Breaking changes

Update the GOV.UK logo

The GOV.UK logo has been updated to merge the GOV.UK text with the crown graphic. This is to ensure that the full logo is always rendered correctly even if parts of the page, such as CSS or the Transport webfont fail to load. Styles relating to the logo have also been modified.

If you're using the govukHeader Nunjucks macro you don't need to change anything.

Otherwise, to update to the new logo:

  1. Remove <span class="govuk-header__logotype-text"> and its content.
  2. Remove the <span class="govuk-header__logotype"> around the svg element.
  3. Replace the svg element with this updated SVG, ensuring that the class name and attributes are also updated.

This change was made in pull request #4449: Implement transitional crown in the Header component (v5.0).

Check your favicons, app icons and OpenGraph image still work

We've changed the names, formats and sizes of icon assets that we distribute in Frontend. You will want to check that the correct files are in place.

The following files have been added to the assets folder:

  • manifest.json
  • images/favicon.svg
  • images/govuk-icon-180.png
  • images/govuk-icon-192.png
  • images/govuk-icon-512.png
  • images/govuk-icon-mask.svg

The following files have been removed from the assets folder:

  • images/govuk-apple-touch-icon.png
  • images/govuk-apple-touch-icon-152x152.png
  • images/govuk-apple-touch-icon-167x167.png
  • images/govuk-apple-touch-icon-180x180.png
  • images/govuk-mask-icon.svg

If you're not using the Nunjucks page template, you will need to replace the list of icons in the template's head with the following:

<link rel="icon" sizes="48x48" href="/assets/images/favicon.ico">
<link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml">
<link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#0b0c0c">
<link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png">
<link rel="manifest" href="/assets/manifest.json">

You will need to update the file path to match your assets folder if it's not at the default location.

This change was made in pull request #4445: Implement transitional crown favicons (v5.0).

Recommended changes

We've recently made some non-breaking changes to GOV.UK Frontend. Implementing these changes will make your service work better.

Remove the X-UA-Compatible meta tag

Remove the <meta http-equiv="X-UA-Compatible" content="IE=edge"> meta tag from your page template.

Internet Explorer versions 8, 9 and 10 included a feature that would try to determine if the page was built for an older version of IE and would silently enable compatibility mode, which would modify the rendering engine's behaviour to match the older version of IE. Setting this meta tag prevented that behaviour.

IE11 deprecated this meta tag and defaulted to always using IE11's renderer when the page has a HTML5 doctype (<!DOCTYPE html>).

As Frontend no longer supports Internet Explorer versions older than 11, this meta tag can now be removed.

This change was made in pull request #4434: Remove X-UA-Compatible meta tag.

Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:

Assets 3
Loading