The CSS Podcast - 005: Inheritance
Digamos que você acabou de escrever um CSS para fazer com que os elementos pareçam um botão.
<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;
}
Em seguida, adicione um elemento de link a um artigo de conteúdo,
com um valor class
de .my-button
. No entanto, há um problema:
o texto não está na cor esperada. Como isso aconteceu?
Algumas propriedades do CSS herdam se você não especificar um valor para elas.
No caso desse botão, ele herdou o color
deste CSS:
article a {
color: maroon;
}
Nesta lição, você vai aprender por que isso acontece e como a herança é um recurso poderoso para ajudar a escrever menos CSS.
Fluxo de herança
Vamos conferir como a herança funciona, usando este snippet de HTML:
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
O elemento raiz (<html>
) não herda nada porque é o primeiro elemento do documento.
Adicione um pouco de CSS ao elemento HTML,
e ele começa a cair em cascata no documento.
html {
color: lightslategray;
}
A propriedade color
é herdada por padrão por outros elementos.
O elemento html
tem color: lightslategray
.
Portanto, todos os elementos que podem herdar a cor agora terão uma cor de lightslategray
.
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
Somente o <p>
terá texto em itálico, porque é o elemento anidado mais profundo.
A herança flui apenas para baixo, não para elementos pais.
Quais propriedades são herdadas por padrão?
Nem todas as propriedades do CSS são herdadas por padrão, mas muitas são. Para referência, aqui está a lista completa de propriedades herdadas por padrão, extraida da referência W3 de todas as propriedades CSS:
- azimute
- border-collapse
- border-spacing
- legenda-lado
- cor
- cursor
- direction
- células-vazias
- font-family
- font-size
- font-style
- font-variant
- font-weight
- fonte
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- órfãos
- citações
- text-align
- text-indent
- text-transform
- visibilidade
- white-space
- viúvas
- word-spacing
Como a herança funciona
Cada elemento HTML tem todas as propriedades CSS definidas por padrão com um valor inicial. Um valor inicial é uma propriedade que não é herdada e aparece como padrão se a cascata não conseguir calcular um valor para esse elemento.
As propriedades que podem ser herdadas são aplicadas em cascata para baixo,
e os elementos filhos recebem um valor calculado que representa o valor do elemento pai.
Isso significa que, se um elemento pai tiver font-weight
definido como bold
, todos os elementos filhos serão em negrito,
a menos que o font-weight
deles seja definido como um valor diferente
ou que a folha de estilos do agente do usuário tenha um valor para font-weight
para esse elemento.
Como herdar e controlar a herança de forma explícita
A herança pode afetar elementos de maneiras inesperadas. Por isso, o CSS tem ferramentas para ajudar nisso.
A palavra-chave inherit
É possível fazer com que qualquer propriedade herde o valor computado da entidade pai com a palavra-chave inherit
.
Uma maneira útil de usar essa palavra-chave é criar exceções.
strong {
font-weight: 900;
}
Esse snippet de CSS define que todos os elementos <strong>
tenham um font-weight
de 900
,
em vez do valor padrão bold
, que seria o equivalente de font-weight: 700
.
.my-component {
font-weight: 500;
}
A classe .my-component
define font-weight
como 500
.
Para que os elementos <strong>
dentro de .my-component
também sejam font-weight: 500
, adicione:
.my-component strong {
font-weight: inherit;
}
Agora, os elementos <strong>
dentro de .my-component
terão um font-weight
de 500
.
É possível definir esse valor explicitamente,
mas se você usar inherit
e o CSS de .my-component
mudar no futuro,
garanta que o <strong>
seja atualizado automaticamente.
A palavra-chave initial
A herança pode causar problemas com seus elementos, e initial
oferece uma opção de redefinição eficiente.
Você aprendeu anteriormente que cada propriedade tem um valor padrão no CSS.
A palavra-chave initial
define uma propriedade de volta para esse valor padrão inicial.
aside strong {
font-weight: initial;
}
Esse snippet remove o peso em negrito de todos os elementos <strong>
dentro de um elemento <aside>
e os torna de peso normal, que é o valor inicial.
A palavra-chave unset
A propriedade unset
se comporta de maneira diferente se uma propriedade é herdada por padrão ou não.
Se uma propriedade for herdada por padrão,
a palavra-chave unset
será igual a inherit
.
Se a propriedade não for herdada por padrão, a palavra-chave unset
será igual a initial
.
Lembrar quais propriedades do CSS são herdadas por padrão pode ser difícil,
unset
pode ser útil nesse contexto.
Por exemplo, color
é herdado por padrão,
mas margin
não é. Você pode escrever o seguinte:
/* 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;
}
Agora, o margin
foi removido e o color
voltou a ser o valor computado herdado.
Você também pode usar o valor unset
com a propriedade all
.
Voltando ao exemplo acima,
o que acontece se os estilos p
globais receberem mais algumas propriedades?
Somente a regra definida para margin
e color
será aplicada.
/* 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;
}
Se você mudar a regra aside p
para all: unset
,
não importa quais estilos globais são aplicados ao p
no futuro.
Eles sempre serão redefinidos.
aside p {
margin: unset;
color: unset;
all: unset;
}
Teste seu conhecimento
Teste seus conhecimentos sobre herança
Quais das propriedades a seguir são herdadas por padrão?
text-align
line-height
color
font-size
animation
Qual valor se comporta como inherit
, a menos que não haja nada para herdar e
se comporte como initial
?
superset
unset
reset