# IE11 support plan for v8

## Goals

| Priority | Desc |
|-|-|
| 0 | CSS variables can work for IE11 apps|
| 1 | There is good documentation available on the website describing what customers need to do to support IE11 |
| 1 | We have Screener testing some IE11 critical scenarios (scoped to whatever is using variables)
| 2 | We have a place for future IE11 polyfills to be checked in

## Proposed work

### CSS variables support

There are 2 plans for providing css variables support:

#### Primary plan: use polyfill

IE 11 css variables polyfill:
https://github.com/nuxodin/ie11CustomProperties

First, try the current version and see if it will work:

https://github.com/dzearing/token-fun

If it works, we should check in the package locally to ensure we lock it down and can make hotfixes easily.

#### Secondary plan: modify load-themed-styles

The less optimal, but more fullproof plan is to lean on load-themed-styles to process them as well.

Modify code here:
https://github.com/microsoft/rushstack/tree/master/libraries/load-themed-styles

* Check if IE11
* If IE11, treat css variables as theme tokens
* Replace theme tokens with values from loadTheme, or defaults if provided.

Downsides:

* Every browser needs to donwload this logic
* Dependency on load-themed-styles for style injection
* Contextual themes just wont work; all theme values must use `loadTheme` or default, not wrapped areas with new theme values.

### Docs

Once we've identified the best guidance, we should make sure tehre are clear docs for users to understand how to opt in.

## References

If you need to use a pure html server, fall back to `serve` tool:

npm i -g serve

Then from any folder:

serve .