Propiedad CSS all

La propiedad CSS all es una abreviatura que restablece todas las propiedades de un elemento a la vez, excepto unicode-bidi y direction, que controlan la dirección del texto y se dejan deliberadamente sin modificar.

No acepta una lista de valores de propiedad. En su lugar, se le asigna una palabra clave global de CSS (initial, inherit, unset, revert o revert-layer) y la aplica a cada propiedad del elemento. Esto la convierte en una forma rápida de eliminar estilos heredados o declarados previamente en una sola línea.

Esta página cubre la sintaxis, todos los valores aceptados, ejemplos ejecutables y cuándo tiene sentido usar all.

Por qué y cuándo utilizarla

La razón más común para usar all es crear una base de estilos limpia. Por ejemplo, al insertar un widget o componente de terceros en una página, los estilos heredados (fuente, color, interlineado) pueden filtrarse. Establecer all: initial o all: revert en el contenedor elimina esa herencia para que el componente comience desde un estado predecible.

Ten en cuenta estos puntos:

Es pesada. all afecta a todas las propiedades, así que úsala en subárboles pequeños y contenidos, no en body ni en contenedores grandes.
No restablece direction ni unicode-bidi. Esto es intencional, para que la dirección del texto nunca se rompa accidentalmente.
Los hijos no se restablecen automáticamente. all restablece el elemento objetivo. Las propiedades heredadas (como color) siguen en cascada hacia los hijos a menos que estos también las restablezcan.

Esta propiedad se considera una abreviatura de restablecimiento. A diferencia de las abreviaturas con múltiples valores como margin o background, no tiene versión larga ni subpropiedades.

Valor inicial	normal
Se aplica a	Todos los elementos.
Heredada	No.
Animatable	No.
Versión	CSS3
Sintaxis DOM	object.style.all = "inherit";

Sintaxis

Sintaxis de la propiedad CSS all

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

Ejemplo de la propiedad all con el valor revert:

Ejemplo de la propiedad CSS all con el 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>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad all con los valores inherit, initial y unset:

Ejemplo de la propiedad CSS all con los valores inherit, initial y 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>

Pruébalo tú mismo »

Valores

Valor	Descripción
initial	Establece cada propiedad en su valor inicial definido por la especificación, ignorando la herencia.
inherit	Hace que cada propiedad tome su valor calculado del elemento padre.
unset	Actúa como `inherit` para las propiedades heredables (como `color`) y como `initial` para las no heredables (como `border`).
revert	Revierte cada propiedad al valor que tendría según la hoja de estilos del agente de usuario o del usuario, ignorando los estilos del autor definidos anteriormente.
revert-layer	Revierte cada propiedad al valor establecido en la capa en cascada anterior.

`unset` vs `revert`

Es fácil confundir estos dos valores:

unset elimina el valor del autor y recurre a la herencia o al valor inicial de la especificación — no sabe nada sobre la hoja de estilos predeterminada del navegador.
revert revierte activamente al estilo predeterminado del navegador. Así, all: revert en un <h2> lo mantiene como un encabezado en negrita normal, mientras que all: unset lo reduce a texto sin formato en línea.

Compatibilidad con navegadores

all es compatible con todos los navegadores modernos (Chrome, Firefox, Safari, Edge). La palabra clave revert llegó más tarde que initial/inherit/unset, y revert-layer requiere compatibilidad con capas en cascada, así que verifica la cobertura si necesitas admitir versiones de navegadores más antiguas.

Práctica

¿Cuáles de las siguientes afirmaciones sobre la propiedad CSS all son verdaderas?

all restablece todas las propiedades de un elemento excepto direction y unicode-bidi.all acepta una lista separada por comas de valores de propiedades individuales.all: revert revierte las propiedades al estilo predeterminado del navegador.all tiene subpropiedades largas como las tiene margin.all: unset usa inherit para las propiedades heredables e initial para el resto.