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

Sé lo que CSS Reset es, 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?

Trabajo en normalize.css.

Las principales diferencias son:

  1. Normalize.css conserva los valores predeterminados útiles en lugar de “desestimar” todo. Por ejemplo, elementos como sup o sub “solo funcionan” después de incluir normalize.css (y en realidad se vuelven más robustos) mientras que son visualmente indistinguibles del texto normal después de incluir reset.css. Entonces, normalize.css no impone un punto de partida visual (homogeny) sobre usted. 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 scope de reset.css. Tiene un scope más amplio que reset.css, y también proporciona correcciones de fallas para problemas comunes como: configuración de visualización para elementos HTML5, la falta de herencia de font por elementos de formulario, corrección font-size representación de font-size para pre , desbordamiento de SVG en IE9 y el error de estilo de button en iOS.

  3. Normalize.css no satura sus herramientas de desarrollo. Una irritación común al usar 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 una mejor documentación. El código normalize.css está documentado en línea, así como de manera más completa en la Wiki de GitHub . Esto significa que puede averiguar qué hace cada línea de código, por qué se incluyó, cuáles son las diferencias entre los navegadores y más fácilmente ejecutar sus propias pruebas. El proyecto tiene como objective ayudar a educar a las personas sobre cómo los navegadores rinden elementos de forma predeterminada, y les facilita participar en la presentación de mejoras.

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

La principal diferencia es que:

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

  • Normalizar CSS tiene como objective hacer que el estilo del navegador incorporado sea coherente en todos los navegadores. Elementos como H1-6 aparecerán en negrita, más grandes, etc. de forma consistente en todos los navegadores. Se supone que debes agregar solo la diferencia de decoración que tu diseño necesita.

Si su diseño a) sigue las convenciones comunes de tipografía, etcétera, yb) Normalize.css funciona para su público objective, entonces, si utiliza Normalize.CSS en lugar de un restablecimiento de CSS, su propio CSS será más pequeño y rápido para escribir.

Normalize.css es principalmente un conjunto de estilos, que se basa en lo que el autor cree que se vería bien, y que se ve coherente en todos los navegadores. Restablecer básicamente quita el estilo de los elementos para que tengas más control sobre el diseño de todo.

Yo uso ambos.

algunos estilos de Restablecer, 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). Reset no tiene ese estilo, por lo que las entradas tienen diferentes fonts, lo que normalmente no se desea.

Así que bascialmente, usar los dos archivos CSS hace un mejor trabajo ‘Ecualizando’ todo;)

¡Saludos!

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

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

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

Primero reset.css es la peor biblioteca que puede usar, ya que elimina la estructura estándar de HTML y muestra todo lo que escribe solo como texto, después de asignar los valores de relleno de margen y otros atributos a 0 . Entonces, por ejemplo, encontrará que

será igual que

.

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

A veces, la mejor solución es usar ambos. A veces, no es usar ninguno. Y a veces, es usar uno o el otro. Si desea que todos los estilos, incluido el restablecimiento de margen y 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 sincronicidad entre navegadores, es decir, normalizaciones, utilice normalize.css. Pero si elige utilizar reset.css y normalize.css, primero vincule la hoja de estilo reset.css y luego la hoja de estilo normalize.css (inmediatamente). A veces no siempre es una cuestión de cuál es mejor, sino cuándo usar qué frente a cuándo usar ambos frente a cuándo no usar ninguno. EN MI HUMILDE OPINIÓN.