I'm sure this must have been mentioned/asked before but have been searching for an age with no luck, my terminology must be wrong!
I vaguely remember a tweet I saw a while ago that suggested that there was a css rule available that would remove any styles previously set in the stylesheet for a particular element.
A good use example might be in a mobile-first RWD site where much of the styling used for a particular element in the small-screen views needs 'resetting' or removing for the same element in the desktop view.
A css rule that could achieve something like:
.element {
all: none;
}
Example usage:
/* mobile first */
.element {
margin: 0 10;
transform: translate3d(0, 0, 0);
z-index: 50;
display: block;
etc..
etc..
}
@media only screen and (min-width: 980px) {
.element {
all: none;
}
}
So we could quickly remove or re-set styling without having to declare every property.
Makes sense?
Best Answer
The CSS3 keyword
initial
sets the CSS3 property to the initial value as defined in the spec. Theinitial
keyword has broad browser support except for the IE and Opera Mini families.Since IE's lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial values:
As mentioned in a comment by @user566245 :
JAVASCRIPT ?
Nobody thought about other than css to reset css? Yes?
There is that snip fully relevant : https://stackoverflow.com/a/14791113/845310
answered Feb 9 '13 at 20:15 by VisioN
With all this said; i don't think a css reset is something feasable unless we end up with only one web browser .. if the 'default' is set by browser in the end.
For comparison, here is Firefox 40.0 values list for a
<blockquote style="all: unset;font-style: oblique">
wherefont-style: oblique
triggers DOM operation.