Previously in this blog I have discussed CSS Resets, the practice of "zeroing out" all browsers default or implied values for CSS 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.

1. /* CSS 1,2 & 3 and HTML5 reset stylesheet – April 21, 2012
2. http://demosthenes.info/blog/300/CSS3-HTML5-Stylesheet-Reset
3. GENERAL CSS RESETS */
4. * { outline: 0; -moz-box-sizing: border-box;
5. -webkit-box-sizing: border-box;
6. box-sizing: border-box;
7. }
8. /* removes outlines and resets sizing mode for all elements */
9. img { border: 0; }
10. /* removes borders for images (this should not be applied
11. to wildcard selector, as doing so makes form elements disappear) */
12. html, body { min-height: 100%; font-size: 62.5%; }
13. /* sets the body height of the browser, so
14. backgrounds and div heights work correctly.
15. Also sets em and rem units to exactly 10px, making sizing easier */
16. body, ul, ol, dl { margin: 0; }
17. /* Sets margin to 0 for lists and the body tag so that
18. all content starts from the same position across all browsers */
19. textarea { resize: vertical; }
20. /* changes textarea resizing from "both" (UA default)
21. to vertical only */
22. HTML5 CSS */
23. article, aside, audio, footer, header, nav, section, video { display: block }
24. /* For older browsers, such as Firefox 3.6, that understand HTML5 but
25. render the elements as display: inline. Leaves elements like date,
26. figure and HTML5 form inputs alone
27. BROWSER-SPECIFIC CSS */
28. input[type="submit"]::-moz-focus-inner,
29. input[type="button"]::-moz-focus-inner { border : 0px; }
30. /* removes the inner border effect from focused buttons when
31. using form elements in Firefox */
32. input[type="search"]{-webkit-appearance:textfield;}
33. input[type="submit"] { -webkit-appearance:none; }
34. /* removes the OS X appearance from HTML 5 search inputs
35. and submit buttons when viewed in Safari or Mobile Safari */
36. OPTIONAL - USEFUL LAYOUT CSS */
37. .right { float: right; margin-left: 2em; clear: right; }
38. .left { float: left; margin-right: 2em; clear: left; }
39. /* class shortcuts to floating any content left or right,
40. e.g. <img src="x.jpg" class=right … />.
41. Remember that you can use multiple classes
42. so long as you put spaces between the class names:
43. <img src="x.jpg" class="right other class" … /> */
44. table { border-collapse: collapse; }
45. th { background: #000; color: #fff; }
46. td { padding: 1em; border: 1px solid black; }
47. /* cleans up presentation of tables; reverses
48. color of table header cells */