Una hoja de estilos de restablecimiento (más conocida por su nombre en inglés, reset stylesheet o reset CSS) es un conjunto de reglas CSS que se utilizan para establecer unos valores iniciales para el formato de elementos HTML.
Su objetivo es minimizar las numerosas diferencias visuales que se producen al mostrar una misma página web en distintos navegadores, ya que cada navegador implementa su propia hoja de estilos interna con ciertos valores por defecto que no siempre siguen las recomendaciones de la organización World Wide Web Consortium (W3C).
Normalize.css al Rescate
Normalize.css es una alternativa moderna y preparada para los restablecimientos de CSS en HTML5. Hace que los navegadores rendericen todos los elementos de forma más consistente y en consonancia con los estándares modernos. Se centra de forma precisa sólo en los estilos que necesitan ser estandarizados.
Normalize.css es un pequeño archivo CSS que permite una mejor consistencia entre navegadores en la estilización por defecto de los elementos HTML.
Normalize.css es utilizado actualmente de alguna forma por Twitter Bootstrap, HTML5 Boilerplate, CSS Tricks, y muchos otros frameworks, kits de herramientas y webs.
Introducción
Normalize.css es una alternativa a los reseteos de CSS. El proyecto es el producto de 100 horas de investigación exhaustiva por parte de @necolas y @jon_neal sobre las diferencias entre los estilos por defecto de los navegadores.
Los objetivos de Normalize.css son los siguientes:
- Preservar los valores predeterminados útiles de los navegadores en lugar de borrarlos.
- Estandarizar los estilos de una amplia gama de elementos HTML.
- Corregir errores e incoherencias comunes en los navegadores.
- Mejorar la usabilidad con sutiles mejoras.
- Explicar el código mediante comentarios y documentación detallada.
Es compatible con una amplia gama de navegadores (incluidos los móviles) e incluye CSS que normaliza los elementos de HTML5, la tipografía, las listas, el contenido incrustado, los formularios y las tablas.
A pesar de que el proyecto se basa en el principio de la estandarización, utiliza valores prácticos por defecto cuando son recomendables.
Normalize vs Reset CSS
Merece la pena entender con más detalle en qué se diferencia Normalize.css del reset CSS tradicional.
Normalize.css Preserva los Valores por Defecto más Útiles
Los resets imponen un estilo visual más homogéneo al aplanar los estilos por defecto de casi todos los elementos. En cambio, Normalize.css conserva muchos estilos útiles por defecto de los navegadores. Esto quiere decir que no es necesario volver a declarar los estilos para todos los elementos tipográficos comunes.
Cuando un elemento tiene diferentes estilos por defecto en diferentes navegadores, Normalize.css tiene como objetivo hacer que esos estilos sean consistentes y estén alineados con los estándares modernos siempre que sea posible.
Normalize.css Corrige Errores Comunes
Corrige errores comunes de los navegadores de escritorio y móviles que están fuera del alcance de los reseteos. Esto incluye la configuración de visualización de los elementos HTML5, la corrección de font-size para el texto preformateado, el desbordamiento de los gráficos vectoriales escalables (SVG) en IE9 y muchos errores relacionados con los formularios en todos los navegadores y sistemas operativos.
Por ejemplo, así es como Normalize.css hace que el nuevo tipo de entrada de búsqueda de HTML5 sea consistente y estilizable entre navegadores:
/**
* 1. Corregir el aspecto extraño en Chrome y Safari.
* 2. Corregir el estilo de contorno en Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Eliminar el padding interior en Chrome y Safari en macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}Los reset CSS a menudo no consiguen que los navegadores tengan un punto de partida uniforme con respecto a la forma en que se representa un elemento. Esto es particularmente cierto en el caso de los formularios, un área en la que Normalize.css puede proporcionar una ayuda significativa.
Normalize.css No Entorpece las Herramientas de Depuración
Una de las molestias más comunes al utilizar los reseteos es la gran cadena de herencia que se muestra en las herramientas de depuración de CSS de los navegadores.
Esto no es un problema con Normalize.css debido a los estilos específicos y al uso cuidadoso de múltiples selectores en los conjuntos de reglas.
Normalize.css Es Modular
El proyecto se divide en secciones relativamente independientes, lo que facilita ver exactamente qué elementos necesitan estilos específicos. Además, ofrece la posibilidad de eliminar secciones (por ejemplo, las estandarizaciones de formularios) si sabes que nunca serán necesarias en tu sitio web.
Cómo Utilizar Normalize.css
Primero, instala o descarga Normalize.css de GitHub. A continuación, hay dos métodos básicos para su utilización.
- Utiliza Normalize.css como punto de partida para el CSS inicial de tu propio proyecto, modificando los valores para que se ajusten a los requisitos de tu diseño.
- Incluye Normalize.css sin modificar y empieza a trabajar en base a él, sobrescribiendo los valores predeterminados más adelante en tu CSS si lo consideras necesario.
Reflexiones Finales
Normalize.css es muy distinto en cuanto a su enfoque y forma de ejecución respecto a cualquier reset CSS. Es recomendable hacer pruebas para ver si se ajusta a tu forma de desarrollar y a tus preferencias.
El proyecto está desarrollado de forma abierta en GitHub. Cualquiera puede informar de problemas y enviar parches. El historial completo del proyecto está disponible para todo el mundo, y el contexto y el razonamiento en que se basan todos los cambios se pueden encontrar en los mensajes de commit y en los hilos de incidencias.
