Podcast do CSS - 005: herança
Digamos que você acabou de criar CSS para fazer os elementos parecerem 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, você adiciona 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 tem a cor que você esperava. Como isso aconteceu?
Se você não especificar um valor para algumas propriedades CSS, elas serão herdadas.
No caso desse botão, ele herdou o color
do CSS:
article a {
color: maroon;
}
Nesta aula, você vai aprender por que isso acontece e como a herança é um recurso poderoso para ajudar você a escrever menos CSS.
Fluxo de herança
Vamos conferir como funciona a herança. usando este snippet de HTML:
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
O elemento raiz (<html>
) não herdará nada porque é o primeiro elemento no documento.
Adicione CSS ao elemento HTML
e ela começa a se propagar em cascata.
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 cores agora terão a cor lightslategray
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
Somente o <p>
terá texto em itálico porque é o elemento aninhado mais profundo.
A herança flui apenas para baixo, e não para elementos pai.
Quais propriedades são herdadas por padrão?
Nem todas as propriedades CSS são herdadas por padrão. mas há muitos que são. Como referência, aqui está a lista inteira de propriedades que são herdadas por padrão retirado da referência W3 de todas as propriedades CSS:
- azimute
- border-colap (em inglês)
- border-spacing
- legenda
- cor
- cursor
- direction
- células-vazias
- font-family
- font-size
- font-style (em inglês)
- variante da fonte
- peso da fonte
- fonte
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- órfãos
- citações
- text-align (link em inglês)
- text-indent
- text-transform
- visibilidade
- espaço em branco
- viúvas
- word-spacing
Como funciona a herança
Todo elemento HTML tem todas as propriedades CSS definidas por padrão com um valor inicial. O valor inicial é uma propriedade que não é herdada e aparece como padrão se a cascata não calcular um valor para esse elemento.
As propriedades que podem ser herdadas descem em cascata
e os elementos filhos receberão um valor calculado que representa o valor do pai.
Isso significa que, se um pai tiver font-weight
definido como bold
, todos os elementos filhos estarão em negrito,
a menos que o font-weight
esteja definido com um valor diferente,
ou a folha de estilo do user agent tenha um valor font-weight
para esse elemento.
Como herdar e controlar explicitamente a herança
A herança pode afetar elementos de maneiras inesperadas, por isso o CSS tem ferramentas para ajudar com isso.
A palavra-chave inherit
É possível fazer qualquer propriedade herdar o valor calculado do pai com a palavra-chave inherit
.
Uma maneira útil de usar essa palavra-chave é criar exceções.
strong {
font-weight: 900;
}
Este snippet de CSS define todos os elementos <strong>
com 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 fazer com que os elementos <strong>
dentro de .my-component
também font-weight: 500
adicionem:
.my-component strong {
font-weight: inherit;
}
Agora, os elementos <strong>
dentro de .my-component
terão um font-weight
de 500
.
É possível definir explicitamente esse valor,
mas se você usar inherit
e o CSS de .my-component
mudar no futuro,
você pode garantir que o dispositivo <strong>
será atualizado automaticamente.
A palavra-chave initial
A herança pode causar problemas com seus elementos, e o initial
oferece uma opção de redefinição eficiente.
Você já aprendeu que cada propriedade tem um valor padrão no CSS.
A palavra-chave initial
define uma propriedade de volta para esse valor inicial padrão.
aside strong {
font-weight: initial;
}
Esse snippet remove a espessura em negrito de todos os elementos <strong>
dentro de um elemento <aside>
. Em vez disso,
torná-los peso normal, que é o valor inicial.
A palavra-chave unset
A propriedade unset
se comportará de maneira diferente se uma propriedade for 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, então você pode escrever isto:
/* 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
é removido e o color
volta a ser o valor computado herdado.
Também é possível 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 que foi 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ê alterar a regra aside p
para all: unset
,
não importa quais estilos globais serão aplicados a p
no futuro,
elas sempre não serão definidas.
aside p {
margin: unset;
color: unset;
all: unset;
}
Teste seu conhecimento
Teste seus conhecimentos sobre herança
Quais das seguintes propriedades são herdáveis?
font-size
line-height
color
text-align
animation
Qual valor se comporta como inherit
, a menos que não haja nada para herdar e
se comporta como initial
?
unset
superset
reset