heredar, inicializar, desarmar, revertir | Trucos CSS

Hay cuatro palabras clave que son valores válidos para cualquier propiedad CSS (consulte el título). De esos, día a día, diría que veo el inherit utilizado más. Quizás porque ha existido por más tiempo (¿creo?), Pero también porque tiene sentido lógico (“por favor, herede su valor del siguiente padre que lo establezca”). Es posible que vea eso con una anulación de un color de enlace, por ejemplo.

<footer>
  ©2012 Website — <a href="https://css-tricks.com/contact">Contact</a>
</footer>
/* General site styles */
a {
  color: blue;
}

footer {
  color: white;
}
footer a {
  color: inherit;
}

Esa es una forma decente y elegante de manejar el hecho de que desea que el texto y los enlaces en el pie de página sean del mismo color sin tener que configurarlo dos veces.

Sin embargo, los demás se comportan de manera diferente …

  • initial restablecerá la propiedad a la especificación predeterminada.
  • unset es extraño como diablos. Para una propiedad que se hereda (p. Ej. color) significa inherity para una propiedad que no se hereda (p. ej. float) significa initial. Eso es un trabalenguas para mí de tal manera que nunca lo he usado.
  • revert es igualmente extraño. El mismo trato para las propiedades heredadas, significa inherit. Pero para las propiedades no heredadas, significa volver a la hoja de estilo UA. Kinnnnnda útil en esa reversión display, por ejemplo, no hará un <p> elemento display: inline; pero seguirá siendo un sensato display: block;.

PPK cubrió todo esto con más detalle.

Me alegro de que haya encontrado mi lloriqueo por todo esto:

Chris Coyier sostiene que necesitamos un nuevo valor al que llama default. Vuelve a la hoja de estilo del navegador en todos los casos, incluso para las propiedades heredadas. Por lo tanto, es una versión más fuerte de revert. Estoy de acuerdo. Esta palabra clave sería realmente útil.

Amén. Tenemos cuatro propiedades para jugar con la cascada en propiedades individuales, pero ninguna que nos permita devolver todo a los valores predeterminados de la hoja de estilo UA. Si tuviéramos eso, tendríamos una herramienta muy poderosa para comenzar de cero con estilos en cualquier elemento dado. En un sentido: ¡estilos con alcance!

PPK tiene un quinto valor que cree que sería útil: cascade. La idea (supongo) es que actúa como currentColor excepto por cualquier propiedad. Algo así como una variable gratuita que no tiene que definir y que le da acceso a cuál habría sido el valor en cascada, excepto que lo va a usar en algún otro contexto (como un cálculo).

(Visited 1 times, 1 visits today)