How to use "all" property in CSS

Question

How is the all property used in CSS?

This question is related to this one.

According to this:

The ‘all’ property is a shorthand that resets all CSS properties.

Name:           all
Value:          initial | inherit | default
Initial:        See individual properties
Applies to:     See individual properties
Inherited:      See individual properties
Percentages:    See individual properties
Media:          See individual properties
Computed value: See individual properties
Animatable:     See individual properties 

So, it has to reset CSS properties for a selector.

This means, for example, that if we import Twitter Bootstrap and add the style below, the .btn class has to be reseted:

.btn {
    all: default;
}

This doesn't happen. See this jsFiddle.

Am I correct? Isn't this implemented in web browsers?

Answer 1

The W3C specification you linked to says it's currently in "Working Draft" stage. Also, there's no mention of the all property on CanIUse.com, so I think it's safe to say it's experimental.

You might want to try -webkit-all or -moz-all.

Y'know, reading the spec for this feature, it feels like a hack. If you design your style cascade appropriately there shouldn't be a need for this property.

Answer 2

Right now I believe only Firefox supports all (as of version 27). You can use the all property (e.g. all: unset;) to apply the value to every property (except direction and unicode-bidi).