Usando Normalize.css para el Desarrollo Homogéneo

La compatibilidad del navegador es una parte importante de la accesibilidad en la web. Los desarrolladores deben tener en cuenta la Variación de su audiencia y versiones de navegador que requieren soporte.. Aunque los restablecimientos de CSS son una opción, la mayoría de los desarrolladores prefieren Normalize.css por su simplicidad y compatibilidad cruzada en todos los navegadores web modernos..

En este post voy a cubrir los conceptos básicos de Normalizar y cómo se compara con los restablecimientos generales de CSS. Esta no es una biblioteca complicada y no debería tomar más de un par de horas para comprender. Pero la clave para normalizar es aprender. cómo Para implementarlo de manera adecuada y juiciosa..

Restablecimientos del navegador frente a normalizar

Durante años he usado una versión personalizada de los restablecimientos de CSS de Eric Meyer. Estos han sido suficientes para la mayoría de mis proyectos y no han causado ningún problema importante. Sin embargo, Normalizar cambió mi vista de restablecimientos porque funciona de manera diferente a un restablecimiento de CSS. Es importante que entiendas las diferencias..

Piense en normalizar como una Prenda aplicada consistentemente a todos los navegadores., y pensar en un Reinicio de CSS como detonación termonuclear. en todos los navegadores.

Normalice los estilos y los formatos de encabezados, párrafos, citas en bloque y elementos comunes para que parecen idénticos (o lo suficientemente cerca) en todos los navegadores soportados. CSS se restablece completamente limpiar la pizarra limpia por lo que hay sin valores predeterminados por nada.

Con un restablecimiento de CSS, sus encabezados pueden verse igual que sus párrafos; Los elementos no tienen relleno, márgenes, o espacios de ningún tipo. Con un reinicio de CSS debe proporcionar un nuevo código para realzar el estilo. Con Normalize obtienes un estilo pre-diseñado que se puede construir sobre.

Entonces, ¿es uno de estos mejor que el otro? Es un tema muy debatido, aunque un punto de argumento afirma que Normalizar Funciona mejor por compatibilidad y produce tamaños de archivo más pequeños..

“Tendría que argumentar que la normalización es mejor que restablecer. El resultado será una menor transferencia de CSS a través del cable, un mejor uso de los valores predeterminados de UA y una mejor comprensión de cómo son los elementos significaba para mostrar.”

Si te enamoras de Normalize o prefieres un reinicio típico, es importante que al menos comprendas ambos lados y elijas lo que mejor se adapte. Muy pocos desarrolladores comienzan a codificar desde cero, por lo que Normalizar o un restablecimiento de CSS es casi necesario para el desarrollo de frontend moderno.

Si quieres probar un restablecimiento de CSS aquí hay algunas opciones populares:

Resets de Eric Meyer
Reinicio de HTML5
Reinicio de HTML5Doctor

Normalizar Config.

El creador de Normalize, Nicolas Gallagher, escribió un post introductorio con esta afirmación:

“Normalize.css es un pequeño archivo CSS que proporciona una mejor coherencia entre navegadores en el estilo predeterminado de los elementos HTML. Es una alternativa moderna, lista para HTML5, al restablecimiento de CSS tradicional..”

Con los años, esto se ha convertido en una biblioteca de confianza utilizada por desarrolladores de todo el mundo. Normalizar incluso se ha usado hasta cierto punto en Bootstrap y Pure CSS..

Hay dos formas de usar Normalizar en un proyecto: edite la fuente para personalizar su propia hoja de estilo Normalizar, o úsela como base y agregue estilos en la parte superior.

La primera es una estrategia de selección y selección, en la que se pasa por el archivo Normalize.css y se elimina todo lo que no necesita para crear su propia hoja de estilo personalizada. Esto es mejor por proyecto para mantener el tamaño del archivo bajo.

Alternativamente, algunos desarrolladores incluyen todo el archivo Normalize.css y construyen su propia hoja de estilos por encima de eso. La hoja de estilo Normalize completa abarca más de 420 líneas de código, lo que equivale a ~ 6.8KB sin comprimir.

Ningún método es mejor que el otro y vale la pena seguir lo que funcione mejor para cada proyecto o su flujo de trabajo preferido.

Para comenzar, descargue una copia de Normalize desde GitHub o guárdela desde un CDN externo. También puede extraer la última versión de Normalize directamente desde el NPM, así:

npm install --save normalize.css

Si no desea descargar ningún archivo, puede incluso crear un nuevo proyecto de CodePen que se pueda agregar a Normalizar con solo hacer clic en un botón..

Debido a que Normalize es modular, puede eliminar secciones temporalmente o incluso crear su propia compilación personalizada de Normalize. Luego, puede comenzar cada proyecto con partes seleccionadas como los elementos de visualización HTML5 mientras elimina estilos para contenido incrustado.

Cada regla Normalizar tiene un comentario CSS correspondiente que explica qué hace y qué problemas / errores soluciona. Algunos son obvios como la configuración bloqueo de pantalla en los nuevos elementos HTML5.

Otros son menos obvios como este código SVG que oculta el desbordamiento en Internet Explorer:

svg: not (: root) desbordamiento: oculto;

Recomiendo mucho hojear la hoja de estilo para ver exactamente cómo funciona y aprender si Normalizar sería el adecuado para su proyecto..

Normalize.css en diseño web

La versión más reciente de Normalize v4.0 ofrece un amplio soporte de navegador.

Chrome (los dos últimos)
Edge (los dos últimos)
Firefox (los dos últimos)
Firefox ESR
Internet Explorer 8+
Opera (los dos últimos)
Safari 6+

Por lo que puedo decir, Normalize puede admitir versiones anteriores de navegadores con actualizaciones constantes como Firefox. Pero el “oficial” el soporte solo incluye las dos versiones más recientes de Chrome / Edge / FF / Opera.

También IE6 + y Safari 4+ son compatibles con Normalize v1, pero esa versión ya no se actualiza.

Es crucial que verifique las versiones del navegador con una herramienta como Google Analytics. Esto le dará una mejor idea de si Normalize puede ser una herramienta útil para el trabajo de diseño web moderno..

Recursos adicionales

No hay mucho que enseñar específicamente sobre Normalizar, por lo que la mayor parte del aprendizaje ocurre al hacer.

Y la verdad es que no hay mucho que explicar que no puede recoger leyendo la hoja de estilos y copiando / modificando el código según sea necesario. Pero si estás buscando otra información relevante, he agregado algunos enlaces a continuación..

Videos de introducción