Algunas veces, quizá pasas un tiempo intentando aplicar ciertos estilos CSS y no obtienes los resultados esperados o, quizá si obtienes un resultado, pero cuando visualizas el mismo diseño en otro navegador, este se ve completamente diferente.
Esto ocurre porque cada navegador web aplica estilos por defecto a los documentos HTML; esto, para mostrar de una forma más o menos decente un contenido HTML carente de CSS.
Este problema es muy común cuando no tenemos del todo claro el orden de declaración y especificidad en CSS y se agrava cuando no establecemos en “un estado inicial” por así decirlo, nuestro documento CSS.
Por eso he creado este artículo. Para iniciar un proyecto de diseño web, considero que sigas mi consejo de aplicar un código CSS que permite hacer reset o “resetear” los estilos que los navegadores aplican por defecto.
La solución, es dar una serie de instrucciones a través de nuestras hojas de estilos a los navegadores web, para que estos no apliquen de forma automática los estilos CSS que tienen predeterminados.
Entonces a través de código CSS se debe indicar unos estilos neutros para que el navegador web no aplique los valores de las propiedades en los selectores.
Por ejemplo Google Chrome posee por defecto estas instrucciones para los selectores <ul> y <li>. Que de no hacerse algo con ellos, dejará resultados un tanto desagradables en nuestros diseños web.
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
La intención aquí es entonces decirle a Google Chrome que no aplique estos estilos a los selectores <ul> y <li>; y en vez de ello aplique los nuestros.
Ya te estarás imaginando que será una tarea de dimensiones apocalípticas dar un formato estándar a todos los selectores conocidos y más aún discriminados por tipo de navegador.
Por fortuna esta es una tarea que al día de hoy no es necesaria hacer. Existen una serie de herramientas desarrolladas por personas de alma caritativa, que lo hacen por nosotros y lo comparten para uso libre y gratuito.
A continuación voy a listar una serie de recursos, que a mi juicio son los mejores para resetear los estilos CSS que vienen por defecto en los navegadores web.
Herramientas para resetear los estilos CSS de los navegadores
CSS Mini Reset
Este Reset es muy minimalista, desarrollado por Vladimir Carrer; solamente dispone de cuatro CSS reglas de estilos, las cuales resetea los elementos HTML más usados.
HTML5 Reset Stylesheet
Esta hoja de estilos Reset ha sido desarrollada por Richard Clark y es el resultado de una modificación del Reset CSS que desarrolló Eric Meyer’s. Este Reset va más allá innovando con los elementos HTML 5 más modernos.
Entre los ajustes que este Reset incorpora, es que elimina la pseudo-class (Lo siento toca spanglish) :focus y el uso de elementos que en una instancia minimizan el alcance de nuestras reglas de estilo.
Reset.css (De HTML5 Reset)
Esta hoja de estilos hace parte de HTML5 Reset Boilerplate. Esta excepción ha sido inspirada por tres proyectos de código abierto: Reset CSS, HTML5 Reset Stylesheet y HTML5 Boilerplate. Este Reset es muy robusto y estricto.
Reset CSS de Eric Meyer’s
Este Reset ha sido desarrollado por Eric Meyer’s (Personaje que mencioné anteriormente en: HTML5 Reset Stylesheet).
Este Reset anula las propiedades CSS aplicando por defecto el valor ‘cero’ o establece una propiedad a un valor que sea de sentido común (por ejemplo: line-height: 1 en el elemento). Declarando de esta forma, se pueden reducir inconsistencias a la hora de presentar nuestros elementos HTML en el navegador web.
Resets de uso especializado
Los dos recursos presentados a continuación, han sido desarrollados con propósitos específicos.
Typeset.css
Esta hoja de estilos CSS Reset está hecha para tipografía Web. Es decir, los proyectos para los cuales funciona perfectamente este recurso son Blogs y portales de noticias, en pocas palabras, sitios Web cargados de texto.
Este recurso para resetear CSS es muy particular porque únicamente funciona sobre elementos HTML que son hijos de un elemento cuya clase es typeset.
Cleanslate
Este Reset CSS es el más agresivo de todos. Esta diseñado para usar en contenidos que pueden ser distribuidos en otros sitios web, en un escenario donde el control sobre las reglas de estilo son severamente estrictas.
Cleanslate usa la declaración !important en todos los valores de las propiedades para forzar a los navegadores Web no seguir las reglas CSS por defecto.
Las opciones modernas
Normalize.css
De hecho este es el recurso para dar reset CSS más popular, es usado en sitios como Twitter y GitHub, y está incluido dentro de proyectos como Bootstrap y HTML5 Boilerplate.
Sanitize.css
Desarrollado por Jonathan Neal co – autor de Normalize.css. las reglas de Sanitize.css son muy útiles para los elementos HTML en diferentes navegadores.
Esta normalización de hojas de estilos tiene una versión de Sass, la cual gusta mucho a los desarrolladores web Frontend de la nueva era.
Código básico para resetear estilos CSS
Comparto un pequeño código que permitirá resetear de una forma mínima los valores por defecto de los bloques en los navegadores. Además, de un código que nos permite trabajar más eficientemente con la medida relativa rem.
* {box-sizing: border-box;
margin: 0; padding: 0;}
html { /* Para utilizar rem */
font-size: 62.5%;}Nota: El orden de la lista no implica cual es el mejor recurso de todos. Sin embargo yo hago uso de Normalize.css ya que me parece muy completo. Eso en cuanto no hago uso de algún Framework HTML Y CSS en mis proyectos, ya que estos Frameworks traen por defecto un reset para estilos CSS.