Navigateurs pris en charge

Docusaurus permet aux sites de définir la liste des navigateurs pris en charge via une configuration de la liste des navigateurs.

Objectif

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 davantage de code pour mettre en œuvre la même fonctionnalité, ce qui pénalise tous les autres utilisateurs en augmentant le temps de chargement du site. En contrepartie, le bundler Docusaurus ne prend en charge que les versions de navigateur définies dans la liste des navigateurs.

La liste des navigateurs par défaut est fournie par le fichier package.json sous la forme d'un champ racine browserslist.

caution

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.

Valeurs par défaut

Les sites web initialisés avec le template classique par défaut ont ce qui suit dans 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 :

• Avec plus de 0,5% de part de marché ; et
• Dispose d'un prise en charge officielle ou de mises à jour au cours des 24 derniers mois (le contraire de "dead") et
• N'est pas Opera Mini.

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

• La dernière version de Chrome ou Firefox ou Safari.

Vous pouvez « exploiter » n'importe quelle configuration avec le cli de browserlist pour obtenir la liste réelle :

npx browserslist --env="production"

Le résultat est l'ensemble des navigateurs pris en charge en production. Ci-dessous le résultat en Mai 2021 :

and_chr 89and_uc 12.12chrome 89chrome 88chrome 87edge 89edge 88firefox 86ie 11ios_saf 14.0-14.5ios_saf 13.4-13.7safari 14safari 13.1samsung 13.0

En savoir plus

Vous pouvez consulter la documentation de browserslist pour plus de spécifications, notamment les requêtes et les bonnes pratiques.