Téléchargement Modernizr - Téléchargement du code source Modernizr

Modernizr

Autre code source

v3.13.1

Télécharger

Modernizr

Modernizr est une bibliothèque JavaScript qui détecte les fonctionnalités HTML5 et CSS3 dans le navigateur de l'utilisateur.

Lisez ce fichier en portugais-BR ici
Lisez ce fichier en indonésien ici
Lisez ce fichier en espagnol ici
Lisez ce fichier en suédois ici
Lisez ce fichier en tamoul ici
Lisez ce fichier à Kannada ici
Lisez ce fichier en hindi ici
Notre site Web est obsolète et cassé, veuillez ne pas l'utiliser (https://modernizr.com) mais construisez plutôt votre version Modernizr à partir de NPM.
Documentation
Tests d'intégration
Tests unitaires

Modernizr tests que les fonctionnalités natives CSS3 et HTML5 sont disponibles dans l'UA actuelle et mettent les résultats à votre disposition de deux manières: en tant que propriétés sur un objet Modernizr global, et en tant que classes sur l'élément <html> . Ces informations vous permettent d'améliorer progressivement vos pages avec un niveau de contrôle granulaire sur l'expérience.

Breaking Changes avec V4

Support supprimé pour les versions de nœud <= 10, veuillez passer à au moins la version 12
Les tests suivants ont été renommés:
- class à es6class pour rester en ligne avec le reste des tests ES
Les tests suivants ont été déplacés dans les sous-répertoires:
- cookies , indexeddb , indexedblob , quota-management-api , userdata a déménagé dans le sous-répertoire de stockage
- audio est entré dans le sous-répertoire audio
- battery déplacée dans le sous-répertoire de la batterie
- canvas , canvastext il a emménagé dans le sous-répertoire en toile
- customevent , eventlistener , forcetouch , hashchange , pointerevents , proximity est entré dans le sous-répertoire de l'événement
- exiforientation est entrée dans le sous-répertoire de l'image
- capture , fileinput , fileinputdirectory , formatattribute , input , inputnumber-l10n , inputsearchevent , inputtypes , placeholder , requestautocomplete , validation déplacée dans le sous-répertoire d'entrée
- svg a déménagé dans le sous-répertoire SVG
- webgl a déménagé dans le sous-répertoire WebGl
Les tests suivants ont été supprimés:
- touchevents : discussion
- unicode : discussion
- templatestrings : Duplicate of the ES6 Detect stringtemplate
- contains : le double de l'ES6 détecte es6string
- datalistelem : un dupe de modernizr.input.list

Nouveaux auditeurs d'événements asynchrones

Souvent, les gens veulent savoir quand un test asynchrone est effectué afin qu'ils puissent permettre à leur application de y réagir. Dans le passé, vous avez dû compter sur les propriétés de l'observation ou les cours <html> . Seuls les événements sur les tests asynchrones sont pris en charge. Les tests synchrones doivent être traités de manière synchrone pour améliorer la vitesse et maintenir la cohérence.

La nouvelle API ressemble à ceci:

 // Listen to a test, give it a callback
Modernizr . on ( "testname" , function ( result ) {
  if ( result ) {
    console . log ( "The test passed!" ) ;
  } else {
    console . log ( "The test failed!" ) ;
  }
} ) ;

Nous garantissons que nous ne convoquerons votre fonction qu'une seule fois (par fois que vous on ). Nous n'exposons actuellement pas de méthode pour exposer la fonctionnalité trigger . Au lieu de cela, si vous souhaitez avoir un contrôle sur les tests asynchronisés, utilisez la fonction src/addTest , et tout test que vous définissez exposera automatiquement et déclenchera la fonctionnalité on .

Commencer

Cloner ou télécharger le référentiel
Installer les dépendances du projet avec npm install

Construire modernizr

De javascript

Modernizr peut être utilisé par programme via NPM:

 var modernizr = require ( "modernizr" ) ;

Une méthode build est exposée pour générer des versions modernizr personnalisées. Exemple:

 var modernizr = require ( "modernizr" ) ;

modernizr . build ( { } , function ( result ) {
  console . log ( result ) ; // the build
} ) ;

Le premier paramètre prend un objet JSON d'options et de fonctions de fonctionnalité à inclure. Voir lib/config-all.json pour toutes les options disponibles.

Le deuxième paramètre est une fonction invoquée à l'achèvement de la tâche.

De la ligne de commande

Nous fournissons également une interface de ligne de commande pour la construction de modernizr. Pour voir toutes les options disponibles exécuter:

./bin/modernizr

Ou pour tout générer dans 'config- all.json' exécutez ceci avec npm:

npm start
//outputs to ./dist/modernizr-build.js

Tester Modernizr

Pour exécuter les tests à l'aide de Mocha-Headless-Chrome sur l'exécution de la console:

npm test

Vous pouvez également exécuter des tests dans votre navigateur de choix avec cette commande:

npm run serve-gh-pages

et accéder à ces deux URL:

http://localhost:8080/test/unit.html
http://localhost:8080/test/integration.html

Intégration de Modernizr avec des outils de construction

Cette section fournit des conseils sur la façon d'intégrer Modernizr avec divers outils de construction et des cadres, ce qui facilite l'utilisation dans vos projets.

1. S'intégrer avec WebPack

Pour intégrer Modernizr à WebPack, suivez ces étapes:

Installer Modernizr :
```
npm install modernizr --save
```

Créez un fichier de configuration modernizr : créez un fichier nommé modernizr-config.js dans la racine de votre projet:

 module . exports = {
  "feature-detects" : [
    "test/feature1" ,
    "test/feature2" ,
    // Add more feature detects as needed
  ]
} ;

Mettre à jour la configuration de WebPack : modifiez votre fichier de configuration WebPack (par exemple, webpack.config.js ) pour inclure le plugin Modernizr:

 const ModernizrWebpackPlugin = require ( 'modernizr-webpack-plugin' ) ;

module . exports = {
  // Other configurations...
  plugins : [
    new ModernizrWebpackPlugin ( {
      "feature-detects" : [
        "test/feature1" ,
        "test/feature2"
      ]
    } )
  ]
} ;

Créez votre projet : exécutez votre processus de construction WebPack:
```
npm run build
```

2. Intégration avec Gulp

Si vous utilisez Gulp, vous pouvez intégrer Modernizr comme suit:

Installer Modernizr :
```
npm install modernizr --save-dev
```

Créez une tâche Gulp : dans votre gulpfile.js , ajoutez une tâche pour construire Modernizr:

 const gulp = require ( 'gulp' ) ;
const modernizr = require ( 'modernizr' ) ;

gulp . task ( 'modernizr' , function ( ) {
  return modernizr . build ( {
    "feature-detects" : [
      "test/feature1" ,
      "test/feature2"
    ]
  } ) . pipe ( gulp . dest ( 'dist/' ) ) ;
} ) ;

Exécutez la tâche Gulp : exécutez la tâche pour générer la construction modernizr:
```
gulp modernizr
```

3. S'intégrer à la colis

Pour les projets utilisant des colis, vous pouvez intégrer Modernizr comme suit:

Installer Modernizr :
```
npm install modernizr --save
```
Créer un fichier de configuration modernizr : similaire à la configuration de WebPack, créez un fichier modernizr-config.js :
```
 module . exports = {
  "feature-detects" : [
    "test/feature1" ,
    "test/feature2"
  ]
} ;
```
Mettre à jour la configuration de la parcelle : vous pouvez utiliser un plugin comme parcel-plugin-modernizr pour intégrer Modernizr:
```
npm install parcel-plugin-modernizr --save-dev
```
Construisez votre projet : exécutez colis pour construire votre projet:
```
parcel build index.html
```

Conclusion

L'intégration de Modernizr à vos outils de construction peut améliorer vos applications Web en vous permettant de détecter et de répondre aux capacités du navigateur de l'utilisateur. Suivez les étapes ci-dessus pour configurer Modernizr avec votre outil de construction préféré.

Pour plus d'informations, reportez-vous à la documentation Modernizr.