css reset test

test results of using css-reset rules. click to toggle resetrules on/off.

by Laurens Maneschijn

HTML

<div>
    <h1>click anywhere to toggle reset class on/off</h1>
    reset is currently : 
    <span class="reseton"> ON (overwritten with reset css rules)</span>
    <span class="resetoff"> OFF (default style)</span>
</div>


<br/>
<h4>
    inline-block, float and table elements test to show effect of e.g. 
    <code>* {vertical-align:baseline;</code> etc. : 
</h4>

<hr/>

<span>
    span
</span>
<span class="big">
    span big
</span>

<hr/>

<div class="inlineblock">
    inlineblock
</div>
<div class="inlineblock big">
    inlineblock big
</div>

<hr/>

<div class="floatleft">
    floatleft
</div>
<div class="floatleft big">
    floatleft big
</div>

<hr/>

table cells lose default vertical-align:middle; :
<table>
    <tbody>
        <tr>
            <td>
                tablecell 1 1
            </td>
            <td class="big">
                tablecell 1 2<br/>line<br/>line
            </td>
        </tr>
        <tr>
            <td class="big">
                tablecell 2 1<br/>line<br/>line
            </td>
            <td>
                tablecell 2 2
            </td>
        </tr>
    </tbody>
</table>

<hr/>

some elements lose margins, e.g. p h1,...,h6 etc.:
<div>
	divstart
	<p>
		paragraph
	</p>
	divend
</div>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>

SCSS

/* NB: reset rules need to be declared first. scroll to bottom for page-specific element rules */

/* toggle display of reset is on/off messages: */
              .reseton{display:none;}
html.reset_on .reseton{display:inline;}
              .resetoff{display:inline;}
html.reset_on .resetoff{display:none;}

/* reset classes, wrapped in .reset_on parent class to be able to easily toggle them on/off : */
html.reset_on {
	// **********************************
	// RESET
	// **********************************

	*{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
	body{line-height:1}
	article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
	nav ul{list-style:none}
	blockquote,q{quotes:none}
	blockquote:before,blockquote:after,q:before,q:after{content:none}
	a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
	ins{background-color:#ff9;color:#000;text-decoration:none}
	mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
	del{text-decoration:line-through}
	abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
	hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
	input,select{vertical-align:middle}
	small{font-size:smaller}


	// **********************************
	// EXTRA RESETS
	// **********************************

	// Prevent font scaling in landscape while allowing user zoom
	html {
		-webkit-text-size-adjust: 100%;
	}

	button, input, select, textarea {
		border-radius: 0px;
	}

	input[type="radio"] {
		border-radius: 10px;
	}

	input[type="file"] {
		background-image: none;
	}

	// Prevent firefox adding 1px to buttons
	input::-moz-focus-inner,
	button::-moz-focus-inner {
		border: 0;
		padding: 0;
	}
}



/* debug basic alternating outlines to highlight element locations */

body > *          {outline:1px dashed #f00 !important ;}
body > *>*        {outline:1px dashed #0f0...

JavaScript

$(document).ready(function(){
    $('html').addClass('dummyclass reset_on');
});

$(document).on('click',function(e){
    $('html').toggleClass('reset_on');
});




// code below adds CSS DOM path selector on elements as title on mouseover for quick inspecting of targets:
$(document).on('mouseover','*',function(e){
    set_title_css_selector_fullpath(e.target);
});
function set_title_css_selector_fullpath(o){
    $(o).prop('title', get_css_selector_fullpath(o));
}

function get_css_selector(o){
    return o.tagName 
        + (o.id ? '#' + o.id : '')
        + (o.className ? '.' + o.className.split(' ').join('.') : '')
    ;
}
function get_css_selector_fullpath(o){
    var a = [];
    $(o).add($(o).parents()).each(function(i,o){a.push(get_css_selector(o));});
    return a.join(' > ');
}