Usando Normalize.css para desenvolvimento homogêneo

A compatibilidade do navegador é uma grande parte da acessibilidade na web. Os desenvolvedores precisam considerar variação de seu público e versões do navegador que exigem suporte. Embora as redefinições de CSS sejam uma opção, a maioria dos desenvolvedores prefere o Normalize.css por sua simplicidade e compatibilidade cruzada em todos os navegadores da Web modernos..

Neste post eu vou cobrir os fundamentos do Normalize e como ele se compara ao CSS geral redefine. Esta não é uma biblioteca complicada e não deve demorar mais do que duas horas para ser entendida. Mas a chave para normalizar é aprender como para implementá-lo de forma adequada e judiciosamente.

Redefinição do navegador vs. normalizar

Por anos eu usei uma versão customizada de resets CSS de Eric Meyer. Estes foram suficientes para a maioria dos meus projetos e não causaram problemas importantes. No entanto Normalize mudou minha visão de redefinições porque funciona de forma diferente de uma redefinição de CSS. É importante que você entenda as diferenças.

Pense em Normalize como um vestuário aplicado de forma consistente a todos os navegadores, e pense em um CSS redefinido como uma detonação termonuclear em todos os navegadores.

Normalize estilos e formatos cabeçalhos, parágrafos, blockquotes e elementos comuns para que parece idêntico (ou perto o suficiente) em todos os navegadores suportados. CSS redefine completamente limpe a ardósia limpa para que haja sem padrões para qualquer coisa.

Com uma redefinição de CSS, seus títulos podem ter a mesma aparência de seus parágrafos; elementos não têm preenchimento, margens ou espaçamento de qualquer tipo. Com uma redefinição de CSS você deve fornecer novo código para melhorar o estilo. Com Normalize você obtém um estilo pré-projetado que pode ser construído sobre.

Então, um desses é melhor que o outro? É um tema muito debatido, embora um ponto de argumento afirme que Normalize funciona melhor para compatibilidade e produz tamanhos de arquivo menores.

“Eu teria que argumentar que a normalização é melhor que redefinir. Isso resultará em menos CSS sendo transferido pela rede, melhor uso dos padrões da UA e um melhor entendimento de como os elementos são significava mostrar.”

Se você se apaixonar por Normalize ou preferir um reset típico, é importante pelo menos entender os dois lados e escolher o que melhor se encaixa. Pouquíssimos desenvolvedores começam a codificar do zero, então Normalize ou uma reconfiguração de CSS é quase necessária para o desenvolvimento de frontend moderno.

Se você quiser experimentar uma redefinição de CSS, veja algumas opções populares:

Resets de Eric Meyer
Redefinição de HTML5
HTML5Reforçar do médico

Normalizar configuração

Normalize o criador Nicolas Gallagher escreveu um post introdutório levando com esta afirmação:

“Normalize.css é um pequeno arquivo CSS que fornece melhor consistência entre navegadores no estilo padrão dos elementos HTML. É uma alternativa moderna, pronta para HTML5, à redefinição tradicional de CSS.”

Ao longo dos anos, isso se tornou uma biblioteca confiável usada por desenvolvedores em todo o mundo. Normalize foi usado até certo ponto em Bootstrap e Pure CSS.

Há duas maneiras de usar o Normalize em um projeto: edite a fonte para personalizar sua própria folha de estilo Normalize ou use-a como base e adicione estilos no topo.

A primeira é uma estratégia de escolha e escolha em que você passa pelo arquivo Normalize.css e exclui o que não é necessário para criar sua própria folha de estilo personalizada. Isso é melhor em uma base por projeto para manter o tamanho do arquivo baixo.

Como alternativa, alguns desenvolvedores incluem todo o arquivo Normalize.css e criam sua própria folha de estilos além disso. A folha de estilos completa Normalize abrange mais de 420 linhas de código, o que equivale a ~ 6,8 KB sem compactação.

Nenhum dos métodos é melhor que o outro e vale a pena seguir o que funciona melhor para cada projeto ou o seu fluxo de trabalho preferido.

Para começar, baixe uma cópia do Normalize do GitHub ou hospede-a a partir de um CDN externo. Você também pode extrair a versão mais recente do Normalize diretamente do NPM da seguinte forma:

npm install --save normalize.css

Se você não quiser baixar nenhum arquivo, você pode até criar um novo projeto CodePen, que pode acrescentar Normalize com o clique de um botão..

Como o Normalize é modular, você pode remover seções temporariamente ou até mesmo criar sua própria compilação personalizada de Normalizar. Em seguida, você pode iniciar cada projeto com partes selecionadas, como os elementos de exibição HTML5, ao remover estilos de conteúdo incorporado.

Cada regra Normalize tem um comentário CSS correspondente, explicando o que ele faz e quais problemas / bugs ele resolve. Alguns são óbvios como cenário visor: bloco em elementos HTML5 mais recentes.

Outros são menos óbvios como este código SVG que oculta o excesso no Internet Explorer:

svg: not (: root) estouro: oculto;

Eu recomendo fortemente skimming a folha de estilo para ver exatamente como ele funciona e aprender se Normalize seria certo para o seu projeto.

Normalize.css em web design

A versão mais recente do Normalize v4.0 oferece suporte a navegadores.

Chrome (dois últimos)
Edge (dois últimos)
Firefox (últimos dois)
Firefox ESR
Internet Explorer 8+
Ópera (dois últimos)
Safari 6+

Pelo que posso dizer, o Normalize pode suportar versões mais antigas de navegadores com atualizações constantes como o Firefox. Mas o “oficial” suporte inclui apenas as duas versões mais recentes do Chrome / Edge / FF / Opera.

Também o IE6 + e o Safari 4+ são suportados com Normalize v1, mas essa versão não é mais atualizada.

É crucial que você verifique as versões do navegador com uma ferramenta como o Google Analytics. Isso lhe dará uma idéia melhor se Normalize pode ser uma ferramenta útil para o trabalho moderno de web design.

Mais recursos

Não há muito o que ensinar especificamente sobre Normalize, então a maior parte do aprendizado acontece fazendo.

E sinceramente não há muito o que explicar que você não pode pegar lendo a folha de estilo e copiando / alterando o código conforme necessário. Mas se você está procurando outras informações relevantes, adicionei alguns links abaixo.

Vídeos Intro