Propriedade CSS all

A propriedade CSS all é uma shorthand que redefine todas as propriedades de um elemento de uma só vez, exceto unicode-bidi e direction, que controlam a direção do texto e são intencionalmente preservadas.

Ela não aceita uma lista de valores de propriedades. Em vez disso, você fornece uma única palavra-chave CSS global (initial, inherit, unset, revert ou revert-layer) e ela aplica essa palavra-chave a todas as propriedades do elemento. Isso a torna uma forma rápida de eliminar estilos herdados ou declarados anteriormente em uma única linha.

Esta página cobre a sintaxe, todos os valores aceitos, exemplos executáveis e quando usar all faz sentido de verdade.

Por que e quando usá-la

O motivo mais comum para usar all é criar uma base de estilização limpa. Por exemplo, ao incorporar um widget ou componente de terceiros em uma página, estilos herdados (fonte, cor, line-height) podem vazar para dentro. Definir all: initial ou all: revert no elemento contêiner elimina essa herança, para que o componente comece em um estado previsível.

Tenha estes pontos em mente:

É pesada. all afeta todas as propriedades, portanto use-a em subárvores pequenas e contidas, não em body ou grandes contêineres.
Não redefine direction nem unicode-bidi. Isso é intencional, para que a direção do texto nunca seja acidentalmente quebrada.
Os filhos não são redefinidos automaticamente. all redefine o elemento alvo. Propriedades herdadas (como color) ainda cascateiam para os filhos, a menos que eles também sejam redefinidos.

Esta propriedade é considerada uma shorthand de reset. Ao contrário de shorthands com múltiplos valores como margin ou background, ela não tem versão longhand nem sub-propriedades.

Valor inicial	normal
Aplica-se a	Todos os elementos.
Herdada	Não.
Animável	Não.
Versão	CSS3
Sintaxe DOM	object.style.all = "inherit";

Sintaxe

Sintaxe da propriedade CSS all

all: initial | inherit | unset | revert | revert-layer;

Exemplo da propriedade all com o valor revert:

Exemplo da propriedade CSS all com o valor revert

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background-color: #8ebf42;
        color: #666;
        all: revert;
      }
    </style>
  </head>
  <body>
    <h2>All property example</h2>
    <p>Here the all: revert; is set.</p>
    <div class="example"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade all com os valores inherit, initial e unset:

Exemplo da propriedade CSS all com os valores inherit, initial e unset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        font-size: 15px;
        color: #1c87c9;
      }
      .example1 {
        background-color: #8ebf42;
        color: #666;
      }
      .example2 {
        background-color: #8ebf42;
        color: #666;
        all: inherit;
      }
      .example3 {
        background-color: #8ebf42;
        color: #666;
        all: initial;
      }
      .example4 {
        background-color: #8ebf42;
        color: #666;
        all: unset;
      }
    </style>
  </head>
  <body>
    <h2>All property example</h2>
    <hr />
    <p>No all property:</p>
    <div class="example1"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr />
    <p>all: inherit:</p>
    <div class="example2"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr />
    <p>all: initial:</p>
    <div class="example3"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr />
    <p>all: unset:</p>
    <div class="example4"> An extrovert is a friendly person who enjoys talking to and being with other people. Extroverts love parties, talking on the phone, and meeting new people. </div>
    <hr /> 
  </body>
</html>

Experimente Você Mesmo »

Valores

Valor	Descrição
initial	Define cada propriedade com o valor inicial especificado pela especificação, ignorando a herança.
inherit	Faz com que cada propriedade receba o valor computado do elemento pai.
unset	Comporta-se como `inherit` para propriedades herdáveis (como `color`) e como `initial` para as não herdáveis (como `border`).
revert	Reverte cada propriedade ao valor que teria a partir da folha de estilos do agente de usuário ou do usuário, ignorando os estilos de autor definidos anteriormente.
revert-layer	Reverte cada propriedade ao valor definido na camada de cascata anterior.

`unset` vs `revert`

Esses dois são fáceis de confundir:

unset remove o valor do autor e recorre à herança ou ao valor inicial da especificação — não tem conhecimento da folha de estilos padrão do navegador.
revert reverte ativamente para o estilo padrão do navegador. Assim, all: revert em um <h2> mantém a aparência de um título em negrito normal, enquanto all: unset o reduz a texto simples, quase inline.

Suporte de navegadores

all é suportada em todos os navegadores modernos (Chrome, Firefox, Safari, Edge). A palavra-chave revert chegou depois de initial/inherit/unset, e revert-layer requer suporte a camadas de cascata, portanto, confirme a cobertura se precisar suportar versões mais antigas de navegadores.

Prática

Quais afirmações sobre a propriedade CSS all são verdadeiras?

all redefine todas as propriedades de um elemento, exceto direction e unicode-bidi.all aceita uma lista separada por vírgulas de valores de propriedades individuais.all: revert reverte as propriedades ao estilo padrão do navegador.all possui sub-propriedades longhand como margin.all: unset usa inherit para propriedades herdáveis e initial para as demais.