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:
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:
Fonte: https://caniuse.com/#search=all