> ## Content Index > Fetch the complete content index at: https://productoversee.com/llms.txt > Use this file to discover other available public pages before exploring further. # Entendendo os valores ‘initial’ e ‘inherit’ do CSS - URL: https://productoversee.com/blog/entendendo-os-valores-initial-e-inherit-do-css/ - Published: 2015-07-21T03:00:00.000Z - Updated: 2023-02-22T02:02:08.000Z - Description: 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. - Author: João Guilherme - Tags: Desenvolvimento, #blog 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: 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](https://codepen.io/guicheffeR/pen/jPxKqQ?ref=productoversee.com). 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.](https://tableless.com.br/querido-usuario-atualize-seu-browser/?ref=productoversee.com) 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** ``` Safari Firefox Opera IE Android iOS ``` ``` Sim 19 up 15 up Não Sim Sim ``` - **inherit** ``` Safari Firefox Opera IE Android iOS ``` ``` Sim Sim 4 up 8 up Sim Sim ```