¿Cuál es la diferencia entre Normalize.css y Reset CSS?

Sé lo que es CSS Reset, pero recientemente escuché sobre esta nueva cosa llamada Normalize.css

¿Cuál es la diferencia entre Normalize.css y Reset CSS ?

¿Cuál es la diferencia entre normalizar CSS y restablecer CSS?

¿Es solo una nueva palabra de moda para el restablecimiento de CSS?

Yo trabajo en normalize.css.

Las principales diferencias son:

1. Normalize.css conserva valores predeterminados útiles en lugar de "desestilar" todo. Por ejemplo, elementos como supo sub"trabajo sólo" después de incluir normalize.css (y se hacen realmente más robusto) mientras que son visualmente indistinguibles de texto normal después de incluir reset.css. Entonces, normalize.css no te impone un punto de inicio visual (homogenia). Esto puede no ser del gusto de todos. Lo mejor que puedes hacer es experimentar con ambos y ver qué geles con tus preferencias.

2. Normalize.css corrige algunos errores comunes que están fuera del alcance de reset.css. Tiene un alcance más amplio que reset.css, y también proporciona correcciones de errores para problemas comunes como: configuración de pantalla para elementos HTML5, falta de fontherencia por elementos de formulario, corrección de font-sizerenderizado pre, desbordamiento de SVG en IE9 y buttonerror de estilo en iOS.

3. Normalize.css no satura tus herramientas de desarrollo. Una irritación común cuando se usa reset.css es la gran cadena de herencia que se muestra en las herramientas de depuración CSS del navegador. Esto no es un problema con normalize.css debido a los estilos específicos.

4. Normalize.css es más modular. El proyecto se divide en secciones relativamente independientes, lo que facilita la eliminación de secciones (como las normalizaciones de formularios) si sabe que su sitio web nunca las necesitará.

5. Normalize.css tiene mejor documentación. El código normalize.css está documentado en línea, así como de manera más completa en el Wiki de GitHub . Esto significa que puede averiguar qué está haciendo cada línea de código, por qué se incluyó, cuáles son las diferencias entre los navegadores y ejecutar más fácilmente sus propias pruebas. El proyecto tiene como objetivo ayudar a educar a las personas sobre cómo los navegadores procesan elementos de manera predeterminada y facilitarles la participación en la presentación de mejoras.

Escribí con mayor detalle sobre esto en un artículo sobre normalize.css

La principal diferencia es que:

• El restablecimiento de CSS tiene como objetivo eliminar todo el estilo del navegador incorporado. Los elementos estándar como H1-6, p, strong, em, etcétera terminan pareciéndose exactamente igual, sin ninguna decoración. Entonces se supone que debes agregar toda la decoración tú mismo.

• Normalizar CSS tiene como objetivo hacer que el estilo del navegador integrado sea coherente en todos los navegadores. Elementos como H1-6 aparecerán en negrita, más grandes, etc., de manera consistente en todos los navegadores. Entonces se supone que debe agregar solo la diferencia en la decoración que necesita su diseño.

Si su diseño a) sigue convenciones comunes para la tipografía, etcétera, yb) Normalize.css funciona para su público objetivo, entonces el uso de Normalize.CSS en lugar de un reinicio CSS hará que su propio CSS sea más pequeño y más rápido para escribir.

Normalize.css es principalmente un conjunto de estilos, basado en lo que su autor pensó que se vería bien, y lo haría parecer consistente en todos los navegadores. Restablecer básicamente elimina el estilo de los elementos para que tenga más control sobre el estilo de todo.

Yo uso ambos.

Algunos estilos de Reset, algunos de Normalize.css. Por ejemplo, desde Normalize.css, hay un estilo para asegurarse de que todos los elementos de entrada tengan la misma fuente, lo que no ocurre (entre las entradas de texto y las áreas de texto). Restablecer no tiene ese estilo, por lo que las entradas tienen fuentes diferentes, que normalmente no se desean.

Básicamente, usar los dos archivos CSS hace un mejor trabajo 'Ecualizando' todo;)

¡Saludos!

Primero reset.csses la peor biblioteca que puede usar, porque elimina la estructura estándar de HTML y muestra todo lo que escribe como texto, después de asignar los valores de margen de relleno y otros atributos 0. Entonces, por ejemplo, encontrará que <H1>será lo mismo que <H6>.

Por otro lado, Normalize.cssutiliza la estructura estándar y también corrige casi todos los errores existentes en ella. Por ejemplo, soluciona el problema al mostrar un formulario de un navegador a otro. Normalizar corrige esto modificando estas características para que sus elementos se muestren de la misma manera en todos los navegadores.

Bueno, según su descripción, parece que intenta que el estilo predeterminado del agente de usuario sea coherente en todos los navegadores en lugar de eliminar todo el estilo predeterminado como lo haría un reinicio.

Conserva valores predeterminados útiles, a diferencia de muchos restablecimientos CSS.

El reinicio parece una necesidad para cumplir con las especificaciones de diseño personalizadas, especialmente en proyectos de diseño complejos que no son repetitivos. Parece que la normalización es una buena manera de proceder con la programación puramente web en mente, pero a menudo los sitios web son un matrimonio entre la programación web y las reglas de diseño UI / UX.

A veces, la mejor solución es usar ambos. A veces, es para usar ninguno. Y a veces, es usar uno u otro. Si desea restablecer todos los estilos, incluido el margen y el relleno de relleno en todos los navegadores, use reset.css. Luego aplique todas las decoraciones y estilos usted mismo. Si simplemente le gustan los estilos incorporados pero desea más sincronía entre navegadores, es decir, normalizaciones, utilice normalize.css. Pero si elige usar reset.css y normalize.css, primero enlace la hoja de estilo reset.css y luego la hoja de estilo normalize.css (inmediatamente) después. A veces no siempre se trata de cuál es mejor, sino cuándo usar cuál versus cuándo usar ambos versus cuándo no usar ninguno. EN MI HUMILDE OPINIÓN.

Esta pregunta ya ha sido respondida varias veces, resumiré brevemente cada una de ellas, un ejemplo y puntos de vista a partir de septiembre de 2019:

• Normalize.css : como su nombre indica, normaliza los estilos en los navegadores para sus agentes de usuario, es decir, los hace iguales en todos los navegadores debido a que, por defecto, son ligeramente diferentes.

Ejemplo : la <h1>etiqueta dentro <section>de forma predeterminada Google Chrome reducirá el tamaño de la <h1>etiqueta "esperado" . Microsoft Edge, por otro lado, está haciendo el tamaño "esperado" de la <h1>etiqueta. Normalize.css lo hará consistente.

Estado actual : el repositorio npm muestra que el paquete normalize.css tiene actualmente más de 500k descargas por semana. Las estrellas de GitHub en el proyecto del repositorio son más de 36k.

• Restablecer CSS : como su nombre indica, restablece todos los estilos, es decir, elimina todos los estilos de agente de usuario del navegador.

Ejemplo : haría algo como eso a continuación:

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

Estado actual : es mucho menos popular que Normalize.css, el paquete reset-css muestra que es alrededor de 26k descargas por semana. Las estrellas de GitHub son solo 200, como se puede ver en el repositorio del proyecto .