how to remove every style from element?

Question

By 'remove' I mean resetting all the style that may descend on such element and put it to browser defaults.

I need this for debug, I don't know what rule is causing harm and I thing good approach is to remove all styles and then loose the restriction one by one to check when things start to go wrong.

Have you seen any snippets on the web that would consist of:

{ right: auto !important; left: auto !important; visibility: visible !important;...

and so on through every possible style.

Answer 1

try this. make a class named something like this and then use it

.reset-this {
    animation : none;
    animation-delay : 0;
    animation-direction : normal;
    animation-duration : 0;
    animation-fill-mode : none;
    animation-iteration-count : 1;
    animation-name : none;
    animation-play-state : running;
    animation-timing-function : ease;
    backface-visibility : visible;
    background : 0;
    background-attachment : scroll;
    background-clip : border-box;
    background-color : transparent;
    background-image : none;
    background-origin : padding-box;
    background-position : 0 0;
    background-position-x : 0;
    background-position-y : 0;
    background-repeat : repeat;
    background-size : auto auto;
    border : 0;
    border-style : none;
    border-width : medium;
    border-color : inherit;
    border-bottom : 0;
    border-bottom-color : inherit;
    border-bottom-left-radius : 0;
    border-bottom-right-radius : 0;
    border-bottom-style : none;
    border-bottom-width : medium;
    border-collapse : separate;
    border-image : none;
    border-left : 0;
    border-left-color : inherit;
    border-left-style : none;
    border-left-width : medium;
    border-radius : 0;
    border-right : 0;
    border-right-color : inherit;
    border-right-style : none;
    border-right-width : medium;
    border-spacing : 0;
    border-top : 0;
    border-top-color : inherit;
    border-top-left-radius : 0;
    border-top-right-radius : 0;
    border-top-style : none;
    border-top-width : medium;
    bottom : auto;
    box-shadow : none;
    box-sizing : content-box;
    caption-side : top;
    clear : none;
    clip : auto;
    color : inherit;
    columns : auto;
    column-count : auto;
    column-fill : balance;
    column-gap : normal;
    column-rule : medium none currentColor;
    column-rule-color : currentColor;
    column-rule-style : none;
    column-rule-width : none;
    column-span : 1;
    column-width : auto;
    content : normal;
    counter-increment : none;
    counter-reset : none;
    cursor : auto;
    direction : ltr;
    display : inline;
    empty-cells : show;
    float : none;
    font : normal;
    font-family : inherit;
    font-size : medium;
    font-style : normal;
    font-variant : normal;
    font-weight : normal;
    height : auto;
    hyphens : none;
    left : auto;
    letter-spacing : normal;
    line-height : normal;
    list-style : none;
    list-style-image : none;
    list-style-position : outside;
    list-style-type : disc;
    margin : 0;
    margin-bottom : 0;
    margin-left : 0;
    margin-right : 0;
    margin-top : 0;
    max-height : none;
    max-width : none;
    min-height : 0;
    min-width : 0;
    opacity : 1;
    orphans : 0;
    outline : 0;
    outline-color : invert;
    outline-style : none;
    outline-width : medium;
    overflow : visible;
    overflow-x : visible;
    overflow-y : visible;
    padding : 0;
    padding-bottom : 0;
    padding-left : 0;
    padding-right : 0;
    padding-top : 0;
    page-break-after : auto;
    page-break-before : auto;
    page-break-inside : auto;
    perspective : none;
    perspective-origin : 50% 50%;
    position : static;
    /* May need to alter quotes for different locales (e.g fr) */
    quotes : '\201C' '\201D' '\2018' '\2019';
    right : auto;
    tab-size : 8;
    table-layout : auto;
    text-align : inherit;
    text-align-last : auto;
    text-decoration : none;
    text-decoration-color : inherit;
    text-decoration-line : none;
    text-decoration-style : solid;
    text-indent : 0;
    text-shadow : none;
    text-transform : none;
    top : auto;
    transform : none;
    transform-style : flat;
    transition : none;
    transition-delay : 0s;
    transition-duration : 0s;
    transition-property : none;
    transition-timing-function : ease;
    unicode-bidi : normal;
    vertical-align : baseline;
    visibility : visible;
    white-space : normal;
    widows : 0;
    width : auto;
    word-spacing : normal;
    z-index : auto;
    /* basic modern patch */
    all: initial;
    all: unset;
}

Originally from here: Reset/remove CSS styles for element only

Answer 2

If you're on Chrome/Safari, initial works just fine for what you want to do. After setting it, you'll see the active style as initial and the the computed style as the browser default.

But to set the active styles to the default, create a temporary element and set your element properties to the the temporary values.

Demo: http://jsfiddle.net/ThinkingStiff/Yb9J9/

Script:

Element.prototype.setDefaultStyles = function () {
    var element = document.createElement( this.tagName ),
        styles = window.getComputedStyle( element ),
        display = styles.getPropertyValue( 'display' );
    element.style.display = 'none';
    document.body.appendChild( element );

    for( style in styles ) {
        this.style[styles[style]] = styles.getPropertyValue(styles[style]);   
    };

    this.style.display = display;
    document.body.removeChild( element );
};

document.getElementById( 'unstyled' ).setDefaultStyles();

HTML:

<div id="styled">styled</div>
<div id="unstyled">unstyled</div>

CSS:

#styled, #unstyled {
    border: 1px solid red;
    color: green;
    width: 100px;
    height: 50px;
}

Output:

Answer 3

You cannot. There’s the value initial proposed in CSS3 drafts, but even if it were defined, it would set properties to the initial values defined in CSS specifications, not as defined by browser defaults. For example, the initial value of the display property is inline, but surely browsers don’t render everything as inline elements by default.

A better approach to your original problem is to use debugging and inspecting tools like Firebug or Web Developer Extension for Firefox. They let you see which styles apply to an element and where they come from.

Answer 4

Use a reset style sheet that loads before all your other style sheets.

I use a modified version of http://meyerweb.com/eric/tools/css/reset/