Miriam Suzanne explica en un video de Mozilla Developer sobre el tema.
El revert El valor en CSS “restablece” una propiedad a su valor heredado, solo retrocediendo hasta la hoja de estilo UA. Eso es fundamental, ya que no restablecerá un <p> en línea, por ejemplo, porque un <p> es un elemento a nivel de bloque como se establece en la hoja de estilo UA.
Así que si tuviéramos este HTML:
<p>Lorem, ipsum dolor.</p>
<p class="alt">Fugit, id vel.</p>Y CSS:
p {
color: red;
}
.alt {
color: revert;
}Ambos párrafos serían seleccionados por el selector p, haciéndolos rojos, pero el selector de clase en el segundo párrafo tiene mayor especificidad, por lo que el color: revert; gana, cambiando el texto de nuevo a negro (el valor predeterminado de UA).
Pero, la propiedad del color cae en cascada, así que si tuviéramos:
<div class="parent">
<p>Lorem, ipsum dolor.</p>
<p class="alt">Fugit, id vel.</p>
</div>.parent {
color: blue;
}
p {
color: red;
}
.alt {
color: revert;
}El segundo párrafo sería blue porque revert lo obliga a tomar su color de herencia
El revert El valor es bastante nuevo, compatible con Firefox y Safari, pero aún no en Chrome-world. Ya tenemos un par de palabras clave relacionadas que funcionan en cualquier propiedad y que están destinadas a ayudar a controlar la herencia y restablecer los valores.
La diferencia es pequeña, pero importante: unset permite la herencia, mientras que initial no.
Miriam argumenta que revert es en realidad el más útil de ellos porque “toma en consideración los estilos de usuario y agente de usuario”.
no estoy en desacuerdo Pero (y odio decir esto) creo que necesitamos una cuarta opción, una que tenga el poder de fuerza de initial, pero la hoja de estilo UA respecto de revert. Algo como…
.button {
all: default; /* Not real! */
/* New styles starting from UA base */
}Estas palabras clave funcionan con cualquier propiedad, pero creo que usar all es el más convincente. Es una forma de eliminar todos los estilos en un elemento para comenzar con una pizarra en blanco. Dicho esto, ninguna de las tres opciones es lo suficientemente buena para ese caso de uso. El unset y revert los valores no son lo suficientemente buenos porque todavía permiten la herencia y, por lo tanto, no eliminan los estilos lo suficientemente bien. El initial El valor es demasiado fuerte en el sentido de que elimina los valores predeterminados que no podría esperar, como hacer un <div> en línea en lugar de bloque.