All property in CSS. What is it for and how does it work?

Question

I was looking at the CSS properties and met the all, I just found her a little confused.

I know it has 4 states. It is them: initial, inherit, revert and unset. But I don’t understand exactly how each one works.

Doubts

1. How the property works all and what it’s for?
2. What browser support for the property?
3. Is there any real usefulness to this property?
4. How the 4 property states work?

Answer 1

How all property works and what it serves?

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.

What browser support for the property?

The ideal is to always use a site that accompanies this and show how it is in the current versions. Why use the Can I Use.

Is there any real usefulness to this property?

No, it’s just comfort.

How the 4 property states work?

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

It is a bit confusing and would need to 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 better not to use it if you don’t understand what you’re doing:

• initial - takes on the value default. This default varies according to inheritance rules (documentation)
• inherit - takes the value that was inherited from the previous item (documentation)
• revert - he 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 has been 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>
<button class="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>

I put in the Github for future reference.

Source.

Answer 2

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

For example the tag input has some CSS attributes that are declared by user-agent, if you want to "clear" these attributes default browser you can use the all:unset. Or if you have one input stylized by an external style sheet you can use the all:revert to return the input to the state default of user-agent.

Is there any real usefulness to this property?

Pros and cons: A utility I see is that the CSS code gets cleaner since you will use fewer lines of code to remove all styles default. Therefore, with the all you achieve all the properties at once, and that way you have a more streamlined code, and even your productivity can increase. The downside is that you might end up eliminating some style you wouldn’t like and will have to include it back in hand...

According to Mozilla documentation on the subject: https://developer.mozilla.org/en-US/docs/Web/CSS/all

initial Specifies that all widget properties must be changed to their initial values.

inherit: Specifies that all widget properties must be changed to their inherited values.

unset: Specifies that all widget properties must be changed to their values inherited inherit by default or for their values initial, if they are not.

In short, the unset can go back to the last inherited value if you have any, if you don’t have it goes to the initial values. In the example below, with the all:unset the blockquote will inherit the font styles of the body, but had nothing stated in body the blockquote would go back to shape 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: Reverts the CSS so that a property assumes the value it would have if there were no styles at the origin of the current style (customized by the author or user-agent)

The revert is useful for isolating widgets or embedded page styles components containing them, mainly when used with the property all.

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

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/revert

But what’s the point?

Usually you use the all when you want to "clean" styles default from the browser to build your own style, or how much you want some style sheet does not focus on some element, turning it to the state initial.

See a practical example:

Cleaning up the style default of user-agent of a 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="">

Browser Support:

Source: https://caniuse.com/#search=all