¡Hola gente bonita!👋
CSS tiene "Global Keywords" o palabras clave por defecto. En este artículo voy a hablar de cuatro de ellas: initial, inherit, unset y revert.
También se les conoce como palabras clave de restablecimiento de CSS porque nos permiten restablecer el CSS como queramos. Vamos a repasarlas:
initial
Cada propiedad de CSS tiene un valor inicial. Este valor inicial no tiene relación con el tipo de elemento HTML al que se aplica.
Por ejemplo, el valor por defecto de font-weight es normal Esto lo podemos comprobar con la documentación de la MDN en el cual se nos especifica los valores iniciales de cada propiedad:
Entonces al declarar font-weight: initial, es lo mismo que declarar: font-weight: normal. Veamos otro ejemplo:
.foo{
position: absolute;
top: 20px;
left: 20px;
}
.bar .foo{
position: initial; /* = static */
top: initial; /* = auto */
left: initial; /* = auto */
}
🧠 Recuerda, la palabra clave initial establece el valor de una propiedad CSS al valor inicial definido, lo que en cierto modo significa que "restablece" el valor.
Curiosamente todos los elementos HTML utilizan la propiedad display con el valor inline. Recuerda que que cada propiedad en CSS tiene sólo un valor por defecto y para la propiedad display, el valor inicial es siempre inline.
Si reseteamos la propiedad display en un elemento HTML cuyo valor por defecto es block, como el elemento <div>, esto nos devolverá al valor inline. ¡Vamos a comprobarlo!
div{
display: block; /* browser default styles */
}
div {
display: initial; /* es igual a inline */
}
Ahora la pregunta que debemos hacernos es: ¿Por qué el elemento HTML <div> es un elemento de bloque o se comporta con el valor display: block?
La respuesta está en el user-agent-stylesheet (hoja de estilo) del navegador.
Cuando creamos páginas web, el navegador carga su propia hoja de estilos CSS antes de que carguemos una sola línea de CSS, esto quiere decir, que cada navegador viene con cierta cantidad de CSS por defecto que llamamos user-agent-stylesheet.
Entonces todos los elementos HTML que por defecto tienen un valor de block, esto es sólo porque el navegador decide añadirles la propiedad display con un valor de block. Si inspeccionamos el elemento <div> tiene el valor de block por esta razon:
Esto quiere decir que muchas etiquetas HTML tienen asignado estilos CSS del navegador aunque no lo hayas especificado.
Todos los elementos tienen establecido un valor de la propiedad display que puede ser inline o puede ser block gracias a la hoja de estilo del navegador.
La única razón por la que tenemos esas diferencias entre los distintos tipos de elementos HTML (block vs inline) es porque el navegador carga su propio CSS.
Para tener una idea de como es la hoja de estilo de cada navegador (Chrome, Firefox) en los recursos de este articulo dejare los enlaces para que les des un vistazo.
Sin embargo, NO todas las propiedades tienen valores iniciales definidos explícitamente. Por ejemplo, el valor inicial de la propiedad color es "depende del agente de usuario". Lo que significa es que el valor por defecto del color depende de cosas como la configuración de las preferencias del navegador:
La mayoría de los usuarios no cambia la configuración del color del texto, pero alguien podría establecerlo a un gris o incluso un rojo. Al declarar color: initial; le estás diciendo al navegador que establezca el color del elemento a cualquier color que establezca el usuario.
🌐 Los estilos del navegador
Después de aplicar los estilos iniciales de todas las propiedades CSS, el navegador carga sus estilos. Estos estilos del navegador no tienen nada que ver con los valores iniciales de las propiedades CSS.
Aquí hay un ejemplo de los estilos del agente de usuario aplicados a la etiqueta <h1>. Si inspeccionas el elemento con la DevTools podrás ver lo siguiente:
Fíjate en la propiedad font-weight aplicada al <h1>, ¿te has dado cuenta que su valor es bold? Como te mencione al principio el valor inicial por defecto de la propiedad font-weight es normal, lo que nos quiere decir que los estilos del <h1> son estilos del navegador.
Tienes que recordar y comprender que: ¡Los elementos HTML no tienen valores de estilo iniciales! Los estilos básicos de un elemento HTML, como la etiqueta <h1> por ejemplo, provienen de la hoja de estilos del agente de usuario del navegador, y no del valor inicial de las propiedades de CSS.
Para entender la palabra clave initial, tenemos que recordar un dato importante: Cada propiedad en CSS tiene un valor por defecto, que no tiene nada que ver con el valor por defecto del agente de usuario. Los estilos del agente de usuario son los estilos básicos que el navegador aplica a los elementos HTML en el navegador. Tendemos a pensar que vienen automáticamente con el HTML, pero no es así.
inherit
La palabra clave inherit (heredar) hace que el valor de una propiedad en un elemento sea el mismo que el valor de su elemento padre.
El valor inherit obliga a que la herencia se produzca incluso en situaciones en las que normalmente no funcionaría.
El proceso ocurre de la siguiente manera:
La palabra clave
inheritle dice al navegador que busque el valor del elemento padre más cercano y que el elemento actual herede ese valor.Si el padre más cercano también tiene el valor
inherit, el navegador continuará subiendo por el DOM hasta encontrar algún valor.Si no hay ningún valor, el navegador utilizará su estilo de agente de usuario, y si no hay ningún estilo de agente de usuario, utilizará el estilo base inicial o el valor inicial que ya vimos arriba.
Vamos a ver el siguiente ejemplo:
<nav class="toolbar">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</nav>
.toolbar {
background-color: blue;
color: white;
}
El nav tendrá un fondo azul, pero los enlaces tendrán otro estilo acorde con la configuración de preferencias del navegador.
Puede escribir una regla que establezca explícitamente que los enlaces sean de color blancos pero puede hacer que las cosas sean un poco más robustas usando inherit. Sólo tiene que añadir la siguiente regla a la hoja de estilos:
.toolbar {
background-color: blue;
color: white;
}
.toolbar a{
color: inherit;
}
Esto hará que los enlaces utilicen el valor heredado del color en lugar de los estilos por defecto del agente de usuario.
Como dije al principio podemos hacer que la herencia se produzca incluso en situaciones en las que normalmente no funcionaría, por ejemplo la propiedad padding por defecto, no se puede heredar pero podemos hacer que si se herede, seguiremos con el ejemplo anterior:
.toolbar {
padding: 20px;
}
.toolbar a{
padding: inherit;
}
En este caso todos los enlaces heredaran el valor de la propiedad padding del elemento padre, a pesar de que dicha propiedad no se herede por defecto.
En muchos casos, no es necesario especificar la herencia, ya que muchas propiedades se heredan de forma natural. Sin embargo, heredar puede ser muy útil.
En cualquier caso, así es como funciona la palabra clave inherit. Usarla para el font-size o el color puede ser en ocasiones una buena idea. En otros contextos - raramente.
Y toma en cuenta la diferencia entre propiedades heredables y no heredables. Será importante más adelante.
unset
La palabra clave unset actúa como un sustituto universal tanto de inherit como de initial.
El valor unset restablecerá automáticamente el valor de una propiedad según el tipo de propiedad.
Recordemos que en CSS, hay dos tipos de propiedades:
Propiedades heredadas: Si la propiedad es heredada, entonces
unsettiene el mismo efecto que si se usarainherit.Propiedades no heredadas: Si la propiedad no se hereda, entonces
unsettiene el mismo efecto que si se usarainitial.
El valorunsetfuncionará igual que el valor inicialinitial, es decir, aplicará el valor por defecto de CSS.
Por ejemplo, position: unset será igual a position: initial porque es una propiedad no heredada.
Pero cuando usamos el valor unset en la propiedad font-size, por ejemplo, font-size: unset, será igual a font-size: inherit porque font-size es una propiedad heredada.
.element * {
/* inherit properties */
font-size: unset;
font-weight: unset;
/* non-inherited properties */
border-width: unset;
background-color: unset;
}
/* work the same way as */
.element * {
/* inherit properties */
font-size: inherit;
font-weight: inherit;
/* non-inherited properties */
border-width: initial;
background-color: initial;
}
Veamos otro ejemplo:
.some-class{
color: unset; /* will be equal to 'inherit' value */
display: unset; /* will be equal to 'initial' value*/
}
🤔 ¿Por qué utilizar unset si funciona exactamente igual que Inherit e Initial?
Si unset actúa como initial y inherit, ¿por qué querríamos usar unset?
Si sólo estamos restableciendo una propiedad, entonces unset es innecesario: podemos usar los valores inherit o initial en su lugar.
Pero hoy en día tenemos una nueva propiedad llamada all que trae consigo una nueva capacidad: ¡restablecer todas las propiedades heredadas y las no heredadas a la vez!
De esta nueva manera, no es necesario restablecer las propiedades una por una. Así, aplicando el valor "unset" a la propiedad "all" se restablecerán todas las propiedades heredadas a "inherit" y todas las no heredadas a "initial".
¡Esta es la única razón de la existencia del nuevo valor de la palabra clave unset! De lo contrario, podríamos utilizar los valores inherit e initial en su lugar.
En lugar de restablecer las propiedades una por una, por ejemplo:
/* Bad */
.common-content *{
font-size: inherit;
font-weight: inherit;
border-width: initial;
background-color: initial;
}
Podemos utilizar la nueva propiedad all con el valor unset, que afectará a todas las propiedades existentes, por ejemplo:
/* Good */
.common-content *{
all: unset;
}
revert
Pero, ¿Qué pasa si queremos restablecer los estilos de la propiedad a su estilo original del agente de usuario y no al estilo base de la propiedad? Por ejemplo, ¿revertir la propiedad display de un elemento <div> a block (su estilo de agente de usuario) y no inline (su estilo base CSS)?
Para ello, pronto tendremos una nueva palabra clave CSS: revert. La palabra clave revert es muy similar a unset, con la única diferencia de que prefiere los estilos del agente de usuario al estilo básico de la propiedad CSS.
Ya hemos hablado de los estilos base de CSS y de los estilos de agente de usuario del navegador. Los estilos base de CSS son los valores por defecto de las propiedades de CSS. Son los valores naturales por defecto que vienen con las propiedades.
Los estilos del agente de usuario del navegador son los valores establecidos por el navegador. Cuando se carga una página, el navegador tiene sus estilos para algunas propiedades CSS.
Por ejemplo, la propiedad display (que ya te explique anteriormente cuando mencione el valor initial), tiene un valor base CSS, que es inline. Este es su valor natural del motor CSS. Ahora, el navegador cambia el estilo de la propiedad display a block.
El estilo del navegador no es más que añadir sus propios archivos css. La palabra clave revert, invierte los valores por defecto de CSS a los estilos del agente de usuario del navegador.
La palabra clave revert nos permite volver al estilo por defecto del navegador, el "User-Agent-Stylesheet". Por ejemplo:
div{
display: revert; /* = block */
}
h1{
font-weight: revert; /* = bold */
font-size: revert; /* = 2em */
}
De esta manera, si queremos restablecer todos los estilos de una etiqueta HTML al estilo base del navegador, podemos hacerlo así:
/* Good */
.element *{
all: revert;
}
El nuevo reset del futuro
El experto en HTML y CSS Elad Shechter nos comparte en su cuenta de Twitter “The CSS Reset of the Future”. En el cual nos muestra una nueva forma de crear un reset, utilizando la propiedad all y los valores unset y revert.
Quizás estarás pensando que utilizar un reset es una mala practica en estos días y esto sucede porque lo confundes con Normalize y el reset de 2007 de Eric Meyer que se utilizaba años antes. Pero tienes que conocer las diferencias entre un reset CSS y normalize. En los recursos de este post te dejare un articulo de Elad Shechter para que conozcas las diferencias.
🔎Recursos:
Gracias por leer🦸🏻♀️
Mis redes sociales donde comparto notas de código:
▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok
Top comments (3)
Thanks for sharing. Helpful definitions
Me gusta mucho este artículo porque se expone de forma teórica las hojas de estilos. No solo las propiedades, sino que se explica el por qué de las cosas.
Muchas gracias David!