Is there a (polyfill) code that resets all the inherited CSS properties on a given element?

Question

The subject says it all. Looking for a (polyfill) code that will reset all the inherited CSS properties on a given element (such as <img>, <a> or <p>).

Answer 1

May be you can use HTML5 boilerplate or css Reset to reset all the inherited CSS properties.

check these articles http://html5boilerplate.com/ ,

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 2

If you want to completely reset everything to the browser's default styling, then the modern CSS approach is to use the revert keyword with the all property:

all: revert;

From MDN,

The revert CSS keyword rolls back the cascade so that the property takes on the value it would have had if there were no styles in the current style origin (author, user, or user-agent). In author stylesheets (the normal case), for the purposes of the given declaration, it's as if there were no author-level styles, thus resetting the property to the default value established by the user-agent stylesheet (or by user styles, if any exist).

Caveat: It is defined in the CSS Cascading and Inheritance Level 4 working draft, so browser support is currently limited to Safari only.

Answer 3

What you could do is create one of those elements but not attach it to the DOM. It wouldn't then receive any of the styles from your stylesheets. Then, using window.getComputedStyle, you will get a list of the default styles.

var a = document.createElement('a');
var s = window.getComputedStyle(a);

myTargetEl.style.color = s.color;  // or, use a loop to do all of them

Answer 4

This sounds like the all property, which sadly is not yet implemented by any browser other than Firefox.

Example:

h2 {
  all: initial; // Will reset any style set for h2 elements
}

See https://developer.mozilla.org/en-US/docs/Web/CSS/all