Property all in CSS. What is it for and how does it work?

  

How does the all property work and what does it look like?

It establishes what value all other properties of an element must have. It's a way to simplify the code and not have to put a value on each property.

Documentation .

  

How do browsers support the property?

The ideal is to always use a website that goes with it and show how it is in the current versions. By using Can I Use .

  

Is there any real utility for this property?

No, it's just convenience.

  

How do the 4 estate states work?

Note that these options are not necessarily unique to the all property.

It's a bit confusing and you should understand the concept of CSS value inheritance. They are values, but they behave as variables and their final value depends on the context. In some cases it's best not to use it if you do not understand what you're doing:

• initial - defaults to default . This default varies according to the inheritance rules ( documentation )
• inherit - assumes the value that was inherited from the previous element ( documentation )
• revert - it tries to use the style adopted according to who was responsible for changing the property.
• unset - will be the initial or inherited value according to what the property was specified ( documentation )

Example:

$('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><buttonclass="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>

Font .

The property all is a shorthand (shortcut) to get all CSS properties of the element defined by user-agent .

For example, the input tag has some CSS attributes that are declared by user-agent , if you want to "wipe" these default attributes of the browser you can use all:unset . Or, if you have a% w of stylized by an external stylesheet you can use input to return all:revert to input status.

Is there any real utility for this property?

Pros and cons: One utility I see is that the CSS code gets cleaner, since you'll use fewer lines of code to remove all the default . So, with user-agent you hit all the properties at once, and in this way you have a leaner code, and even your productivity can increase. The downside is that you can end up eliminating some style you do not like and will have to include it back in hand ...

According to the Mozilla documentation on the subject: link

all Specifies that all element properties should be changed to their initial values.

initial : Specifies that all element properties should be changed to their inherited values.

inherit : Specifies that all element properties should be changed to their unset values if they inherit by default or their inherited values, if they are not.

In short, the initial can return to the last inherited value if it has any, if it does not, it goes back to the initial values. In the example below, with unset all:unset will inherit the font styles of blockquote , but if there was nothing declared in body then body would return to form blockquote

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.

initial : Reverses CSS so that a property assumes the value it would have if there were no styles in the source of the current style (customized by author or revert )

user-agent is useful for isolating revert or embedded components of page styles that contain them, especially when used with the widgets property.

Important: The all value however has much more limited browser support than other values as you can see here:

Source: link

But what's the use?

Usually you use the revert when u want to "clean up" styles default the browser to build their own style, or how much u want some style sheet does not fall on any element, returning it to the all state.

See a practical example:

Clearing the default style of initial of a user-agent

.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="">

Browser support:

Source: link