9

Estava olhando as propriedades CSS e conheci a all, só achei ela um pouco confusa.

Sei que a mesma possui 4 estados. São eles: initial, inherit, revert e unset. Porém não entendi ao certo como cada um funciona.

Dúvidas

  1. Como funciona a propriedade all e para que ela serve?
  2. Qual o suporte dos navegadores para a propriedade?
  3. Existe alguma real utilidade para essa propriedade?
  4. Como funcionam os 4 estados da propriedade?
3
  • Boa pergunta, eu já tinha usado all para responder algumas coisas aqui no site, mas não achei nada exclusivamente sobre essa propriedade por aqui
    – hugocsl
    Commented 8/10/2018 às 16:55
  • Pois é, fiquei procurando por uma pergunta relacionada a isso mas não encontrei nada, então resolvi fazer a minha. Commented 8/10/2018 às 17:24
  • 1
    Eu tb acabei dando uma pesquisada pq já tinha usado ela por aqui antes, mas como não tinha nada mais específico sempre vale a pena perguntar!
    – hugocsl
    Commented 8/10/2018 às 17:28

2 Respostas 2

8

Como funciona a propriedade all e para que ela serve?

Ela estabelece que valor todas as outras propriedades de um elemento deve ter. É uma forma de simplificar o código e não ter que colocar um valor em cada propriedade.

Documentação.

Qual o suporte dos navegadores para a propriedade?

O ideal é sempre usar um site que acompanha isso e mostre como está na versões atuais. Por usar o Can I Use.

Existe alguma real utilidade para essa propriedade?

Não, é só comodidade.

Como funcionam os 4 estados da propriedade?

Note que estas opções não necessariamente são exclusivos da propriedade all.

É um pouco confuso e precisaria entender o conceito de herança de valores do CSS. Eles são valores, mas se comportam como variáveis e seu valor final depende do contexto. Em alguns casos é melhor nem usar se não entender o que está fazendo:

Exemplo:

$('button:not(.remove)').on('click', function() {
  $('.alltest').css('all', $(this).text());
});

$('.remove').on('click', function() {
  $('.alltest').css('all', '');
});
.container {
  font-family: sans-serif;
  /* inherited */
  
  font-size: 1.5em;
  /* inherited */
  
  text-align: center;
  /* inherited */
  
  text-transform: uppercase;
  /* inherited */
  
  text-shadow: 1px 1px 1px black;
  /* inherited */
}

.parent {
  color: green;
  /* inherited */
  
  background-color: gainsboro;
  /* not inherited */
  
  width: 80%;
  /* not inherited */
  
  padding: 1em;
  /* not inherited */
  
  border: 5px solid #E18728;
  /* not inherited */
}
/* Styles for Pen, unrelated to all property demonstration */

button {
  margin-right: 1%;
  margin-bottom: .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>initial</button>
<button>inherit</button>
<button>unset</button>
<button class="remove">remove "all" property</button>
<div class="container">
  <div class="parent">
    <div class="alltest">
      <p>Change this div's <code>all</code> value.</p>
    </div>
  </div>
</div>

Coloquei no GitHub para referência futura.

Fonte.

1
  • A sua resposta ficou bem clara e com o exemplo pude entender melhor a propriedade! Commented 8/10/2018 às 17:23
4

A propriedade all é um shorthand (atalho) para pegar todas as propriedades CSS do elemento definidas pelo user-agent.

Por exemplo a tag input possui alguns atributos CSS que são declarados pelo user-agent, se vc quiser "limpar" esses atributos default do browser vc pode usar o all:unset. Ou se vc tem um input estilizado por um folha de estilo externa vc pode usar o all:revert para voltar o input ao estado default do user-agent.

Existe alguma real utilidade para essa propriedade?

Pros e contras: Um utilidade que vejo é que o código CSS fica mais limpo, uma vez que vc vai usar menos linhas de código para remover todos os estilos default. Sendo assim, com o all vc atinge todas as propriedades de uma vez, e dessa forma vc tem um código mais enxuto, e até sua produtividade pode aumentar. A desvantagem é que vc pode acabar eliminando algum estilo que não gostaria e vai ter que inclui-lo de volta na mão...

Segundo a documentação da Mozilla sobre o assunto: https://developer.mozilla.org/en-US/docs/Web/CSS/all

initial Especifica que todas as propriedades do elemento devem ser alteradas para seus valores iniciais.

inherit: Especifica que todas as propriedades do elemento devem ser alteradas para seus valores herdados.

unset: Especifica que todas as propriedades do elemento devem ser alteradas para seus valores inherited se herdarem por padrão ou para seus valores initial, se não forem.

Resumindo, o unset pode voltar para o último valor herdado se tiver algum, se não tiver ele vai para os valores iniciais. No exemplo abaixo, com o all:unset o blockquote vai herdar os estilos da fonte do body, mas se não tivesse nada declarado no body o blockquote voltaria para a forma initial

body { 
  font-size: small; 
  background-color: #F0F0F0; 
  color:blue; }
blockquote { 
  background-color: skyblue; 
  color: red; 
  }
blockquote { 
  all: unset; 
}
<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> 
Phasellus eget velit sagittis.

revert: Reverte o CSS para que uma propriedade assuma o valor que teria se não houvesse estilos na origem do estilo atual (customizado pelo autor ou user-agent)

O revert é útil para isolar widgets ou componentes incorporados dos estilos da página que os contém, principalmente quando usados ​​com a propriedade all.

Importante: O valor revert no entanto tem o suporte dos browser bem mais limitado do que os outros valores como vc pode ver aqui:

inserir a descrição da imagem aqui

Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

Mas para que serve?

Normalmente se usa o all quando vc quer "limpar" estilos default do browser para construir o seu próprio estilo, ou quanto vc quer que alguma folha de estilo não incida sobre algum elemento, voltando ele para o estado initial.

Veja um exemplo prático:

Limpando o estilo default do user-agent de um input

.input-custom {
  all:unset;
  border: 1px solid red;
}
  <input class="input-custom" placeholder="all unset" type="text">
  <input class="input-custom" type="checkbox" name="" id=""><br>
  <input type="text" placeholder="sem all unset">
  <input type="checkbox" name="" id="">

Suporte dos Browser:

inserir a descrição da imagem aqui

Fonte: https://caniuse.com/#search=all

3
  • 1
    Show de bola Hugo, resposta bem explicativa! Commented 8/10/2018 às 17:22
  • 1
    Valeu jovens, esses assuntos sempre são interessantes para a comunidade e a gente acaba aprendendo tb alguma uma coisinha nova :)
    – hugocsl
    Commented 8/10/2018 às 17:25
  • 1
    Adoro o SO justamente por isso, podemos aprender e ajudar ao mesmo tempo! Commented 8/10/2018 às 18:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .