--- title: Normalize.css - ¿Qué es? - isla Studio url: https://isla-stud.io/css/normalize-css-was-ist-das/ fecha: 2015-06-13 --- # Normalise.css - ¿Qué es esto? Como desarrollador web, me enfrento regularmente al reto de garantizar diseños coherentes en diferentes navegadores. Al hacerlo, me he encontrado repetidamente con Normalize.css, una herramienta que se ha establecido como indispensable para el desarrollo web moderno en los últimos años. Profundicemos en el tema y descubramos por qué Normalize.css es tan potente y cómo sacarle el máximo partido. ¿Qué es Normalize.css y por qué es importante? Normalize.css es una biblioteca CSS desarrollada por Nicolas Gallagher y Jonathan Neal para normalizar los estilos por defecto de los elementos HTML en los distintos navegadores. El objetivo es eliminar las diferencias en la presentación estándar de los elementos sin suprimir los valores por defecto útiles de los navegadores. Esto contrasta con los reajustes clásicos 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 estilos Normalize.css se utiliza actualmente en varios proyectos: Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, 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: Coherencia entre navegadores: se ocupa de muchas diferencias menores pero cruciales en la visualización de elementos entre distintos navegadores, como el manejo de campos de entrada, estilos de botones y diseños de tablas. Esto reduce el esfuerzo necesario para la depuración y garantiza una base estandarizada. Ampliación de la compatibilidad con HTML5: HTML5 trajo consigo muchos elementos y atributos nuevos que a menudo no se muestran correctamente en navegadores antiguos. Normalize.css garantiza que estos elementos se muestren de forma coherente y correcta en todos los navegadores habituales. Por ejemplo, el elemento summary, que está pensado para su uso en elementos details, se muestra de forma coherente en navegadores antiguos. Tipografía optimizada: Normalize.css también contiene ajustes tipográficos para garantizar que el texto sea coherente y legible en todas las plataformas. Esto incluye el ajuste de la altura de línea, la normalización del tamaño de fuente y la eliminación de márgenes innecesarios en elementos de texto estándar. Formularios y elementos de entrada: uno de los aspectos más problemáticos del desarrollo web es la visualización de elementos de formulario. Los distintos navegadores manejan estos elementos de forma muy diferente, lo que puede dar lugar a diferencias considerables en su apariencia. Normalize.css normaliza estos estilos proporcionando estilos base coherentes para los elementos input, textarea, select y button. Estructura modular: El código de Normalize.css está dividido en secciones separadas y bien documentadas. Esto le permite utilizar partes individuales específicas 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 preserva 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. „Normalise.css corrige errores generales”. Se corrigen errores generales en navegadores de escritorio y móviles que quedan fuera del ámbito de aplicación de la normalización. Esto incluye las reglas de visualización de elementos HTML5, la corrección del tamaño de fuente del texto preformateado, los solapamientos SVG en IE9 y muchos errores multiplataforma y entre navegadores en formularios. A continuación, por ejemplo, puede ver cómo la hoja de estilo normalise.css hace que el nuevo valor del atributo de entrada HTML5 "search" del atributo type sea coherente y diseñable en todos los navegadores: /** * 1. la apariencia de las direcciones se establece como campo de búsqueda en S5, 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 sean coherentes a la hora de decidir 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 estilos 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. Una vista bien conocida en la herramienta de depuración del navegador cuando se utiliza un restablecimiento de CSS ”Normalise.css es modularmente utilizable”. El proyecto se ha dividido 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 amplia documentación”. El código de 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 En primer lugar, instala o descarga la hoja de estilos normalize.css de GitHub. Hay varias formas de utilizar Normalize.css de forma eficaz. Debes observar los siguientes procedimientos: Adaptación a los requisitos 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. Integración sin modificaciones: También puede integrar Normalize.css en su proyecto sin cambios y adaptar estilos específicos en un archivo CSS independiente. 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. Tiempos de carga optimizados: Asegúrate de que sólo utilizas las partes de Normalize.css que realmente necesitas. 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 Opera (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 desarrolla 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”. Más material de lectura Para profundizar en sus conocimientos y trabajar directamente con Normalize.css, aquí encontrará una lista de recursos útiles: “CSS: The Definitive Guide” de Eric Meyer - Un libro exhaustivo que describe las complejidades de CSS y proporciona técnicas útiles para manejar las incompatibilidades entre navegadores. MDN Web Docs: „CSS Cross-Browser Development” - Una excelente fuente de información actualizada sobre desarrollo CSS multiplataforma. „HTML5 and CSS3 All-in-One For Dummies” de Andy Harris - Proporciona una introducción fácil de entender al desarrollo de HTML5 y CSS3 y muestra cómo Normalize.css puede integrarse en proyectos modernos. Normalize.css en GitHub - Página oficial GitHub del proyecto con el código fuente y la documentación. MDN Web Docs: „CSS User Agent Style Sheets” - Información detallada sobre los estilos estándar del agente de usuario en varios navegadores. Información detallada sobre los estilos de agente de usuario estándar: Sugerencias del WHATWG para la representación de documentos HTML, Hojas de estilo del agente de usuario de Internet Explorer y Valores predeterminados de las hojas de estilo del agente de usuario de CSS2.1. HTML5 Boilerplate - Una completa plantilla de frontend que integra Normalise.css para proporcionar una base sólida a cualquier proyecto web. Web.dev: „Designing for Browser Diversity” - 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.