Descargar Modernizr - Descargar el código fuente de Modernizr

Modernizr

Otro código fuente

v3.13.1

Descargar

Modernizr

Modernizr es una biblioteca JavaScript que detecta las características HTML5 y CSS3 en el navegador del usuario.

Lea este archivo en Portuguese-Br aquí
Lea este archivo en Indonesia aquí
Lea este archivo en español aquí
Lea este archivo en sueco aquí
Lea este archivo en tamil aquí
Lea este archivo en Kannada aquí
Lea este archivo en hindi aquí
Nuestro sitio web está desactualizado y roto, no lo use (https://modernizr.com) sino que cree su versión Modernizr a partir de NPM.
Documentación
Pruebas de integración
Pruebas unitarias

Las pruebas de Modernizr que las características nativas de CSS3 y HTML5 están disponibles en la UA actual y ponen los resultados a su disposición de dos maneras: como propiedades en un objeto Modernizr global, y como clases en el elemento <html> . Esta información le permite mejorar progresivamente sus páginas con un nivel granular de control sobre la experiencia.

Rompiendo cambios con V4

Soporte descartado para las versiones de nodo <= 10, actualice al menos a la versión 12
Las siguientes pruebas se renombraron:
- class a es6class para mantener en línea con el resto de las pruebas de ES
Las siguientes pruebas se movieron en subdirectorios:
- cookies , indexeddb , indexedblob , quota-management-api , userdata se mudó al subdirectorio de almacenamiento
- audio se trasladó al subdirectorio de audio
- battery se mudó al subdirectorio de la batería
- canvas , canvastext se mudó al subdirectorio de lona
- customevent , eventlistener , forcetouch , hashchange , pointerevents , proximity se trasladó al subdirectorio del evento
- exiforientation se mudó al subdirectorio de la imagen
- capture , fileinput , fileinputdirectory , formatattribute , input , inputnumber-l10n , inputsearchevent , inputtypes , placeholder , requestautocomplete , validation se trasladó al subdirectorio de entrada
- svg se mudó al subdirectorio SVG
- webgl se mudó al subdirectorio de WebGL
Las siguientes pruebas se eliminaron:
- touchevents : discusión
- unicode : discusión
- templatestrings : duplicado de ES6 Detect stringtemplate
- contains : Duplicado de la detección ES6 es6string
- datalistelem : una dupe de Modernizr.input.list

Nuevos oyentes de eventos asíncronos

Muchas veces las personas quieren saber cuándo se realiza una prueba asíncrona para que pueda permitir que su aplicación reaccione a ella. En el pasado, ha tenido que confiar en ver propiedades o clases <html> . Solo se admiten eventos en pruebas asincrónicas . Las pruebas sincrónicas deben manejarse sincrónicamente para mejorar la velocidad y mantener la consistencia.

La nueva API se ve así:

 // 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!" ) ;
  }
} ) ;

Garantizamos que solo invocaremos su función una vez (por tiempo al que on ). Actualmente no estamos exponiendo un método para exponer la funcionalidad trigger . En su lugar, si desea tener control sobre las pruebas de Async, use la función src/addTest , y cualquier prueba que establezca automáticamente expondrá e activará automáticamente la funcionalidad on .

Empezando

Clon o descargar el repositorio
Instalar dependencias del proyecto con npm install

Edificio modernizr

De JavaScript

Modernizr se puede usar programáticamente a través de NPM:

 var modernizr = require ( "modernizr" ) ;

Se expone un método de build para generar compilaciones modernizr personalizadas. Ejemplo:

 var modernizr = require ( "modernizr" ) ;

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

El primer parámetro toma un objeto JSON de opciones y detects de características para incluir. Consulte lib/config-all.json para todas las opciones disponibles.

El segundo parámetro es una función invocada en la finalización de la tarea.

Desde la línea de comandos

También proporcionamos una interfaz de línea de comando para construir Modernizr. Para ver todas las opciones disponibles en ejecución:

./bin/modernizr

O para generar todo en 'config-all.json' ejecute esto con npm:

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

Prueba de modernización

Para ejecutar las pruebas usando mocha-headless-crome en la ejecución de la consola:

npm test

También puede ejecutar pruebas en su navegador de elección con este comando:

npm run serve-gh-pages

y navegue a estas dos URL:

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

Integrando modernizr con herramientas de compilación

Esta sección proporciona orientación sobre cómo integrar Modernizr con varias herramientas y marcos de compilación, lo que facilita el uso en sus proyectos.

1. Integración con Webpack

Para integrar Modernizr con Webpack, siga estos pasos:

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

Cree un archivo de configuración de Modernizr : cree un archivo llamado modernizr-config.js en su proyecto Root:

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

Actualizar la configuración de Webpack : modifique su archivo de configuración de Webpack (por ejemplo, webpack.config.js ) para incluir el complemento Modernizr:

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

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

Cree su proyecto : ejecute su proceso de compilación de Webpack:
```
npm run build
```

2. Integración con Gulp

Si está utilizando Gulp, puede integrar Modernizr de la siguiente manera:

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

Cree una tarea de Gulp : en su gulpfile.js , agregue una tarea para construir 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/' ) ) ;
} ) ;

Ejecute la tarea Gulp : ejecute la tarea para generar la compilación Modernizr:
```
gulp modernizr
```

3. Integración con el paquete

Para proyectos que usan paquetes, puede integrar Modernizr de la siguiente manera:

Instalar Modernizr :
```
npm install modernizr --save
```
Cree un archivo de configuración de Modernizr : similar a la configuración de Webpack, cree un archivo modernizr-config.js :
```
 module . exports = {
  "feature-detects" : [
    "test/feature1" ,
    "test/feature2"
  ]
} ;
```
Actualización de la configuración de la parcela : puede usar un complemento como parcel-plugin-modernizr para integrar modernizr:
```
npm install parcel-plugin-modernizr --save-dev
```
Construya su proyecto : Ejecute el paquete para construir su proyecto:
```
parcel build index.html
```

Conclusión

La integración de Modernizr con sus herramientas de compilación puede mejorar sus aplicaciones web al permitirle detectar y responder a las capacidades del navegador del usuario. Siga los pasos anteriores para configurar Modernizr con su herramienta de construcción preferida.

Para obtener más información, consulte la documentación de Modernizr.