Modernizr
v3.13.1
Lesen Sie diese Datei hier in Portugiesisch-BR
Lesen Sie diese Datei hier auf Indonesisch
Lesen Sie diese Datei hier auf Spanisch
Lesen Sie diese Datei hier auf Schwedisch
Lesen Sie diese Datei hier in Tamilisch
Lesen Sie diese Datei hier in Kannada
Lesen Sie diese Datei hier in Hindi
Unsere Website ist veraltet und kaputt. Bitte verwenden Sie sie nicht (https://modernizr.com), sondern bauen Sie Ihre Modernizr -Version von NPM aus.
Dokumentation
Integrationstests
Unit -Tests
Modernizr -Tests, die native CSS3- und HTML5 -Funktionen in der aktuellen UA verfügbar sind, und die Ergebnisse auf zwei Arten zur Verfügung stellen: als Eigenschaften eines globalen Modernizr -Objekts und als Klassen auf dem <html> -Element. Diese Informationen ermöglichen es Ihnen, Ihre Seiten schrittweise mit einem körnigen Kontrolle über die Erfahrung zu verbessern.
Fallengelassene Unterstützung für Knotenversionen <= 10, bitte upgrade auf mindestens Version 12 ein Upgrade
Die folgenden Tests wurden umbenannt:
class zu es6class , um mit dem Rest der ES-Tests im Einklang zu bleibenDie folgenden Tests wurden in Unterverzeichnissen bewegt:
cookies , indexeddb , indexedblob , quota-management-api , userdata in das Speicher-Unterverzeichnis verschobenaudio wechselte in das Audio -Unterverzeichnisbattery bewegte sich in das Batterie -Unterverzeichniscanvas , canvastext bewegte sich in das Subverzeichnis der Leinwandcustomevent , eventlistener , forcetouch , hashchange , pointerevents , proximity in das Ereignis -Unterverzeichnis eingeliefertexiforientation in das Bild -Unterverzeichnis bewegtcapture , fileinput , fileinputdirectory , formatattribute , input , inputnumber-l10n , inputsearchevent , inputtypes , placeholder , requestautocomplete , validation in das Eingabe-Unterverzeichnis verschobensvg bewegte sich in das SVG -Unterverzeichniswebgl ging in das WebGL -Unterverzeichnis einDie folgenden Tests wurden entfernt:
touchevents : Diskussionunicode : Diskussiontemplatestrings : Duplikat des ES6 erkennen stringtemplatecontains : Duplikat des ES6 -Erkennung es6stringdatalistelem : Eine Betrügerin von Modernizr.input.List Oft wollen Menschen wissen, wann ein asynchroner Test durchgeführt wird, damit ihre Anwendung darauf reagieren kann. In der Vergangenheit mussten Sie sich darauf verlassen, Eigenschaften oder <html> Klassen zu beobachten. Es werden nur Ereignisse zu asynchronen Tests unterstützt. Synchronen Tests sollten synchron durchgeführt werden, um die Geschwindigkeit zu verbessern und die Konsistenz aufrechtzuerhalten.
Die neue API sieht so aus:
// 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!" ) ;
}
} ) ; Wir garantieren, dass wir Ihre Funktion nur einmal aufrufen (pro Zeit, die Sie on ). Derzeit enthüllen wir keine Methode, um die trigger aufzudecken. Wenn Sie stattdessen die Kontrolle über asynchronisierte Tests haben möchten, verwenden Sie die Funktion src/addTest , und jeder von Ihnen festgelegte Test enthält automatisch die Funktionen on Funktionalität.
npm install Modernizr kann programmgesteuert über NPM verwendet werden:
var modernizr = require ( "modernizr" ) ; Eine build -Methode wird für die Erzeugung maßgefertigter Modernizr -Builds aufgedeckt. Beispiel:
var modernizr = require ( "modernizr" ) ;
modernizr . build ( { } , function ( result ) {
console . log ( result ) ; // the build
} ) ; Der erste Parameter erfordert ein JSON-Objekt von Optionen und Feature-Detekten, um sie einzuschließen. Weitere verfügbare Optionen finden Sie unter lib/config-all.json .
Der zweite Parameter ist eine Funktion, die beim Abschluss der Aufgabe aufgerufen wird.
Wir bieten auch eine Befehlszeilenschnittstelle zum Erstellen von Modernizr. Um alle verfügbaren Optionen auszuführen:
./bin/modernizrOder um alles in 'config-all.json' zu generieren, führen Sie dies mit NPM aus:
npm start
//outputs to ./dist/modernizr-build.jsUm die Tests mit Mokka-Headless-Chrome auf dem Konsolenlauf auszuführen:
npm testMit diesem Befehl können Sie auch Tests in Ihrem Browser Ihrer Wahl ausführen:
npm run serve-gh-pagesund navigieren Sie zu diesen beiden URLs:
http://localhost:8080/test/unit.html
http://localhost:8080/test/integration.htmlDieser Abschnitt enthält Anleitungen zur Integration von Modernizr in verschiedene Build -Tools und -Rahmenbedingungen und erleichtert die Verwendung in Ihren Projekten.
Befolgen Sie die folgenden Schritte, um Modernizr in WebPack zu integrieren:
Modernizr installieren :
npm install modernizr --save Erstellen Sie eine Modernizr-Konfigurationsdatei : Erstellen Sie eine Datei mit dem Namen modernizr-config.js in Ihrem Projektroot:
module . exports = {
"feature-detects" : [
"test/feature1" ,
"test/feature2" ,
// Add more feature detects as needed
]
} ; Aktualisieren Sie die Webpack -Konfiguration : Ändern Sie Ihre Webpack -Konfigurationsdatei (z. B. webpack.config.js ), um das Modernizr -Plugin einzuschließen:
const ModernizrWebpackPlugin = require ( 'modernizr-webpack-plugin' ) ;
module . exports = {
// Other configurations...
plugins : [
new ModernizrWebpackPlugin ( {
"feature-detects" : [
"test/feature1" ,
"test/feature2"
]
} )
]
} ;Erstellen Sie Ihr Projekt : Führen Sie Ihren Webpack -Build -Prozess aus:
npm run buildWenn Sie Gulp verwenden, können Sie Modernizr wie folgt integrieren:
Modernizr installieren :
npm install modernizr --save-dev Erstellen Sie eine Gulp -Aufgabe : Fügen Sie in Ihrer gulpfile.js eine Aufgabe hinzu, um Modernizr zu erstellen:
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/' ) ) ;
} ) ;Führen Sie die Gulp -Aufgabe aus : Führen Sie die Aufgabe aus, um den Modernizr -Build zu generieren:
gulp modernizrFür Projekte mit Paket können Sie Modernizr wie folgt integrieren:
Modernizr installieren :
npm install modernizr --save Erstellen Sie eine Modernizr-Konfigurationsdatei : Erstellen Sie eine modernizr-config.js Datei: Ähnlich wie beim WebPack-Setup:
module . exports = {
"feature-detects" : [
"test/feature1" ,
"test/feature2"
]
} ; Aktualisieren Sie die Paketkonfiguration : Sie können ein Plugin wie parcel-plugin-modernizr verwenden, um Modernizr zu integrieren:
npm install parcel-plugin-modernizr --save-devErstellen Sie Ihr Projekt : Führen Sie Paket aus, um Ihr Projekt zu erstellen:
parcel build index.htmlDurch die Integration von Modernizr in Ihre Build -Tools können Sie Ihre Webanwendungen verbessern, indem Sie die Funktionen des Browsers des Benutzers erkennen und darauf reagieren. Befolgen Sie die obigen Schritte, um Modernizr mit Ihrem bevorzugten Build -Tool einzurichten.
Weitere Informationen finden Sie in der Modernizr -Dokumentation.
Dieses Projekt hält sich an den offenen Verhaltenskodex. Durch die Teilnahme wird erwartet, dass Sie diesen Code ehren.
MIT -Lizenz
