¿Qué hace “revertir” en CSS?

Miriam Suzanne explica en un vídeo de Mozilla Developer sobre el tema.

El revertvalor en CSS “restablece” una propiedad a su valor heredado, y solo se remonta a la hoja de estilo UA. Esto es fundamental, ya que no restablecerá a pen línea, por ejemplo, porque a pes un elemento a nivel de bloque tal como se establece en la hoja de estilo de UA.

Entonces, si tuviéramos este HTML:

pLorem, ipsum dolor./ppFugit, 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 una mayor especificidad, por lo que color: revert;gana, cambiando el texto nuevamente a negro (el valor predeterminado de UA).

Pero la propiedad del color cae en cascada, así que si tuviéramos:

div  pLorem, ipsum dolor./p  pFugit, id vel./p/div

.parent {  color: blue;}p {  color: red;}.alt {  color: revert;}

El segundo párrafo sería blueporque revertle obliga a tomar su colorherencia.

El revertvalor 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 valores.

La diferencia es pequeña, pero importante: unsetpermite la herencia, mientras initialque no.

Miriam defiende que reverten realidad es el más útil de ellos porque “tiene en cuenta 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 forzado de initial, pero que respete la hoja de estilo de UA revert. Algo como…

.button {  all: default; /* Not real! */  /* New styles starting from UA base */}

Estas palabras clave funcionan con cualquier propiedad, pero creo que usarlas alles la más convincente. Es una forma de borrar todos los estilos de un elemento para comenzar desde cero. Dicho esto, ninguna de las tres opciones es lo suficientemente buena para ese caso de uso. Los valores unsety revertno son lo suficientemente buenos porque aún permiten la herencia y, por lo tanto, no eliminan los estilos lo suficientemente bien. El initialvalor es demasiado fuerte porque elimina valores predeterminados que quizás no esperes, como crear una divlínea en lugar de un bloque.

Si quieres conocer otros artículos parecidos a ¿Qué hace “revertir” en CSS? puedes visitar la categoría CSS.