> For the complete documentation index, see [llms.txt](https://docs.create-scandipwa-app.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.create-scandipwa-app.com/getting-started/supported-browsers-and-features.md).

# Supported Browsers & Features

By default, the generated project supports all modern browsers. Support for Internet Explorer 9, 10, and 11 requires polyfills. For a set of polyfills to support older browsers, use [react-app-polyfill](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md). 

{% hint style="danger" %}

### Watch out!

Some themes, for example, the`@scandipwa/scandipwa`**does not support Internet Explorer at all**. Therefore, if your parent theme is `@scandipwa/scandipwa,`you won't be able to enjoy ScandiPWA in the Internet Explorer.
{% endhint %}

## Supported Language Features

This project supports a superset of the latest JavaScript standard. In addition to [ES6](https://github.com/lukehoban/es6features) syntax features, it also supports:

* [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016).
* [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017).
* [Object Rest/Spread Properties](https://github.com/tc39/proposal-object-rest-spread) (ES2018).
* [Dynamic import()](https://github.com/tc39/proposal-dynamic-import) (stage 4 proposal)
* [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (part of stage 3 proposal).
* [JSX](https://facebook.github.io/react/docs/introducing-jsx.html), [Flow](https://create-react-app.dev/docs/adding-flow) and [TypeScript](https://create-react-app.dev/docs/adding-typescript).

Learn more about [different proposal stages](https://tc39.github.io/process-document/).

While we recommend using experimental proposals with some caution, Facebook heavily uses these features in the product code, so we intend to provide [codemods](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb) if any of these proposals change in the future.

Note that **this project includes no** [**polyfills**](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md) by default.

If you use any other ES6+ features that need **runtime support** (such as `Array.from()` or `Symbol`), make sure you are [including the appropriate polyfills manually](https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md), or that the browsers you are targeting already support them.

## Supported Styling Options

This project also supports:

* CSS
* [PostCSS](https://postcss.org/) ([Autoprefixer](https://github.com/csstools/postcss-preset-env))
* [SASS](https://sass-lang.com/)

Support for new CSS features like the [`all` property](https://developer.mozilla.org/en-US/docs/Web/CSS/all), [`break` properties](https://www.w3.org/TR/css-break-3/#breaking-controls), [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables), and [media query ranges](https://www.w3.org/TR/mediaqueries-4/#range-context) are automatically poly-filled to add support for older browsers.

{% hint style="info" %}
[CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) prefixing is disabled by default, but it will **not** strip manual prefixing. If you'd like to opt-in to CSS Grid prefixing, [first familiarize yourself about its limitations](https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie).

To enable CSS Grid prefixing, add `/* autoprefixer grid: autoplace */` to the top of your CSS file.
{% endhint %}

## Configuring Supported Browsers

By default, the generated project includes a [`browserslist`](https://github.com/browserslist/browserslist) configuration in your `package.json` file to target a broad range of browsers based on global usage (`> 0.2%`) for production builds, and modern browsers for development. This gives a good development experience, especially when using language features such as async/await, but still provides high compatibility with many browsers in production.

The `browserslist` configuration controls the output JavaScript so that the emitted code is compatible with the browsers specified. The `production` list will be used when creating a production build by running the `build` script, and the `development` list will be used when running the `start` script. You can use [https://browserl.ist](https://browserl.ist/?q=%3E+0.2%25%2C+not+dead%2C+not+op_mini+all) to see the browsers supported by your configured `browserslist`.

Here is an example `browserslist` that is specified in `package.json`:

```javascript
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}
```

{% hint style="danger" %}

### Watch out!

The `browserlist` does not include polyfills automatically for you. You will still need to polyfill language features (see above) as needed based on the browsers you are supporting.
{% endhint %}

## Missing a feature?

This project allows you to create extensions to its own build configuration. You can always add a missing feature to your project by following the build extension guide.