Qual é a diferença entre Normalize.css e Reset CSS?

Eu sei o que é CSS Reset, mas recentemente ouvi falar sobre essa coisa nova chamada Normalize.css

Qual é a diferença entre Normalize.css e Reset CSS ?

Qual é a diferença entre normalizar CSS e redefinir CSS?

É apenas uma nova palavra da moda para a redefinição de CSS?

Eu trabalho no normalize.css.

As principais diferenças são:

1. O Normalize.css preserva os padrões úteis em vez de "desestabilizar" tudo. Por exemplo, elementos como supou sub"simplesmente funcionam" após incluir o normalize.css (e são realmente mais robustos), enquanto são visualmente indistinguíveis do texto normal após a inclusão do reset.css. Portanto, normalize.css não impõe um ponto de partida visual (homogeneidade) a você. Isso pode não ser do gosto de todos. A melhor coisa a fazer é experimentar com os dois e ver quais géis com suas preferências.

2. O Normalize.css corrige alguns erros comuns que estão fora do escopo do reset.css. Ele tem um escopo mais amplo que o reset.css e também fornece correções de erros para problemas comuns, como: configurações de exibição de elementos HTML5, falta de fontherança por elementos de formulário, correção de font-sizerenderização pre, excesso de SVG no IE9 e buttonbug de estilo no iOS.

3. O Normalize.css não bagunça suas ferramentas de desenvolvimento. Uma irritação comum ao usar reset.css é a grande cadeia de herança exibida nas ferramentas de depuração CSS do navegador. Esse não é um problema com o normalize.css devido aos estilos direcionados.

4. O Normalize.css é mais modular. O projeto é dividido em seções relativamente independentes, facilitando a remoção de seções (como as normalizações de formulário), se você souber que elas nunca serão necessárias ao seu site.

5. O Normalize.css possui uma documentação melhor. O código normalize.css está documentado em linha e de forma mais abrangente no Wiki do GitHub . Isso significa que você pode descobrir o que cada linha de código está fazendo, por que foi incluída, quais são as diferenças entre os navegadores e executar mais facilmente seus próprios testes. O projeto tem como objetivo ajudar a educar as pessoas sobre como os navegadores renderizam elementos por padrão e facilitar o envolvimento deles no envio de melhorias.

Eu escrevi com mais detalhes sobre isso em um artigo sobre normalize.css

A principal diferença é que:

• As redefinições de CSS visam remover todo o estilo do navegador interno. Elementos padrão como H1-6, p, strong, em, etc. acabam parecendo exatamente iguais, sem nenhuma decoração. Você deve então adicionar toda a decoração .

• Normalizar CSS visa tornar o estilo interno do navegador consistente entre os navegadores. Elementos como H1-6 aparecerão em negrito, maiores, etc., de maneira consistente nos navegadores. Você deve adicionar apenas a diferença na decoração que seu design precisa.

Se o seu design a) segue convenções comuns para tipografia etc., b) Normalize.css funciona para o seu público-alvo, então usar Normalize.CSS em vez de uma redefinição de CSS tornará seu próprio CSS menor e mais rápido de escrever.

O Normalize.css é principalmente um conjunto de estilos, com base no que o autor achou bom e faria com que parecesse consistente entre os navegadores. Redefinir basicamente retira o estilo dos elementos para que você tenha mais controle sobre o estilo de tudo.

Eu uso os dois.

Alguns estilos de Reset, outros de Normalize.css. Por exemplo, no Normalize.css, existe um estilo para garantir que todos os elementos de entrada tenham a mesma fonte, o que não ocorre (entre entradas e áreas de texto). A redefinição não possui esse estilo; portanto, as entradas têm fontes diferentes, o que normalmente não é desejado.

Então, basicamente, usar os dois arquivos CSS faz um trabalho melhor 'Equalizando' tudo;)

Saudações!

A primeira reset.cssé a pior biblioteca que você pode usar, porque remove a estrutura padrão do HTML e exibe tudo o que você escreve como texto, depois de atribuir os valores de preenchimento de margem e outros atributos 0. Então, por exemplo, você descobrirá que <H1>será o mesmo que <H6>.

Por outro lado, Normalize.cssusa a estrutura padrão e também corrige quase todos os erros existentes nela. Por exemplo, ele corrige o problema de mostrar um formulário de um navegador para outro. Normalize as correções modificando esses recursos para que seus elementos sejam mostrados da mesma forma em todos os navegadores.

Bem, a partir de sua descrição, parece que ele tenta tornar o estilo padrão do agente do usuário consistente em todos os navegadores, em vez de remover todo o estilo padrão como faria uma redefinição.

Preserva os padrões úteis, ao contrário de muitas redefinições de CSS.

A redefinição parece ser uma necessidade para atender às especificações de design personalizadas, especialmente em projetos de design complexos e não padronizados. Parece que normalizar é uma boa maneira de prosseguir com a programação puramente na Web, mas muitas vezes os sites são um casamento entre a programação na Web e as regras de design da UI / UX.

Às vezes, a melhor solução é usar os dois. Às vezes, é usar nenhum dos dois. E, às vezes, é usar um ou outro. Se você deseja que todos os estilos, incluindo margem e preenchimento sejam redefinidos em todos os navegadores, use reset.css. Aplique todas as decorações e estilos você mesmo. Se você simplesmente gosta dos estilos internos, mas deseja mais sincronicidade entre navegadores, ou seja, normalizações, use normalize.css. Mas se você optar por usar o reset.css e o normalize.css, vincule primeiro a folha de estilo reset.css e depois a folha de estilo normalize.css (imediatamente) depois. Às vezes, nem sempre é uma questão de qual é melhor, mas quando usar qual versus quando usar os dois versus quando não usar nenhum. NA MINHA HUMILDE OPINIÃO.

Esta pergunta já foi respondida várias vezes. Breve resumo de cada uma delas, um exemplo e informações a partir de setembro de 2019:

• Normalize.css - como o nome sugere, ele normaliza estilos nos navegadores para seus agentes de usuário, ou seja, os torna iguais em todos os navegadores devido ao motivo, por padrão, serem ligeiramente diferentes.

Exemplo : a <h1>tag interna <section>por padrão do Google Chrome será menor que o tamanho "esperado" da <h1>tag. O Microsoft Edge, por outro lado, está criando o tamanho "esperado" da <h1>tag. O normalize.css o tornará consistente.

Status atual : o repositório npm mostra que o pacote normalize.css possui atualmente mais de 500 mil downloads por semana. As estrelas do GitHub no projeto do repositório têm mais de 36k.

• Redefinir CSS - como o nome sugere, ele redefine todos os estilos, ou seja, remove todos os estilos de agente do usuário do navegador.

Exemplo : faria algo assim abaixo:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Status atual : é muito menos popular que o Normalize.css, o pacote reset-css mostra algo em torno de 26k downloads por semana. As estrelas do GitHub são apenas 200, como pode ser observado no repositório do projeto .