Entendendo os valores initial e inherit do CSS

Qual a razão da existência dos valores 'initial' e 'inherit' na maioria dos atributos do CSS? Suas propriedades tem bastante significado, confira e entenda.

Algum tempo atrás, se alguém me perguntasse qual a diferença entre os valores initial e inherit do CSS eu responderia:

– Existe alguma diferença?

Trabalho com CSS por mais de 5 anos e de algum jeito faltou entender o significado do que exatamente initial é e faz. Pode chamar isso de ignorância, preguiça, burrice ou sorte, mas nunca pensei em olhar ao redor e tentar entender fixamente o comportamento que inherit poderia fazer. Foi quando descobri, inclusive, que inherit poderia ser substituído pelo initial.

Neste artigo, pretendo compartilhar o que aprendi repassando o aprendizado a quem interessar e tiver necessidade.

O que initial significa?

A especificação oficial nos ajuda a entender a diferença entre as keywords initial e inherit.

• Initial keyword: Se o valor no CSS da propriedade é ‘initial‘, o valor inicial da propriedade se torna o oficial.
• Initial value: Cada propriedade tem um valor inicial, estipulado na tabela de definição da propriedade do navegador. Se o valor da propriedade do objeto não tem um valor herdado e a cascata não resulta em um valor oficial, o valor especificado da propriedade é o initial.

Isto significa que, se o valor initial for definido aqui:

.modulo {
 color: initial;
}

O valor provavelmente retornará preto, caso a cor padrão do navegador seja preta para tal propriedade.

Quão diferente initial é de inherit?

Se você deduz que isto é questão de herança, você está certo.

Mas initial e inherit são diferentes quando entendemos que o inherit checa se existem outras propriedades no pai que poderão ser utilizadas ou afetadas, antes que seja atribuído o valor inicial. Antes que o navegador decida renderizar o valor herdado, ele deve varrer a cascata de valores acima da propriedade definida e avaliar o possível valor inicial do elemento. Vai depender do que é atribuído no pai mais próximo do elemento:

H1 está herdando o valor da cor do elemento mais próximo, encontrando a propriedade incluída no elemento body.

Desta vez, utilizando o valor inicial, H1 ignora o valor que poderia ser herdado do elemento body, e mantém o valor atribuído pelo navegador, isto é, a raiz responsável por renderizar o HTML.

Exemplo de inherit e initial no CodePen.

No exemplo acima, as propriedades na caixa da esquerda são todas definidas e herdadas da classe .modulo, já que a caixa é filha do modulo anteriormente estilizado. Na caixa da direita, as propriedades são atribuídas de acordo com o padrão do navegador, que, por sua vez, é “zerado” através do atributo inserido.

Quando usar initial

Podemos pensar em initial como um jeito de “zerar” o conteúdo. Para não confundir abstrações e heranças, usar initial é uma maneira de limpar os atributos e propriedades do elemento, deixando mais claro a volta do elemento ao seu estilo natural do estado de início.

Initial não é uma bala de prata para resets. Valores iniciais ainda são sujeitos aos padrões dos navegadores, e que sabemos, podem variar de navegador para navegador. Se você usa CSS resets, serão utilizados os valores iniciais.

Por exemplo, para destruir completamente todos os estilos herdados de um elemento, você pode usar initial; para ter certeza que o elemento copia uma determinada propriedade do seu elemento pai mais próximo, use inherit .

Exemplo prático

Recentemente, tive um problema em um projeto ao usar o elemento video 100% em relação ao tamanho do navegador. Ele deveria encaixar tanto na largura como na altura da div de uma single page.

Na primeira versão abaixo, a propriedade object-fit foi definida com o valor contain, que era o valor padrão e específico para este elemento no Chrome.

Já neste segundo exemplo, deixamos o valor definido como initial: ele preencheu o espaço que faltava para o vídeo ocupar 100% em relação à página, utilizando o valor inicial do navegador:

O suporte dos browsers

Segundo os dados do MDN, segue uma tabela simplificada de suporte às propriedades initial e inherit. Observe a ausência do IE para suporte ao initial:

• initial

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Sim	Sim	19 up	15 up	Não	Sim	Sim

• inherit

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Claro	Sim	Sim	4 up	8 up	Sim	Sim