Browser support

LBH Frontend will allow you to build services that comply with the guidance in the GOV.UK Service Manual.


Currently, LBH Frontend officially supports the following browsers:

Operating systemBrowserSupport
WindowsInternet Explorer 8-10functional
WindowsInternet Explorer 11compliant
WindowsEdge (latest 2 versions)compliant
WindowsGoogle Chrome (latest 2 versions)compliant
WindowsMozilla Firefox (latest 2 versions)compliant
macOSSafari 9+compliant
macOSGoogle Chrome (latest 2 versions)compliant
macOSMozilla Firefox (latest 2 versions)compliant
iOSSafari for iOS 9.3+compliant
iOSGoogle Chrome (latest 2 versions)compliant
AndroidGoogle Chrome (latest 2 versions)compliant
AndroidSamsung Internet (latest 2 versions)compliant

‘Compliant’ means that the components must look as good and function as well as they do in other modern browsers.

'Functional' means the components may not look perfect in the given browser, but must still be usable without errors and without 'looking broken'.

Supporting Internet Explorer 8#

It's difficult, but just about still possible, to use the Hackney design system in an app that supports IE8:

  1. Include an HTML5 shiv
  2. Generate an IE8-specific stylesheet
  3. Transform the IE8 stylesheet using oldie
  4. Include the IE8 stylesheet in your project

Once you have completed these steps, you will be able to write CSS that targets IE8 in your own application styles.

If you are using the distributed versions of LBH Frontend that already include an IE8-specific stylesheet then you can include that in your project, skipping steps 2 and 3.

1. Include an HTML5 shiv#

You will need to to include a HTML5 shiv which allows the 'semantic' HTML elements introduced in HTML5 to be used in older browsers which do not natively support them.

These elements include article, aside, figcaption, figure, footer, header, main, mark, nav, section, and time.

To improve performance for users of modern browsers, you can wrap the shiv include with conditional comments that target only the browsers that need it:

<!--[if lt IE 9]>
<script src="/path/tohtml5shiv.js"></script>

Note that some libraries such as Modernizr may already include html5shiv.

2. Bundling an IE8-specific stylesheet#

Setting the $govuk-is-ie8 variable to true when generating the stylesheet will create a version that targets IE8. For example, it will:

  • flatten media queries to create a 'desktop only' version
  • include any conditional styles that target IE8
  • exclude any conditional styles that target browsers other than IE8

You must set the variable before importing LBH Frontend.

In most scenarios you should be able to create a separate stylesheet for IE8, set the $govuk-is-ie8 variable to true and then import your main application stylesheet without having to redefine anything else.

// application.scss
@import "lbh-frontend/lbh/all";
.example {
// example application style
// application-ie8.scss
$govuk-is-ie8: true;
@import "application";

3. Transforming the generated stylesheet using 'oldie'#

You should use the oldie plugin for postcss to further transform the stylesheet:

  • replacing opacity properties with compatible filter properties
  • swapping :: selectors with compatible : selectors for pseudo-elements
  • swapping rgba colours with compatible hex colours and filter properties

The oldie plugin is also able to flatten media queries, but this will already have been done as part of the stylesheet compilation in step 1.

Doing this as a separate step allows us to keep the source of LBH Frontend simple, without having to wrap syntax that would need to be transformed in mixins or functions.

4. Including the IE8 stylesheet in your project#

Now that you have an IE8 compatible stylesheet you should include it using conditional comments:

<!--[if !IE 8]><!-->
<link rel="stylesheet" href="assets/application.css" />
<!--[if IE 8]>
<link rel="stylesheet" href="assets/application-ie8.css" />

Assistive technologies#

LBH Frontend will allow you to build services that comply with the guidance in the GOV.UK Service Manual.

Currently, LBH Frontend officially supports the following assistive technologies:

JAWS15 or laterscreen readerInternet Explorer 11
ZoomText10.11 or laterscreen magnifierInternet Explorer 11
Dragon NaturallySpeaking11 or laterspeech recognitionInternet Explorer 11
NVDA2016 or laterscreen readerFirefox (latest versions)
VoiceOver7.0 or laterscreen readerSafari on iOS10 and OS X

In addition, we test that all content is accessible with keyboard only.

We aim to support users who adjust or override the colours of websites they visit. We test this by changing colours in Firefox, by enabling 'High Contrast' mode in Windows and by using the High Contrast plugin for Chrome.