HTML5, CSS3 e tecnologias relacionadas, como tela e soquetes da Web, trouxeram recursos muito úteis que podem ajudar nossos programas da Web a melhorar um novo nível. Essas novas tecnologias nos permitem criar diversas páginas de forma que podem ser executadas em tablets e dispositivos móveis usando apenas HTML, CSS e JavaScript. Embora o HTML5 forneça muitos novos recursos, não é realista usar essas novas tecnologias se não considerarmos a versão antiga do navegador. A versão antiga do navegador tem sido usada há muitos anos e ainda precisamos considerar os problemas de compatibilidade dessas versões. O problema a ser resolvido neste artigo é: quando usamos a tecnologia HTML5/CSS3, como lidar melhor com o problema de navegadores antigos que não suportam recursos HTML5/CSS3.
Embora possamos escrever um código para determinar se o navegador suporta certos recursos HTML5/CSS3, o código não é muito simples. Por exemplo: Escrevendo o código para determinar que o pagamento do navegador suporta Canvans, nosso código pode ser semelhante ao seguinte:
<cript> window.onload = function () {if (canvassupported ()) {alert ('tela suportado'); }}; função canvassupported () {var canvas = document.createElement ('canvas'); return (Canvas.getContext && Canvas.getContext ('2d')); } </script>Se você deseja determinar se o armazenamento local é suportado, o código pode ser semelhante ao abaixo, mas é fácil causar erros sob o Firefox.
<cript> window.onload = function () {if (localStoragesupported ()) {alert ('armazenamento local suportado'); }}; function localStoragesupportEd () {try {return ('LocalStorage' na janela && Window ['LocalStorage']! = null); } catch (e) {} retornar false; } </script>Os dois primeiros exemplos estão verificando um recurso. Se houver muitos recursos HTML5/CSS3, precisamos escrever várias cópias de código para julgar, mas, felizmente, esses códigos não dependem da ordem. O Modernizr permite que você implemente as funções complexas acima com muito pouco código. Vamos dar uma olhada em alguns recursos importantes do Modernizr:
Comece com ModernizrNa primeira vez em que ouvi o Modernizr, pensei que isso significava modernizado e poderia adicionar alguns novos recursos HTML5/CSS3 aos navegadores mais antigos. De fato, o Modernizr não está fazendo isso, nos ajuda a melhorar nossas práticas de desenvolvimento, usando um método muito descolado para ajudar a detectar se o navegador suporta algum novo recurso e pode até carregar scripts adicionais. Se você é um desenvolvedor da web, é uma arma incrível para você.
Site oficial da Modernizr: http://modernizr.com, você pode usar os dois tipos de scripts (versão de desenvolvimento e versão de produção personalizada). O site fornece uma ferramenta personalizada para gerar apenas os recursos de detecção necessários, em vez de uma versão grande e completa que pode detectar tudo, o que significa que você pode minimizar seus scripts. A figura a seguir é a interface da ferramenta de geração oficial do site. Você pode ver que muitas html5/css3 e tecnologias relacionadas podem ser selecionadas.
Depois de baixar seu script personalizado, você pode fazer referência a um arquivo JS normal e, em seguida, pode usá -lo.
<script src = scripts/modernizr.js type = text/javascript> </script>Modernizr e elementos HTML
Depois de adicionar a referência modernizr, ele entra em vigor imediatamente. Ao executar, ele adicionará um lote de nomes de classe CSS ao elemento HTML. Esses nomes de classe marcam que os recursos suportam e quais recursos não suportam no navegador atual. Os recursos suportados exibirão diretamente o nome do recurso do dia como uma classe (por exemplo: tela, websockets). A classe exibida pelos recursos não suportados é o nome sem propriedade (por exemplo: No-Flexbox). O código a seguir é o efeito de executar no Chrome:
<html class = js flexbox Canvas CanVastext Geolocation sem touch PostMessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla múltiplo de fundo de borderimage borderradius boxshadow textshadow cssSsanimations csscollumsge csstransforms3d csstransitions fontface gerou video de vídeo Audio LocalStorage SessionStorage WebWorkers ApplicationCache SVG InLinesvg Smil svgclippaths>
O código a seguir é o efeito de executar no IE9:
<html class = js sem flexão tela tela canvas canVastext sem webgl sem toque pós-masssagem sem websqldatabase no-indexeddb hashchange sem-history draganddrop no-webesockets rgba hslla mslowsxt-border-borderimagerimagerdradradradeslockets rgba hslla msixt-border-borderimage Não-CSSCOLUMNS NO-CSSGRADIENTES NO-CSSRREFLEÇÕES CSSTRANSFORMOS NO-CSSTRANSFORMS3D NO-CSSTRANSIÇÕES FONTSFACE GERENDA VÍDEO DE VÍDEO Audio LocalStorage SessionStorage No-WebWorkers No-AplicationCache SVG Inlinesvg Smil Svg Clippaths>
Usando o Modernizr, o seguinte código pode ocorrer (adicione o nome de não-js à classe):
<html class = no-js>
Você pode visitar o site (http://html5Boilerplate.com) para visualizar o conteúdo relacionado a Boilerplate html5, ou (http://initializr.com) para visualizar o conteúdo relacionado ao Initializr, adicionar a classe js ao elemento html, que diz ao Browser se JavaScript é apoiado. Se não for suportado, o NO-JS será exibido. Se for suportado, o NO-JS será excluído. Muito legal, certo?
Use com recursos HTML5/CSS3Você pode usar diretamente o nome da classe gerado pelo Modernizr no elemento <html> para definir os atributos correspondentes no seu arquivo CSS para suportar o navegador atual. Por exemplo, o código a seguir pode exibir sombra em um navegador que suporta Shadow Shadow e exibir fronteiras padrão em navegadores que não suportam:
.BoxShadow #MyContainer {Border: Nenhum; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;} .no-boxshadow #myContainer {borda: 2px Solid Black;}Porque se o navegador suportar Shadows, o Modernizr adicionará a classe BoxShadow ao elemento <html> e você poderá gerenciá-lo no DIV ID correspondente. Se não for suportado, o Modernizr adicionará a classe No-Boxshadow ao elemento <html>, que mostra uma borda padrão. Dessa forma, podemos usar facilmente os novos recursos CSS3 em navegadores que suportam recursos do CSS3 e continuar usando o método anterior nos navegadores que não os suportam.
Além de adicionar a classe correspondente ao elemento <html>, o Modernizr também fornece um objeto Javascript Global Modernizr, que fornece propriedades diferentes para indicar se um novo recurso é suportado no navegador atual. Por exemplo, o código a seguir pode ser usado para determinar se o navegador suporta tela e armazenamento local. É muito benéfico para vários desenvolvedores desenvolverem e testarem sob navegadores de várias versões, e todos podem unificar o código.
$ (document) .ready (function () {if (modernizr.Canvas) {// Adicione código de tela} if (modernizr.localStorage) {// Adicione código de armazenamento local}});O objeto Global Modernizr também pode ser usado para detectar se o recurso CSS3 é suportado. O código a seguir é usado para testar se as transformadas CSS e Radius Borderus e CSS são suportadas:
$ (document) .ready (function () {if (modernizr.borderradius) {$ ('#mydiv'). addclass ('borderradiusstyle');} if (modernizr.csstransforms) {$ ('#mydiv'). addclass ('transformsstyle');Alguns outros recursos do CSS3 podem detectar resultados, como opacidade, RGBA, sombra de texto, animações de CSS, transições CSS, múltiplas origens, etc. A lista detectável HTML5/CSS3 completa suportada pelo Modernizr pode ser encontrada em http://www.modernizr.com/docs enquanto.
Carregando scripts de scripts com modernizrOn some browsers that do not support new features, Modernizr not only provides the above method to tell you, but also provides the load function to allow you to load some shim/polyfill scripts to achieve support (for information about shim/polyfill, please visit: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). O Modernizr fornece um carregador de script para determinar uma função e, se não for suportado, o script correspondente será carregado. Um script separado também pode ser encontrado em http://yepnopejs.com.
Você pode usar a função de carga do modernizr () para carregar dinamicamente o script. O atributo de teste da função indica se é suportado. Se o teste for suportado com sucesso, o script definido pelo atributo yep será carregado. Se não for suportado, o script definido pelo atributo não será carregado. Independentemente de ser suportado ou não, o script definido pelo atributo será carregado. O código de exemplo é o seguinte:
Modernizr.Load ({Test: Modernizr.Canvas, sim: 'html5canvasavilable.js', não: 'Excanvas.js', ambos: 'myCustomscript.js'});Neste exemplo, o Modernizr determinará se o navegador atual suporta o recurso Canvas. Se for suportado, carregará os dois scripts html5CanvasAVAILable.js e mycustomscript.js. Se não for suportado, carregará o arquivo de script Excanvas.js (usado para versões antes do IE9) para fazer o navegador suportar a função da tela e, em seguida, carregue o script mycustomscript.js.
Como o Modernizr pode carregar scripts, você também pode usar outros usos, por exemplo, se o script de terceiros que você faz referência (como Google e Microsoft que fornecem serviços CDN fornecerem hospedagem jQuery) falharem ao carregar, você pode carregar arquivos alternativos. O código a seguir é um exemplo de carregamento jQuery fornecido pela Modernizr:
Modernizr.Load ([{load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js', complete: function () {if (! Window.jQuery) {moderniz.load ('js/libery-1.6.6.jkery) {moderniz.) para carregar e // executar se precisar.Este código carregará primeiro o arquivo jQuery do Google CDN. Se o download ou o carregamento falhar, a função completa será executada. Primeiro, determine se o objeto JQEURY existe. Se não existir, o Modernizr carregará o arquivo JS nativo definido. Se mesmo os arquivos completos não forem carregados com sucesso, o arquivo NECISE-JQUERY.JS será carregado.
Resumir:O Modernizr é definitivamente uma ferramenta necessária se você estiver usando o mais recente HTML5/CSS3 para criar seu programa. Usando -o, você pode economizar muito código e trabalho de teste e pode até implementar os novos recursos correspondentes na forma de scripts de carregamento adicionais para alguns navegadores que não suportam novos recursos.
Endereço original: http://weblogs.asp.net/dwahlin/archive/2011/11/16/detecting-html5-css3-features-using-modernizr.aspx