Desenvolvendo web com Modernizr
Desenvolver sites hoje em dia ficou mais divertido, podendo utilizar tags HTML5 e efeitos do CSS3 deixando os sites mais bonitos e mantendo-se uma boa semântica, porém esse desenvolvimento é “boicotado” quando nos deparamos com navegadores antigos como o Internet Explorer 8.
Navegadores antigos não reconhecem tags como HEADER ou SECTION, além de não renderizarem vários elementos de CSS3 como BOX-SHADOW e BORDER-RADIUS. Recentemente um meio de resolver essa diferença é através de um plugin em javascript, o Modernizr.
O que ele faz basicamente é incluir via script comportamentos que teriam elementos html, como HEADER ou SECTION, a navegadores antigos, como também especificar quais elementos css o navegador suporta para poder se ter uma opção, por exemplo, ele pode por uma class no html da pagina de “no-boxshadow” se o navegador não suporta sombras em boxes, o que lhe da a chance de simplesmente usar a classe para colocar por exemplo uma borda normal e evitar quebras de layout desse tipo.
Seu uso é bem simples, basta chamar o modernizr.js no header(sim, nada de footer, esse precisa carregar antes dos elementos da sua pagina serem carregados!).
1 | <script src="js/modernizr-1.0.min.js"></script> |
Logo após se coloca uma class de “no-js” no HTML, ela será substituída por classes que o modernizr cria a partir dos elementos que o navegador suporta.
1 | <html class="no-js"> |
Simples, já está funcionando, para uma explicação mais a fundo das funcionabilidades do plugin e download do mesmo acessem o site oficial.