Navigateurs pris en charge

Docusaurus allows sites to define the list of supported browsers through a browserslist configuration.

Purpose

Les sites web doivent trouver un équilibre entre la rétrocompatibilité et la taille des bundles. Comme les anciens navigateurs ne prennent pas en charge les API ou la syntaxe modernes, il faut plus de code pour implémenter la même fonctionnalité.

For example, you may use the optional chaining syntax:

const value = obj?.prop?.val;

...qui n'est malheureusement reconnu que par les versions de navigateurs publiées après 2020. Pour être compatible avec les versions antérieures du navigateur, lors de la construction de votre site pour la production, notre chargeur JS transpile votre code vers une syntaxe plus détaillée :

var _obj, _obj$prop;

const value =
  (_obj = obj) === null || _obj === void 0
    ? void 0
    : (_obj$prop = _obj.prop) === null || _obj$prop === void 0
    ? void 0
    : _obj$prop.val;

Cependant, cela pénalise tous les autres utilisateurs en augmentant le temps de chargement du site, car la ligne de 29 caractères devient maintenant 168 caractères, soit 6 fois plus ! (Dans la pratique, ce sera mieux parce que les noms utilisés seront plus courts.) En contrepartie, le chargeur JS ne transpose la syntaxe que dans la mesure où elle est prise en charge par toutes les versions de navigateur définies dans la liste des navigateurs.

The browser list by default is provided through the package.json file as a root browserslist field.

attention

Sur les anciens navigateurs, la sortie compilée utilisera une syntaxe JS non prise en charge (trop récente), ce qui entraînera l'échec de l'initialisation de React et l'obtention d'un site web statique contenant uniquement du HTML/CSS et pas de JS.

Default values

Websites initialized with the default classic template has the following in package.json:

package.json

{
  "name": "docusaurus",
  // ...
  "browserslist": {
    "production": [">0.5%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
  // ...
}

En termes de vocabulaire simple, les navigateurs pris en charge en production sont les suivants :

• With more than 0.5% of market share; and
• Has official support or updates in the past 24 months (the opposite of "dead"); and
• N'est pas Opera Mini.

Et les navigateurs utilisés pour le développement sont:

• The latest version of Chrome or Firefox or Safari.

You can "evaluate" any config with the browserslist CLI to obtain the actual list:

npx browserslist --env="production"

La sortie est supportée par tous les navigateurs en production. Ci-dessous le résultat en Janvier 2022 :

and_chr 96
and_uc 12.12
chrome 96
chrome 95
chrome 94
edge 96
firefox 95
firefox 94
ie 11
ios_saf 15.2
ios_saf 15.0-15.1
ios_saf 14.5-14.8
ios_saf 14.0-14.4
ios_saf 12.2-12.5
opera 82
opera 81
safari 15.1
safari 14.1
safari 13.1

Read more

You may wish to visit the browserslist documentation for more specifications, especially the accepted query values and best practices.