Propriedade all no CSS. Para que serve e como funciona? – css

Pergunta:


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?
Autor da pergunta João Pedro Schmitz

Maniero

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>

Fonte.

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

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *