3

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?

Community
  • 1
  • 1
Ionică Bizău
  • 109,027
  • 88
  • 289
  • 474
  • Note that the `default` keyword no longer exists in the current revision of the spec as of 2014. Presumably this was because it was difficult to fully define, or implement. There is currently no proposed way to reset properties of an element to their browser defaults. – BoltClock May 17 '14 at 17:20

4 Answers4

4

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.

Dai
  • 141,631
  • 28
  • 261
  • 374
  • 1
    Thank you. But `-webkit-all` and `-moz-all` also don't work. Is there any another solution? – Ionică Bizău Apr 14 '13 at 05:28
  • If they don't work then it probably isn't implemented. Why do you want to use this feature? – Dai Apr 14 '13 at 05:31
  • @Dai, it's a feature that would be useful to revert form elements to their original browser-defined styles. – zzzzBov Apr 14 '13 at 05:45
  • 2
    This property was introduced as less of a crutch for poorly-written code and more of a way to deal with third-party CSS that the author has no control over. This is mentioned in the spec. – BoltClock May 17 '14 at 17:16
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).

Matt Smith
  • 1,932
  • 1
  • 21
  • 41
  • Can you add a demo jsfiddle? – Ionică Bizău Feb 11 '14 at 17:16
  • Here you go: http://jsfiddle.net/MattSmith/LgSzP/. View this in latest version of Firefox. The first example of the `` element is styled with the browsers user agent stylesheet. The second element has been reset. Here's more on the values for the `all` property: http://dev.w3.org/csswg/css-cascade/#all-shorthand – Matt Smith Feb 11 '14 at 19:51
  • +1, Interesting! Can you explain me how to unset only the properties set by me before (I don't want to unset the browser's default settings)? See [this](http://jsfiddle.net/LgSzP/2/). – Ionică Bizău Feb 11 '14 at 19:56
  • I _think_ you'd need to unset first (e.g., button {all:unset}) then add your selector rule to style (e.g., button { }). I'm not certain about targeting only certain properties of a rule. More [reading](http://mcc.id.au/blog/2013/10/all-unset). – Matt Smith Feb 11 '14 at 20:23
  • 1
    @MattSmith Also, the 'default' mentioned in the question is currently implemented as 'initial' in FF27. You can target only certain properties just fine with `css-wide` keywords. I [blogged](http://www.geedew.com/2014/02/20/css-wide-keywords-and-all-selectors/) about it. You can also style, set to `initial`, and then style differently. – geedew Feb 20 '14 at 14:01
  • @geedew: `default` and `initial` are two different things - `default`, which has now been dropped from the spec, refers to browser defaults, and `initial` refers to spec-defined initial values that do not vary per element. – BoltClock May 17 '14 at 17:22
0

See this pen in latest FireFox: http://codepen.io/tomliv/pen/AejFH

There are 3 inputs in the grey area (really!).

This is not what I was expecting, but maybe setting all to initial will be more what you need?

tomliv
  • 1
  • 4
-4

There really is no default value for every property - at least one that is consistent across all browsers.

That's really where a CSS reset comes in. I'd recommend looking at Eric Meyer's CSS reset: http://meyerweb.com/eric/tools/css/reset/. Typically, these types of resets are used to reduce browser inconsistencies.

If you're looking to apply something to all elements (you'll still need to individually list each property), use

* { /* Universal Selector */ }

Using a reset stylesheet or some CSS framework like bootstrap is probably a better solution for both normalizing your CSS and cross browser consistency.

Wex
  • 15,539
  • 10
  • 64
  • 107
  • 1
    I don't want to apply same style to all elements. I want to reset all CSS properties for a selector/element. – Ionică Bizău Apr 14 '13 at 06:34
  • 1
    As I've tried to explain, there is no cross-browser **default** value. You need to be more explicit when resetting your properties. – Wex Apr 14 '13 at 16:51
  • I would like to mention that using `*` isn't just "poor css design" it's a severe Performance penalty on rendering the page. I cannot recommend using it; at any time. – geedew Feb 20 '14 at 14:05
  • @geedew - quoted from [an article written by Paul Irish](http://www.paulirish.com/2012/box-sizing-border-box-ftw/) where he _recommends_ using the `*` selector, "Apparently you’ve heard its slow. Firstly, it’s not. It is as fast as h1 as a selector." – Wex Feb 20 '14 at 17:34
  • @Wex While I respect Paul Irish's opinion, you're taking his point out of context. Obviously, it's not naturally slow. If it were the only selector on the page it would be very fast. However, in real use, on a real web-app, it's incredibly slow. To the other extreme, in some situations, a `*` selector can be 25% of the entire render time. While the render time might only be 1ms, it's still slow, relative to the entire set of code. TYL: quotes mean nothing; especially from advocates. – geedew Feb 20 '14 at 19:03