A herança é realmente um superpoder e é o que torna o desenvolvimento na web uma alegria se você a adotar. Neste post rápido, vou te transformar em um super fã.
Assim como a cascata e a especificidade – por algum motivo – os desenvolvedores abordam a herança com medo. Não há necessidade disso porque a herança é bastante direta. Provavelmente também é meu aspecto favorito do CSS. Deixe-me explicar por quê.
Digamos que você tenha este CSS:Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
body {
color: DarkSlateBlue;
}Junto com um monte de outras propriedades, color é herdável , o que significa que cada pedaço de texto na página – a menos que haja uma colordefinição específica – agora será DarkSlateBlue.
Vamos expandir isso um pouco mais e trazer um pouco de HTML.Linguagem de códigoHTMLCOPIAR PARA ÁREA DE TRANSFERÊNCIA
<article>
<h1>I am a heading</h1>
<p>I am a paragraph.</p>
<h2>Subscribe</h2>
<form>
<label for="email">Email address</label>
<input type="email" id="email" placeholder="hello@test.com">
<button>Submit</button>
</form>
</article>Olhando para a demonstração, os títulos, o parágrafo e o rótulo possuem DarkSlateBluetexto, mas a entrada (espaço reservado e valor) e o botão ainda possuem a cor de texto padrão. Isso ocorre porque eles têm cores específicas atribuídas a eles nas ferramentas de desenvolvimento, como estas:Linguagem de código CSS COPIAR PARA ÁREA DE TRANSFERÊNCIA
button {
color: buttontext;
}
input {
color: fieldtext;
}Estas são cores do sistema aplicadas na folha de estilo do agente do usuário – estilos padrão aplicados pelo navegador. Como esses elementos têm um colorvalor aplicado, eles não herdarão a cor de body, como acontece com os outros elementos da página.
A inherit palavra-chave
Esta palavra-chave é realmente útil. Nem todas as propriedades CSS são herdáveis, embora muitas sejam. Você pode usar a inheritpalavra-chave para herdar essas propriedades não herdáveis.Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
article {
display: flex;
}
h1 {
display: inherit;
}Com este trecho, <h1>agora terá um valor computadodisplay de flex.
Mas voltando ao nosso pequeno trecho de HTML. Vamos fazer com que a entrada e o botão herdem a DarkSlateBluecor. A cor é herdável, mas podemos usar a inheritpalavra-chave para forçar o elemento a herdar essas propriedades sobre os estilos padrão atribuídos pela folha de estilo do agente do usuário.Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
input, button {
color: inherit;
}Para sua informação
Não se preocupe, resolveremos esse espaço reservado posteriormente neste artigo.
Fácil, certo? Vamos ir um pouco mais longe e usar outra propriedade herdável: font. Definiremos primeiro alguns valores de fonte no corpo:Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
body {
color: DarkSlateBlue;
font-family: Tahoma;
font-size: 2rem;
}A magia da herança significa que todos os elementos do texto herdaram novamente font-familye todo o texto é maior. Porém, nossa entrada e botão não herdaram os estilos de fonte.
A razão pela qual os elementos de texto, como títulos, são maiores, sem nenhum dimensionamento adicional de nossa autoria, é porque os estilos do agente do usuário os dimensionam com emunidades, que são uma proporção dos valores calculados de seus pais font-size. Por exemplo, este é o h1estilo de tamanho da fonte no estilo do agente do usuário do Chromium:Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
h1 {
font-size: 1.5em;
}Como definimos o bodyvalor como of font-size, 2remmeu navegador calculou isso como 24px. O h1tem um font-sizedos 1.5emquais é 24 * 1.5: 36px.
Para sua informação
É aqui que o medo pode surgir para os desenvolvedores. Isso pode fazer com que eles sintam que não estão no controle da interface do usuário.
É melhor criar regras sólidas e deixar o navegador fazer a maior parte do trabalho para você. Isto resulta em interfaces mais resilientes para os usuários que respeitam suas preferências . Construímos para todos, não para nós mesmos. Leia mais sobre esses princípios aqui.
Certo, de volta ao nosso pequeno trecho. Vamos usar a inheritpalavra-chave para classificar a entrada e o botão.Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
input, button {
font: inherit;
color: inherit;
}Até agora, principalmente bom. A entrada e o botão herdaram com sucesso não apenas o font-size, mas também o font-family, line-height, font-style, font-variante , graças à propriedade abreviada e à herança.font-weightfont-stretch font
O problema é que nosso placeholderestilo ainda é cinza. Isso ocorre porque na folha de estilo do agente do usuário, os espaços reservados têm uma cor específica atribuída a eles, portanto, eles não herdam mais a bodycor nem a inputcor.
Esta é a regra de espaço reservado na folha de estilo do agente do usuário do Chromium.Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
::-webkit-input-placeholder {
-webkit-text-security: none;
color: darkGray;
pointer-events: none !important;
}The colorestá definido como darkGray, portanto, mesmo quando the inputestiver herdando color, não afetará o espaço reservado porque possui um estilo mais específico atribuído a ele. Sem dramas, porque tudo o que precisamos fazer é isso com um seletor mais amigável para vários navegadores:Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
::placeholder {
color: inherit;
}Uma observação sobre espaços reservados
Você deve considerar o uso placholderem primeiro lugar, como observa Adrian Roselli. Eric Eggert ajuda você a garantir que ele esteja acessível caso você precise usá-los.
Controlando herança
Estou falando lírico sobre o quão poderosa é a herança, mas no mundo real, você não está construindo exemplos simples como o acima. Muitas vezes seu elemento herdará estilos que você não deseja. Vejamos algumas opções.
Escreva estilos mais específicos
Esta é a minha abordagem preferida. Assim como abordamos na cartilha de cascata e especificidade: os estilos de agente do usuário têm baixa prioridade de cascata, portanto, mesmo escrever seletores de tipo simples como este fará o trabalho para você:Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
a {
color: red; /* Very easily overrides the user agent style */
}Foi assim que resolvemos os problemas acima e é provavelmente o caminho de menor resistência ao criar seu CSS.
Use palavras-chave
Vamos analisar reverte palavras- initialchave unset.
revert
Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
.my-element {
color: revert;
}Isso definirá a propriedade como o valor da folha de estilo do agente do usuário – também conhecido como estilo do navegador padrão. Então, se .my-elementfosse a <button>, a cor voltaria a ser buttontext, como abordamos anteriormente.
unset
Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
.my-element {
color: unset;
}Este pode ser um pouco confuso. Se a propriedade que você está atribuindo unsetfor herdável, então você está efetivamente fazendo isso:Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
.my-element {
color: inherit;
}Porém, se não for uma propriedade herdável, o valor da propriedade será o mesmo que a próxima palavra-chave — initial— faz.
initial
Linguagem de códigoCSSCOPIAR PARA ÁREA DE TRANSFERÊNCIA
.my-element {
color: initial;
}Esta é a opção nuclear e recomendo evitá-la. Isso definirá o valor de volta ao valor da especificação CSS do elemento, o que em termos humanos significa que removerá o estilo por completo.
Para sua informação
Tenho tendência a evitar initiale unsetao criar CSS. A revertpalavra-chave é poderosa o suficiente se você adotar a herança, a cascata e a especificidade e deixar o navegador fazer o trabalho pesado para você.