/ CSS

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

Todo buen principiante del diseño web, ignora lo importante que es aplicar algún tipo de reset a las hojas de estilos que corren por defecto en los navegadores web.

De ahí esa sensación de frustración, cuando sus estilos no se aplican correctamente bajo ciertos parámetros, e investigan como locos qué ocurre y el por qué sus estilos CSS no se aplican correctamente o de forma homogénea en los diferentes navegadores web.

Reset a estilos CSS

La solución a estos inconvenientes, es dar en primera instancia, 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 habrá que crear unas instrucciones que se encarguen de decirle al Navegador web que no aplique los valores de las propiedades de sus 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; pues existen una serie de recursos desarrollados 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.

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.

Observa este recurso en 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 y , 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

Este Reset ha sido desarrollado por Eric Meyer’s (Personaje que mencioné anteriormente en: HTML5 Reset Stylesheet). Este Reset anula las propiedades CSS dándoles por defecto el valor ‘0’ 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.

Marx 

Este reset es una hoja de estilos CSS Boilerplate para el desarrollo de pequeños proyectos web, como por ejemplo Landing pages o sitios web constituidos solamente por su página index. Entonces si tu proyecto no necesita un gran Framework como Bootstrap o Foundation, entonces este Reset es el que debes de considerar usar.

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.

Para implementar Typeset.css, deberás hacerlo de la siguiente manera.

Blog Post Title

My blog post.

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 más popular, de hecho 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 de la nueva era.

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.

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

Subscribe to Esteban con Gafas