Entendendo os valores initial e inherit do css

Entendendo-os-valores-‘initial’-e-‘inherit’-do-CSS_topo

Algum tempo atrás, se alguém me perguntasse qual a diferença entre os valores initial einherit 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 inheritpoderia fazer. Foi quando descobri, inclusive, que inherit poderia ser substituído peloinitial.

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 initialinherit.

  • 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:

  1. .modulo {
  2. color: initial;
  3. }

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 elementobody, 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.

Exemplo do uso do elemento video no Chrome com a propriedade initial

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:

Exemplo do uso do elemento video no Chrome sem a propriedade initial

O suporte dos browsers

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

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

Texto traduzido e adaptado da fonte: Getting acquainted with initial

Fonte: Tableless

Postagens Relacionadas