Los mejores recursos para dar reset a las propiedades de estilos CSS de los Navegadores Web

¿Sabías qué los navegadores aplican estilos CSS por defecto? Aquí te explico por qué y como puedes dar "reset" a los estilos CSS del navegador.

Imagen de portada con el texto: "Recursos para resetear las propiedades de estilos CSS de los Navegadores Web".

Algunas veces, quizá pasas un tiempo intentando aplicar ciertos estilos CSS y no obtienes los resultados CSS 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 con el fin, de 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.

Imagen comparativa aplicando reset a los estilos por defecto de los navegadores. Estalab.com, fue un antiguo proyecto con el que divulgaba mis conocimientos en desarrollo web.

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.

GitHub - vladocar/CSS-Mini-Reset: CSS Mini Reset
CSS Mini Reset. Contribute to vladocar/CSS-Mini-Reset development by creating an account on GitHub.

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.

HTML5 Reset Stylesheet | HTML5 Doctor

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.

HTML5-Reset/reset.css at master · murtaugh/HTML5-Reset
A simple set of best practices to get HTML5 projects off on the right foot. - HTML5-Reset/reset.css at master · murtaugh/HTML5-Reset

Reset CSS

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.

meyerweb.com
The web home of Eric A. Meyer, CSS guy; and his wife Kathryn, doctor of nursing.

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.

GitHub - joshuarudd/typeset.css: A no-nonsense CSS typography reset for styling user-generated content like blog posts, comments, and forum content.
A no-nonsense CSS typography reset for styling user-generated content like blog posts, comments, and forum content. - GitHub - joshuarudd/typeset.css: A no-nonsense CSS typography reset for styling...

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.

Cleanslate

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.

Normalize.css: Make browsers render all elements more consistently.

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.

sanitize.css

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.

Suscríbete a nuestro boletín mensual

* indicates required

Powered by Mailchimp