I have discussed CSS Resets, the practice of "zeroing out" all browsers default or implied values for CSS properties, previously. 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.
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 and modify these rules for your own use : I would only ask that you keep the commented attribution at the start of the code, per the Creative Commons license.
/* Reset stylesheet – January 1, 2015 http://thenewcode.com/300/CSS3-HTML5-Stylesheet-Reset */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
min-height: 100vh;
}
body, ul, ol, dl, figure {
margin: 0;
}
textarea {
resize: vertical;
}
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
border : 0px;
}
input[type="search"]{
-webkit-appearance:textfield;
}
input[type="submit"] {
-webkit-appearance:none;
}
/* optional */
.right {
float: right;
margin-left: 2rem;
clear: right; }
.left {
float: left;
margin-right: 2rem;
clear: left;
}
table {
border-collapse: collapse;
}
th {
background: #000;
color: #fff;
}
td {
padding: 1em;
border: 1px solid black;
}
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.