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

Resuelto Jitendra Vyas asked hace 13 años • 10 respuestas

Sé qué es el restablecimiento de CSS, pero recientemente escuché acerca de 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 sólo una nueva palabra de moda para el restablecimiento de CSS?

Jitendra Vyas avatar Jul 31 '11 10:07 Jitendra Vyas
Aceptado

Trabajo en normalize.css.

Las principales diferencias son:

  1. Normalize.css conserva valores predeterminados útiles en lugar de "eliminar el estilo" de todo. Por ejemplo, elementos como supo sub"simplemente funcionan" después de incluir normalize.css (y en realidad se vuelven más robustos), mientras que visualmente no se pueden distinguir del texto normal después de incluir reset.css. Por lo tanto, normalize.css no le impone un punto de partida visual (homogenia). Puede que esto no sea del agrado de todos. Lo mejor que puedes hacer es experimentar con ambos y ver cuál gel se adapta a 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 visualización para elementos HTML5, falta de fontherencia por elementos de formulario, corrección font-sizede renderizado 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 al usar reset.css es la gran cadena de herencia que se muestra en las herramientas de depuración de 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 le facilita eliminar 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 y de forma más completa en GitHub Wiki . Esto significa que puede descubrir qué hace 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 representan elementos de forma predeterminada y facilitarles la participación en el envío de mejoras.

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

necolas avatar Dec 02 '2011 14:12 necolas

La principal diferencia es que:

  • Los restablecimientos de CSS tienen como objetivo eliminar todos los estilos integrados del navegador. Los elementos estándar como H1-6, p, strong, em, etcétera terminan pareciéndose exactamente iguales y sin ninguna decoración. Luego se supone que debes agregar toda la decoración tú mismo.

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

Si su diseño a) sigue convenciones comunes para tipografía, etc., y b) Normalize.css funciona para su público objetivo, entonces usar Normalize.CSS en lugar de restablecer CSS hará que su propio CSS sea más pequeño y más rápido de escribir.

 avatar Aug 01 '2011 10:08

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

Yo uso ambos.

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

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

¡saludos!

ricmetalster avatar Jun 01 '2012 00:06 ricmetalster

Bueno, según su descripción, parece que intenta hacer que el estilo predeterminado del agente de usuario sea consistente 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 de CSS.

dbb avatar Jul 31 '2011 03:07 dbb

La primera reset.csses la peor biblioteca que puedes usar, porque elimina la estructura estándar de HTML y muestra todo lo que escribes simplemente como texto, después de asignar los valores de relleno de márgenes 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 además corrige casi todos los errores existentes en la misma. Por ejemplo, soluciona el problema al mostrar un formulario de un navegador a otro. Normalizar soluciona este problema modificando estas funciones para que sus elementos se muestren iguales en todos los navegadores.

N.Elsayed avatar Jul 23 '2016 11:07 N.Elsayed