Podcast de CSS - 005: Herencia
Supongamos que acabas de escribir algunos CSS para hacer que los elementos parezcan un botón.
<a href="http://example.com" class="my-button">I am a button link</a>
.my-button {
display: inline-block;
padding: 1rem 2rem;
text-decoration: none;
background: pink;
font: inherit;
text-align: center;
}
Luego, agregas un elemento de vínculo
a un artículo de contenido
con un valor class
de .my-button
. Sin embargo, hay un problema,
el texto no es del color que esperabas. ¿Cómo ocurrió esto?
Algunas propiedades de CSS se heredan si no especificas un valor para ellas.
En el caso de este botón, heredó la color
de este CSS:
article a {
color: maroon;
}
En esta lección, descubrirás por qué sucede eso y cómo la herencia es una función potente que ayuda a escribir menos CSS.
Flujo de herencia
Veamos cómo funciona la herencia. con este fragmento de HTML:
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
El elemento raíz (<html>
) no heredará nada porque es el primer elemento del documento.
Agrega CSS al elemento HTML.
y empieza a caer en cascada.
html {
color: lightslategray;
}
La propiedad color
se hereda de forma predeterminada por otros elementos.
El elemento html
tiene color: lightslategray
,
Por lo tanto, todos los elementos que pueden heredar color ahora tendrán un color de lightslategray
.
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
Solo <p>
tendrá texto en cursiva porque es el elemento anidado más profundo.
La herencia solo fluye hacia abajo, no hacia arriba hasta los elementos superiores.
¿Qué propiedades se heredan de forma predeterminada?
No todas las propiedades de CSS se heredan de forma predeterminada. pero hay muchas que sí lo son. A modo de referencia, aquí está la lista completa de propiedades que se heredan de manera predeterminada. tomado de la referencia W3 de todas las propiedades de CSS:
- azimut
- borde-contraído
- border-spacing
- en el título
- color
- cursor
- direction
- celdas-vacías
- font-family
- font-size
- tipo de fuente
- font-variant
- peso de la fuente
- fuente
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- huérfanos
- citas
- alinear con texto
- sangría de texto
- text-transform
- visibilidad
- espacio-blanco
- viudas
- word-spacing
Cómo funciona la herencia
Cada elemento HTML tiene cada propiedad de CSS definida de forma predeterminada con un valor inicial. Un valor inicial es una propiedad que no se hereda y se muestra como predeterminada si la cascada no puede calcular un valor para ese elemento.
Las propiedades que se pueden heredar en cascada
y los elementos secundarios obtendrán un valor calculado que representa el valor del elemento superior.
Esto significa que si un elemento superior tiene font-weight
establecido en bold
, todos los elementos secundarios estarán en negrita.
a menos que su font-weight
esté configurado en un valor diferente,
o la hoja de estilo del usuario-agente tiene un valor de font-weight
para ese elemento.
Cómo heredar y controlar la herencia de manera explícita
La herencia puede afectar los elementos de formas inesperadas, por lo que CSS tiene herramientas para ayudar con eso.
La palabra clave inherit
Puedes hacer que cualquier propiedad herede el valor calculado de su elemento superior con la palabra clave inherit
.
Una manera útil de usar esta palabra clave es crear excepciones.
strong {
font-weight: 900;
}
Este fragmento de CSS establece que todos los elementos <strong>
tengan un font-weight
de 900
,
en lugar del valor predeterminado bold
, que sería el equivalente de font-weight: 700
.
.my-component {
font-weight: 500;
}
En su lugar, la clase .my-component
establece font-weight
en 500
.
Para que los elementos <strong>
dentro de .my-component
también, agrega font-weight: 500
:
.my-component strong {
font-weight: inherit;
}
Ahora, los elementos <strong>
dentro de .my-component
tendrán un font-weight
de 500
.
Podrías establecer este valor de forma explícita,
pero, si usas inherit
y el CSS de .my-component
cambia en el futuro,
puedes garantizar que tu <strong>
se mantendrá actualizado automáticamente.
La palabra clave initial
La herencia puede causar problemas con tus elementos y initial
te proporciona una potente opción de restablecimiento.
Anteriormente, aprendiste que cada propiedad tiene un valor predeterminado en CSS.
La palabra clave initial
vuelve a establecer una propiedad en ese valor inicial predeterminado.
aside strong {
font-weight: initial;
}
Este fragmento quitará el grosor en negrita de todos los elementos <strong>
dentro de un elemento <aside>
y, en su lugar,
convertirlas en un peso normal, que es el valor inicial.
La palabra clave unset
La propiedad unset
se comporta de manera diferente si una propiedad se hereda de forma predeterminada o no.
Si una propiedad se hereda de forma predeterminada,
la palabra clave unset
será igual a inherit
.
Si la propiedad no se hereda de forma predeterminada, la palabra clave unset
será igual a initial
.
Recordar qué propiedades de CSS se heredan de forma predeterminada puede ser difícil,
unset
puede ser útil en ese contexto.
Por ejemplo, color
se hereda de forma predeterminada,
pero margin
no lo es, por lo que puedes escribir esto:
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
}
/* The p needs to be reset in asides, so you can use unset */
aside p {
margin: unset;
color: unset;
}
Ahora, se quita margin
y color
se revierte a ser el valor calculado heredado.
También puedes usar el valor unset
con la propiedad all
.
Volviendo al ejemplo anterior,
¿Qué sucede si los diseños p
globales tienen algunas propiedades adicionales?
Solo se aplicará la regla que se estableció para margin
y color
.
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
padding: 2em;
border: 1px solid;
}
/* Not all properties are accounted for anymore */
aside p {
margin: unset;
color: unset;
}
Si cambias la regla aside p
a all: unset
, ocurrirá lo siguiente:
no importa qué estilos globales se apliquen a p
en el futuro,
nunca se establecerá.
aside p {
margin: unset;
color: unset;
all: unset;
}
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre herencia
¿Cuáles de las siguientes propiedades son heredables?
animation
font-size
color
text-align
line-height
Qué valor se comporta como inherit
, a menos que no haya nada para heredar.
se comporta como initial
?
reset
unset
superset