El nuevo reset de CSS
En este artículo vamos a profundizar en un recurso ya bastante conocido por la comunidad de desarrolladores frontend, como es el reset de CSS. Además te vamos a presentar el nuevo reset que ofrece alguna ventajas interesantes que creemos deberías de conocer.
Qué es un reset de CSS
Lo que denominamos reset de CSS es una lista de reglas de CSS que tienen como objetivo ofrecer una base sobre la cual luego cada desarrollador creará el CSS específico para un sitio web.
Esta base de estilos CSS se aplica para cubrir un par de objetivos:
- Eliminar los estilos predeterminados de los navegadores, de modo que no afecten al estilo que se desea para una página web
- Pero aún más importante, ofrecer una base común para todos los browsers, de modo que se minimicen o se eliminen completamente las posibles diferencias que una web puede tener al verse renderizada en distintos software para la navegación
Los motivos por los que los reset se han popularizado tanto son ahora menos importantes, ya que los navegadores respetan ampliamente los estándares y en el fondo su manera de interpretar el HTML es bastante similar. Sin embargo, en su momento, cuando la guerra de navegadores era más encarnizada, existían tantas diferencias en la manera de visualizarse la página en uno u otro navegador que los hacían imprescindibles. No obstante, siguen estando entre las herramientas básicas de los desarrolladores frontend precisamente por la seguridad que nos ofrecen, al saber que partimos de una base de CSS homogénea ante cualquier navegador pasado o futuro.
Cómo funcionan los reset de CSS clásicos
Generalmente, un reset de CSS se construye especificando un listado de reglas de estilos que se aplican de manera global a todas las etiquetas. Lo más básico sería lo siguiente:
- Elimina el margin
- Elimina el padding
- Setea el mismo tamaño de letra para todos los elementos HTML
- Elimina el borde
- Etc.
Además, para etiquetas específicas también realizan algunas definiciones extra, como por ejemplo:
- Elimina los bullets de las listas
- Define el display de los elementos que se supone son bloque o inline
- Elimina el espaciado entre celdas de las tablas
Encima de ese reset básico nosotros necesitamos aplicar el CSS particular para el sitio web. Siempre definiendo nuestras propias reglas más tarde, para asegurarnos de que sobreescriben las reglas del reset CSS.
Cómo funciona el nuevo reset de CSS
El nuevo reset de CSS que os compartimos hoy tiene un enfoque diferente del que acabamos de comentar. La diferencia básica es que:
- El reset CSS clásico añade reglas encima del CSS del navegador particular del usuario (user-agent). Podemos verlo como una especie de traje que le colocamos encima del vestido que ya tenía el propio navegador. O como un tachado encima de las reglas existentes, que trata de ofuscarlas.
- El nuevo reset de CSS simplemente aplica unas instrucciones CSS que eliminan las reglas predeterminadas del navegador. Es como si, en vez de ponerle una nueva ropa encima de la que ya tenía, desnudásemos al navegador para dejarlo completamente vacío
Este nuevo reset tiene la ventaja que no instala más reglas encima de las existentes, sino que simplemente quita las reglas CSS que existían antes, por lo que en la práctica puede potencialmente agregar mayor rendimiento a nuestros sitios web y producir menor consumo de memoria en los dispositivos.
Las nueva reglas de este reset CSS se basan en las siguientes propiedades y valores:
all: unset;
Este valor unset aplicado sobre el atributo all produce que todas las reglas CSS de un elemento se eliminen.
display: revert;
El valor revert aplicado sobre un atributo CSS produce que cierta propiedad recupere el valor que el navegador tenía como base.
Ahora podemos ver una regla más compleja que usa esas dos propiedades y valores:
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {all: unset; display: revert;}
Este selector aplica el unset y el revert al display, sobre todas las etiquetas del HTML, excluyendo un pequeño conjunto de ellas que realmente sí requieren estilos.
Otros estilos del reset CSS
A partir de aquí el reset continúa con esa filosofía, aplicando otra serie de reverts en asuntos importantes, como restablecer el cursor predeterminado a los enlaces, para que siga apareciendo la mano indicando que se puede hacer clic y otras cosas similares.
Lo mejor que puedes hacer para complementar la información es acceder al nuevo reset de CSS y ver el código por tu propia cuenta. Con lo que te hemos contado en este artículo estamos seguros que lo podrás entender todo perfectamente.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.