I’m very proud to release the first copy of a reset I’ve been working on for a while now, which is big step forward from the classic Meyer reset. I’ve been playing about with this for a while but I think now is the time to let it out in the open. Introducing, strppd.css!

Strppd.css is a reset I’ve been working on for most of this year, tweaking it every now and again. A year ago I wasn’t a huge fan of copy and pasting code, and just using the code I needed necessary. However, there are bigger projects (for example, WordPress themes) that could use a full reset, as to reset elements not only used in the initial design, but also elements generated in content by the CMS. I was a big fan of using the Industry-famous Meyer reset.

However, over time, I noticed things the reset was missing, and had to go back into the reset and add them. While there are other other resets out there (like the very detailed normalise reset), I didn’t need every last thing reset for me; if anything large resets take up file size, and my recent projects are getting longer CSS files, so I like to keep the file size and load time under control. I also only wanted to have the most common elements reset, not ones that I didn’t have every project.

Stripping away arbitrary properties on elements

I decided to add more to the reset, as to remove styling rendered by browsers that was missing from the original Meyer reset, particularly mobile styling. Webkit mobile can be a pest for this as it has a rather arbitrary habit of styling form elements using -webkit-appearance and -webkit-border-radius. It also has a setting for text rendering to be blown up on mobile devices, as well as tap highlighting. I have nothing against tap highlighting, but unless you change it yourself, I don’t think it adds more to your design, so this is removed but you can add or remove it as you see fit.

I also added typographical styling on text elements, such as em, i, strong, and u. While the first line of the reset sets everything to inherit the font styling, some elements should be given back some of their respective typographic styling, as well as the pre tag getting resets for certain browsers. I also added some more resetting to forms by removing box shadows on required form elements, as well as adding the cursor property to elements that the user interacts with.

All in all, the reset covers what I felt was missing for CSS resets cross browser, as well as takes care of things so others don’t need to, and keeping it to a reasonable size. It’s certainly helped me in recent projects, and I hoep it will help you in future projects too.

/*
strppd.css by Iain MacDonald(http://iainspad.com/strppd-css/)

Based on the Meyer Reset by MeyerWeb (http://meyerweb.com/eric/tools/css/reset/)
This is a modified version with additional resetting such as setting certain elements to certain properties, as they should.
This also carries some resets for HTML5 elements i.e. the ':required' pseudo-selector, as well as resetting for mobile browsers.
Also included is some typographical styling, just to set them to their respective type styles.
Finally, there's also form and interactive element styling so forms and navigation elements look clickable.

Be sure to contribute any improvements and changes to this reset as you see fit. Have fun!

v. 1.0
License: Public Domain

*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {display: block;}

/*---Universal Selector to add additional resets, such as enhanced legibility, text-size adjust and webkit tap highlighting---*/

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

a {text-decoration: none;}

body {line-height: 1;}

ol, ul {list-style-type: none;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
}

/*---Removes Webkit form styling on Mobiles---*/

input, textarea {
    -webkit-appearance: none;
    -moz-appearance: none; 
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

/*---Additional Form resets---*/

button, input[type="button"] {background: none;}

:required {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
}

/*---Typographic Styling---*/

em, i {font-style: italic;}

strong, b {font-weight: bold;}

u {text-decoration: underline;}

pre, code {font-family: Monaco, Courier, monospace;}

pre {
    white-space: pre;
    white-space: pre-wrap;
    white-space: pre-line;
    word-wrap: break-word;
}

blockquote, q {quotes: "" "";}

blockquote:before, blockquote:after, q:before,  q:after, {content: "";}

/*---Interactive Element Settings---*/

a, input[type="submit"], input[type="button"], button, label[for] {cursor: pointer;}

/*---Misc. Element Styling---*/

img {-ms-interpolation-mode: bicubic;}

Contribution

Of course, none of this would be as awesome without some form of contribution from others to keep it on the straight and narrow. Thanks to Janna Hagan for giving it a look over, and especially Dave rupert for keeping me on the straight and narrow with the final code, as well as giving me crucial pointers when putting this together. Lastly, thanks to Eric Meyer for allowing me to release this reset under another name, despite both being under a public license.

Now it’s your turn; feel free to use this for all your web projects and remember, the above code is not the only way to reset your CSS. Add you own resets to it or remove any you see fit, but also, if you feel anything is missing, do make it known. You can contribute by dowloading, forking, and committing your code by strppd’s Github repository. Have fun!