Normalize.css - ¿Qué es?

Como desarrollador web, me enfrento a menudo al reto de garantizar la coherencia de los diseños en distintos navegadores. Una y otra vez me encuentro con Normalizar.css una herramienta que se ha establecido como indispensable para el desarrollo web moderno en los últimos años. Profundicemos en el asunto y descubramos por qué Normalize.css es tan potente y cómo puedes sacarle el máximo partido.

¿Qué es Normalize.css y por qué es importante?

Normalizar.css es una biblioteca CSS desarrollada por Nicolas Gallagher y Jonathan Neal se desarrolló para normalizar los estilos estándar de los elementos HTML en los distintos navegadores. El objetivo es eliminar las diferencias en la visualización estándar de los elementos sin borrar los valores por defecto útiles de los navegadores. Esto contrasta con los clásicos reseteos de CSS, que eliminan todos los estilos y dejan a los desarrolladores con la tarea de rediseñar cada elemento desde cero.

La hoja de estilo Normalize.css se utiliza actualmente en varios proyectos: Twitter Bootstrap, Plantilla HTML5, GOV.UK, Rdio, Trucos CSS, SoundCloud así como en muchos otros frameworks, toolkits y sitios web.

La hoja de estilos es compatible con una amplia gama de navegadores (incluidos los móviles) e incluye reglas CSS para normalizar elementos HTML5, tipografía, listas, contenido incrustado, formularios y tablas.

¿Por qué es importante? Los estilos por defecto de los navegadores suelen ser incoherentes, lo que significa que un sitio web puede tener un aspecto diferente en distintos navegadores. Normalize.css ayuda a eliminar estas incoherencias unificando los estilos por defecto y conservando los valores predeterminados útiles. Esto no sólo ahorra tiempo, sino que también garantiza una experiencia de usuario más coherente en diferentes dispositivos y navegadores.

Funciones más detalladas de Normalize.css

Normalize.css ofrece una serie de ventajas que van más allá de la mera normalización:

1. Coherencia del navegador: Se encarga de muchas diferencias menores pero cruciales en la visualización de elementos entre distintos navegadores, como el manejo de entrada-campos, botón-estilos y tabla-disposiciones. Esto reduce el esfuerzo necesario para la depuración y garantiza una base estandarizada.
2. Ampliación de la compatibilidad con HTML5: HTML5 trajo consigo muchos elementos y atributos nuevos que a menudo no se muestran correctamente en los navegadores antiguos. Normalize.css garantiza que estos elementos se muestren de forma coherente y correcta en todos los navegadores habituales. Por ejemplo, el elemento resumen-destinado a ser utilizado en detalles-elementos se muestra de manera uniforme en los navegadores más antiguos.
3. Tipografía optimizada: Normalize.css también contiene ajustes tipográficos que garantizan que el texto sea uniforme y legible en todas las plataformas. Esto incluye el ajuste de altura de líneanormalización de la tamaño de fuente y la eliminación de márgenes innecesarios de los elementos de texto estándar.
4. Formularios y elementos de entrada: Uno de los aspectos más problemáticos del desarrollo web es la visualización de los elementos de los formularios. Los distintos navegadores manejan estos elementos de forma muy diferente, lo que puede dar lugar a diferencias significativas en su apariencia. Normalize.css normaliza estos estilos creando estilos base coherentes para entrada, textarea, seleccione y botón-elementos.
5. Diseño modular: El código de Normalize.css está dividido en secciones separadas y bien documentadas. Esto le permite utilizar específicamente partes individuales u omitirlas si es necesario. Por ejemplo, si sabe que su sitio web no utiliza formularios, puede omitir fácilmente esta sección, lo que optimiza aún más el tiempo de carga de su sitio web.

¿Normalizar o restablecer?

Merece la pena examinar más detenidamente en qué se diferencia una hoja de estilo normalise.css de un restablecimiento CSS convencional:

"El normalise.css conserva los estilos estándar útiles".

El restablecimiento consigue un estilo visual homogéneo aplanando literalmente los estilos por defecto de casi todos los elementos. En cambio, el normalise.css conserva muchos estilos por defecto útiles para el navegador. Esto significa que no es necesario redefinir todos los estilos de los elementos tipográficos generales.

Si un elemento tiene asignados diferentes estilos estándar en distintos navegadores, normalise.css pretende que estos estilos sean lo más coherentes y conformes posible con los estándares modernos.

"Normalizar.css corrige errores generales".

Se corregirán los errores generales de los navegadores de escritorio y móviles que queden fuera del ámbito del restablecimiento. Esto incluye las reglas de visualización de elementos HTML5 que tamaño de fuenteLas novedades incluyen la corrección del texto preformateado, los solapamientos de SVG en IE9 y muchos errores multiplataforma y entre navegadores en los formularios.

En el siguiente ejemplo, puede ver cómo la hoja de estilo normalise.css utiliza el nuevo valor del atributo de entrada HTML5 "buscar" del atributo type coherente y personalizable en todos los navegadores:

/**
* 1. La apariencia de las direcciones se establece como campo de búsqueda en S5 y Chrome.
* 2. el tamaño de la caja de direcciones se establece en border-box en S5, Chrome (incluye -moz a prueba de futuro)
*/

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
* Elimina el relleno interior y el botón de cancelación de búsqueda en S5, Chrome en OS X
*/

input[type="search"]::-webkit-botón-búsqueda-decoración,
input[type="search"]::-webkit-botón-cancelar-búsqueda {
  -webkit-appearance: none;
}

A menudo, un restablecimiento no consigue que los navegadores web se pongan de acuerdo sobre cómo debe mostrarse un elemento. Esto es especialmente cierto en el caso de los formularios. Un área donde la hoja de estilo normalise.css es una ayuda significativa.

"Normalise.css no "desordena" las herramientas de depuración".

Si se utiliza una hoja de estilo normalise.css, este fenómeno no se produce en tanta medida porque se abordan estilos específicos y los selectores múltiples sólo se utilizan con mucha moderación en los conjuntos de reglas.

"Normalize.css es modularmente utilizable".

El proyecto se dividió en secciones relativamente independientes. Esto facilita reconocer qué elementos requieren estilos específicos. También permite eliminar una sección (por ejemplo, la normalización de formularios) si se sabe que el propio sitio web nunca necesitará las reglas definidas.

"Normalize.css tiene una extensa documentación".

El código normalise.css se basa en pruebas metódicas y análisis precisos entre navegadores. El código está bien documentado dentro del archivo y descrito con más detalle en la Wiki de Github. Por lo tanto, puedes investigar exactamente qué "hace" cada línea de código, por qué se insertó, qué diferencias hay de un navegador a otro y esto facilita mucho la realización de tus propias pruebas.

El proyecto pretende ayudar a aclarar cómo los navegadores muestran los elementos por defecto y facilitar la aportación de mejoras.

Buenas prácticas para la integración de Normalize.css

Primero instale o descargue la hoja de estilo normalise.css de GitHub. Hay varias formas de utilizar Normalize.css con eficacia. Usted debe observar los siguientes procedimientos:

1. Adaptación a las necesidades del proyecto: Utilice Normalize.css como base y adáptelo a los requisitos específicos de su proyecto. Es decir, utilice el archivo como punto de partida para su propio CSS básico y sobrescríbalo si es necesario.
2. Integración sin cambios: Alternativamente, puede incluir Normalize.css sin cambios en su proyecto y luego ajustar estilos específicos en un archivo CSS separado. Es importante que tu propia hoja de estilos se cargue después de la integración de Normalize.css para que tus cambios puedan sobrescribir la normalización.
3. Tiempos de carga optimizados: Asegúrese de que sólo utiliza las partes de Normalize.css que realmente necesita. La estructura modular facilita la eliminación de partes innecesarias y, por tanto, optimiza el tiempo de carga de tu sitio web.

Navegadores compatibles

• Google Chrome (actual)
• Mozilla Firefox (actual)
• Mozilla Firefox ESR
• Ópera (actual)
• Apple Safari 6+
• Internet Explorer 8+

Notas finales

La hoja de estilo normalise.css difiere del restablecimiento de CSS en términos de alcance y ejecución. Merece la pena probar si se adapta al desarrollo de tu proyecto y a tus preferencias.

El proyecto se está desarrollando públicamente en GitHub. Cualquiera puede informar de problemas y contribuir con correcciones y adiciones. El historial completo del proyecto está a disposición del público y el contexto y las razones de cualquier cambio en el código se pueden encontrar en los mensajes de "commit" y en los posts de "issue".

Material de lectura complementario

Para profundizar en sus conocimientos y trabajar directamente con Normalize.css, aquí encontrará una lista de recursos útiles:

• "CSS: La guía definitiva" de Eric Meyer - Un libro exhaustivo que describe las complejidades de CSS y proporciona técnicas útiles para gestionar las incompatibilidades entre navegadores.
• MDN Web Docs: "CSS Cross-Browser Development" (en inglés) - Una excelente fuente de información actualizada sobre desarrollo CSS multiplataforma.
• "HTML5 y CSS3 All-in-One For Dummies" de Andy Harris - Proporciona una introducción fácil de entender al desarrollo HTML5 y CSS3 y muestra cómo Normalize.css puede integrarse en proyectos modernos.
• Normalise.css en GitHub - Página oficial GitHub del proyecto con el código fuente y la documentación.
• MDN Web Docs: "Hojas de estilo del agente de usuario CSS" - Información detallada sobre los estilos estándar del agente de usuario en varios navegadores.
• Información detallada sobre los estilos estándar de UserAgent: Sugerencias del WHATWG para la representación de documentos HTML, Hojas de estilo del agente de usuario de Internet Explorery Valores predeterminados de la hoja de estilo CSS2.1 para el agente de usuario.
• Plantilla HTML5 - Una plantilla frontend completa que integra Normalize.css para proporcionar una base sólida para cualquier proyecto web.
• Web.dev: "Diseñar para la diversidad de navegadores" - Guía de Google para diseñar sitios web para una amplia gama de navegadores y dispositivos.

Con estos recursos, estarás bien equipado para integrar Normalize.css en tus proyectos y superar los retos de la compatibilidad entre navegadores con facilidad. ¡Buena suerte con tu desarrollo!