Download Modernizr - Download de código fonte Modernizr

Modernizr

Outro código-fonte

v3.13.1

Baixar

Modernizr

A Modernizr é uma biblioteca JavaScript que detecta recursos HTML5 e CSS3 no navegador do usuário.

Leia este arquivo em português-B-B aqui
Leia este arquivo em Indonésio aqui
Leia este arquivo em espanhol aqui
Leia este arquivo em sueco aqui
Leia este arquivo em Tamil aqui
Leia este arquivo em Kannada aqui
Leia este arquivo em hindi aqui
Nosso site está desatualizado e quebrado, por favor, não o use (https://modernizr.com), mas construa sua versão Modernizr a partir do NPM.
Documentação
Testes de integração
Testes de unidade

Testes Modernizr, que os recursos nativos de CSS3 e HTML5 estão disponíveis no UA atual e disponibilizam os resultados de duas maneiras: como propriedades em um objeto Global Modernizr e como classes no elemento <html> . Essas informações permitem aprimorar progressivamente suas páginas com um nível granular de controle sobre a experiência.

Quebrando mudanças com V4

Suporte descartado para versões do nó <= 10, atualize para pelo menos a versão 12
Os testes a seguir foram renomeados:
- class para es6class para manter-se alinhado com o restante dos testes ES
Os testes a seguir foram movidos em subdiretos:
- cookies , indexeddb , indexedblob , quota-management-api , userdata mudou para o subdiretório de armazenamento
- audio mudou para o subdiretório de áudio
- battery movida para o subdiretório da bateria
- canvas , canvastext mudou para o subdiretório de tela
- customevent , eventlistener , forcetouch , hashchange , pointerevents , proximity mudou -se para o subdiretório do evento
- exiforientation mudou -se para o subdiretório da imagem
- capture , fileinput , fileinputdirectory , formatattribute , input , inputnumber-l10n , inputsearchevent , inputtypes , placeholder , requestautocomplete , validation movida para o subdiretório de entrada
- svg mudou -se para o subdiretório SVG
- webgl mudou -se para o subdiretório WebGL
Os testes a seguir foram removidos:
- touchevents : discussão
- unicode : discussão
- templatestrings : Duplicado do ES6 Detect stringtemplate
- contains : Duplicado do ES6 Detectar es6string
- datalistelem : um dupe de modernizr.input.list

Novos ouvintes de eventos assíncronos

Muitas vezes, as pessoas querem saber quando um teste assíncrono é feito para permitir que seu aplicativo reaja a ele. No passado, você tinha que confiar em assistir a propriedades ou aulas <html> . Somente eventos em testes assíncronos são suportados. Os testes síncronos devem ser tratados de maneira síncrona para melhorar a velocidade e manter a consistência.

A nova API se parece com o seguinte:

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

Garantimos que apenas invocaremos sua função uma vez (por vez que você on ). No momento, não estamos expondo um método para expor a funcionalidade trigger . Em vez disso, se você quiser ter controle sobre testes assíncronos, use o recurso src/addTest e qualquer teste que você definirá automaticamente exponha e acionará a funcionalidade on .

Começando

Clone ou faça o download do repositório
Instale as dependências do projeto com npm install

Construindo Modernizr

De JavaScript

Modernizr pode ser usado programaticamente via npm:

 var modernizr = require ( "modernizr" ) ;

Um método build é exposto para gerar construções personalizadas do Modernizr. Exemplo:

 var modernizr = require ( "modernizr" ) ;

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

O primeiro parâmetro leva um objeto JSON de opções e detecção de recursos para incluir. Consulte lib/config-all.json para obter todas as opções disponíveis.

O segundo parâmetro é uma função invocada na conclusão da tarefa.

Da linha de comando

Também fornecemos uma interface da linha de comando para a construção de modernizr. Para ver todas as opções disponíveis executar:

./bin/modernizr

Ou para gerar tudo em 'config-all.json', execute isso com o NPM:

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

Testando modernizr

Para executar os testes usando o Mocha sem cabeça-chrome na execução do console:

npm test

Você também pode executar testes no seu navegador de escolha com este comando:

npm run serve-gh-pages

e navegue para esses dois URLs:

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

Integração do Modernizr com ferramentas de construção

Esta seção fornece orientações sobre como integrar o Modernizr com várias ferramentas e estruturas de construção, facilitando o uso em seus projetos.

1. Integrando com Webpack

Para integrar o Modernizr ao Webpack, siga estas etapas:

Instale o Modernizr :
```
npm install modernizr --save
```

Crie um arquivo de configuração Modernizr : Crie um arquivo chamado modernizr-config.js em sua raiz do projeto:

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

Atualize Configuração do WebPack : Modifique seu arquivo de configuração do WebPack (por exemplo, webpack.config.js ) para incluir o plug -in Modernizr:

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

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

Crie seu projeto : Execute seu processo de construção do WebPack:
```
npm run build
```

2. Integrando com Gulp

Se você estiver usando o Gulp, pode integrar o Modernizr da seguinte maneira:

Instale o Modernizr :
```
npm install modernizr --save-dev
```

Crie uma tarefa gulp : em seu gulpfile.js , adicione uma tarefa para construir o 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/' ) ) ;
} ) ;

Execute a tarefa Gulp : execute a tarefa para gerar a compilação Modernizr:
```
gulp modernizr
```

3. Integrando com o pacote

Para projetos usando o Parcel, você pode integrar o Modernizr da seguinte maneira:

Instale o Modernizr :
```
npm install modernizr --save
```

Crie um arquivo de configuração Modernizr : semelhante à configuração do WebPack, crie um arquivo modernizr-config.js :

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

ATUALIZAÇÃO CONFIGURAÇÃO DA PARCEL : Você pode usar um plug-in como parcel-plugin-modernizr para integrar o Modernizr:
```
npm install parcel-plugin-modernizr --save-dev
```
Construa seu projeto : Execute o pacote para construir seu projeto:
```
parcel build index.html
```

Conclusão

A integração do Modernizr com suas ferramentas de construção pode aprimorar seus aplicativos da Web, permitindo que você detecte e responda aos recursos do navegador do usuário. Siga as etapas acima para configurar o Modernizr com sua ferramenta de construção preferida.

Para obter mais informações, consulte a documentação Modernizr.