Cross-browser version of "all: initial"

Question

I am trying to use all: initial to isolate the CSS for a special "widget" in the page. The problem is that Safari and IE10 and earlier don't support the all property and IE doesn't support the initial value.

Is there a way to emulate the same behaviour, using either CSS or JavaScript?

For example, I imagine it would be possible to create a CSS class which contains every property defined by the CSS spec and sets them to the initial value specified by the spec. Is there a CSS class out there which already does that?

If I google "CSS reset" I get a bunch of stylesheets intended specifically to normalise the differences between user-agent stylesheets, which is different from all: initial.

Answer 1

The initial keyword value was introduced in 2011 in the Cascading and Inheritance Module -- it's supported in FF 19+, Chrome, Safari, Opera 15+ but is currently not supported in any version of IE.

This has no synonym to this purpose. Your only solutions is to trust in normalizers or handmake all your properties and values depending on browser (very hard work)

Answer 2

Even if all browsers will support all: initial, it wont be cross-browser.

all: initial cant be cross-browser by definition, because:

1. initial values of font-family and quotes depends on UserAgent
2. initial value of color varies from Browser To Browser
3. initial value of text-size-adjust depends on browsers support for Inflation (though, its experimental)

Update (01 march 2017)::

4. vendors' appearance properties: (-webkit-appearance, -moz-appearance, -ms-appearance) are none, but overridden In User-Agent CSS.

5. List of 14 properties depends on currentcolor, which is reference to property color, which varies from browser to browser (hence 2nd point), and aforementioned list is: -webkit-border-before-color, -webkit-text-fill-color, -webkit-text-stroke-color, border-block-end-color, border-block-start-color, border-bottom-color, border-inline-end-color, border-inline-start-color, border-left-color, border-right-color, border-top-color, column-rule-color, text-decoration-color, text-emphasis-color.

6. Property: outline-color is either currentColor or inverted one, depends on the browser

also marked text-size-adjust as experimental in initial post

Update (08 march 2017)::

7. Property: text-align is either left or right initially, depends on the direction, which all: initial doesnt override accordingly to specification.

Answer 3

This PostCSS plugin could help: postcss-initial.

It could fix browsers inconsistency by setting initial values manually. But it is open question, is it future-proof. But until you use plugin, you will have same result.