demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS3 and HTML5 Stylesheet Reset

css / resets

Estimated reading time: 3 minutes

Previously in this blog I have discussed CSS Resets, the practice of "zeroing out" all browsers default or implied values for properties, resetting the styles in all browsers to a particular standard. In principle, I am against "total annihilation" CSS Resets: I feel that a take-no-prisoners approach, with endless lists of selectors targeted for extermination, is far too much work – but I am in favour of a moderated, tactical approach that pinpoints problem selectors.

CSS3 and HTML5 have complicated and expanded CSS Reset principles. Older browsers do not know how to display certain HTML5 tags and default to displaying them inline; newer browsers throw in customized appearances for certain inputs. (Safari, for example, gives a customized look to HTML5 search inputs that is impossible to change unless you know the correct vendor selector and properties to use).

What follows is a set of CSS declarations that solve the majority of these problems across all browsers. The ruleset contains, and expands upon, the earlier basic CSS Reset discussed in this blog. Feel free to add these rules to the top of your own stylesheets : I would only ask that you keep the commented attribution at the start of the code, per the Creative Commons license for this blog. Each set of CSS rules comes with a brief explanation as to how and why it is used.

Feel free to modify the CSS below; I welcome your comments and suggestions.

	/* CSS 1,2 & 3 and HTML5 reset stylesheet – April 21, 2012 http://demosthenes.info/blog/300/CSS3-HTML5-Stylesheet-Reset */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
	/* resets sizing mode for all elements */
img { border: 0; }
	/* removes borders for images (this should not be applied with a wildcard selector, as doing so makes form elements disappear) */
html, body { min-height: 100%; font-size: 62.5%; }
	/* sets the body height of the browser, so backgrounds and div heights work correctly. Also sets em and rem units to exactly 10px, making sizing easier */
body, ul, ol, dl { margin: 0; }
	/* Sets margin to 0 for lists and the body tag so that all content starts from the same position across all browsers */
textarea { resize: vertical; }
	/* changes textarea resizing from "both" (UA default) to vertical only */
	/*	HTML5 CSS */
article, aside, audio, footer, header, nav, section, video { display: block }
	/* For older browsers, such as Firefox 3.6, that understand HTML5 but render the elements as display: inline. Leaves elements like date, figure and HTML5 form inputs alone */
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : 0px; }
	/* removes the inner border effect from focused buttons when using form elements in Firefox */
input[type="search"]{-webkit-appearance:textfield;}
input[type="submit"] { -webkit-appearance:none; }
	/* removes the OS X appearance from HTML 5 search inputs and submit buttons when viewed in Safari or Mobile Safari */
	/* OPTIONAL - USEFUL LAYOUT CSS */
.right { float: right; margin-left: 2em; clear: right; }
.left { float: left; margin-right: 2em; clear: left; }
	/* class shortcuts to floating any content left or right, e.g. <img src="x.jpg" class=right … />. Remember that you can use multiple classes so long as you put spaces between the class names: <img src="x.jpg" class="right other class" … /> */
table { border-collapse: collapse; }
th { background: #000; color: #fff; }
td { padding: 1em; border: 1px solid black; }
	/* cleans up presentation of tables; reverses color of table header cells */
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.