I am simply wondering if there exists a global CSS reset for CSS3. Something along the lines of the commonly-used versions created by Eric Meyer or YUI, but for CSS3 specifically. I've queried channels such as Google, Github and here on SO, but haven't come across a comprehensive solution.
Edit: The term "reset" is probably misleading since it deals mainly with resetting browser default settings. "Recalibration" may be better suited.
I should clarify and put forth a use case.
This would work in tandem with the normal CSS reset yet also handle any styling caused by rotation, box shadow, animation, border radius, etc. For example, as mentioned before on this post:
-webkit-transform:none; /* Safari and Chrome */
-moz-transform:none; /* Firefox */
-ms-transform:none; /* IE 9 */
-o-transform:none; /* Opera */
transform:none;
The above snippet, and others like it, would be associated with any HTML tags that might get affected by them, as it is with current CSS resets.
The implementation need for this would probably not be too common if you are in control of your properties. However if you are, for example, creating an app or plug-in that will be used across different domains, where the styling of the pages the plug-in script is invoked on can influence that of the plug-in itself, then something like this would be very useful.
I realize there are other ways to tame CSS inheritance and handle cross-domain issues, but this question is put forth regarding the CSS3 reset directly.
Much thanks.
The real way to solve your problem is either to use the scoped attribute, or to create your widget using the Shadow DOM.
This way, you can insulate yourself from external CSS. Unfortunately, neither are really ready for use, so yes, you'll have to manually protect yourself.
The alternative is to set everything (transform, font-size, padding, etc) in your code with !important, rather than resetting it to 0/none, then setting it anew.