All - Property CSS

Syntax diagram of all.

Description of the all property.

all is a CSS property that represents ALL properties. It allows, in a single write, to apply the same value to all the properties of an element. It is mainly used for initialization, with the values initial, unset, etc.

This very particular property is in a way a universal summary, which initializes all the properties in a single write, just like the other shorthand property initialize several properties.
For example, flex initializes the three properties flex-grow, flex-shrink, and flex-basic.

There are, however, two properties that will not be initialized by all: they are direction and unicode-bidi . These two properties have a special status: they should not be used in CSS, and should always be encoded in the document (dir attribute). However, they are kept to extend the possibilities of languages other than HTML.

all can only accept initialization values: a write like all:20px; doesn't make sense because many properties don't accept the 20px numeric value.

Custom properties are not impacted by all. Remember that custom properties are defined by the developer and that their name must begin with a double hyphen.
Example: --color-logo:#845884;.

Values for all.

• all: revert; all: revert-layer;

  Forces all properties of the element to the value they would have had without the application of any user styles. More information about the revert and revert-layer values.

• all: unset;

  Forces all properties of the element to the value of the parent element if those properties can be inherited, and to their initial value if they cannot be inherited. See the value unset.

• all: inherit

  Forces all properties of the element to the value inherited from the parent element. See the value inherit.

• all: initial;

  Forces all properties of the element to their initial value. See the value initial.

Manipulating the all property programmatically.

Change the value of all with Javascript.

The code below is an example to change the value of the all property on ONE element. Two syntaxes are possible: the first treats the style as an array, the second as an object.

let el = document.getElementById('id'); el.style['all'] = 'initial'; // or let el = document.getElementById('id'); el.style.all = 'initial';

Retrieve the value of all with Javascript.

The value of the property must have been assigned to the element via its style attribute, or by the previous code, but not by passing by a CSS selector.

let el = document.getElementById('id'); let value = el.style['all']; // or let el = document.getElementById('id'); let value = el.style.all;

Retrieve the computed value of all.

In the case of all, the computed value doesn't make much sense because all is a property that summarizes all the others.

Set the value of all with JQuery.


$('#id').css('all', 'initial');


Test it yourself.

The buttons below apply the entered value to the all property and then display either the value as it was applied, or the computed value. In the case of the all property, the computed value will always be empty.

Browsers compatibility with all.

1

all
property

Estimated overall support.

97%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari

Safari sur IOS

Chrome

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the all property.

• CSS Cascading and Inheritance Level 3

  Introduction of the all property shorthand for all other properties.
  

  July 13, 2001

  Working Draft.

  

  October 03, 2013

  Candidate Recommendation.

  

  December 22, 2020

  Proposed for recommendation.

  

  February 11, 2021

  Recommendation .

• CSS Cascading and Inheritance Level 4

  Adding the revert value, accepted by the all property.
  

  April 21, 2015

  Working Draft.

  

  January 14, 2016

  Candidate Recommendation.

  

  

• CSS Cascading and Inheritance Level 5

  Adding revert-layer value, for all property.
  

  January 19, 2021

  Working Draft.

  

  January 13, 2022

  Candidate Recommendation.

  

  

See also, about the cascade.

The CSS Cascading and Inheritance specification of W3C contains information about the organization of complex style sheets and inheritance.

At-rules:

@import

Importing a stylesheet, with the possibility of choosing a cascade layer.

@layer

Defines cascade layers to help manage priorities between CSS rules.

⚠

@scope

Limit the scope of the instructions encompassed by this directive.

Values: