Skip to content

Latest commit

 

History

History
81 lines (56 loc) · 2.77 KB

supporting-internet-explorer-8.md

File metadata and controls

81 lines (56 loc) · 2.77 KB

Supporting Internet Explorer 8

If you are including GOV.UK Frontend as part of your application's stylesheets then you will need to do some additional work to support Internet Explorer 8 (IE8).

  1. Generate an IE8-specific stylesheet
  2. Transform the IE8 stylesheet using oldie
  3. 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 GOV.UK Frontend that already include an IE8-specific stylesheet then you can include that in your project.

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 GOV.UK 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 "govuk-frontend/frontend/all";

.example {
  // example application style
}

// application-ie8.scss

$govuk-is-ie8: true;

@import "application";

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 GOV.UK Frontend simple, without having to wrap syntax that would need to be transformed in mixins or functions.

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">
<!--<![endif]-->
<!--[if IE 8]>
  <link rel="stylesheet" href="assets/application-ie8.css">
<![endif]-->

Writing IE8 specific styles

See Writing styles that target IE8