HTML 5 Reset Stylesheet

We’ve had a number of people asking about templates, boilerplates and styling for HTML 5 so to give you all a helping hand and continue on from those basic building blocks that Remy talked about last week I’ve created a HTML 5 reset stylesheet for you to take away and use, edit, amend and update in your projects.

Based on Eric Meyers CSS reset, I’ve made a few adjustments from Erics work that we’ll get to later but first here’s the file in full and we’ll then break it down step by step.

/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section, menu,
time, mark, audio, video {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
}
body {
        line-height:1;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
        display:block;
}
nav ul {
        list-style:none;
}
blockquote, q {
        quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content:'';
        content:none;
}
a {
        margin:0;
        padding:0;
        border: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 #000;
        cursor:help;
}
table {
        border-collapse:collapse;
        border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
        vertical-align:middle;
}

So what’s new then?

Well firstly, I’ve removed those elements that have been deprecated from the HTML 5 specification such as <acronym>, <font> and <big> (We’ll cover deprecated elements in more detail in another post). I’ve added in the the new HTML 5 elements to the reset, to remove any default padding, margin and borders. I’ve then added the explicit display:block declaration for those elements that are required to render as blocks.

I’ve also removed the :focus part from Eric’s stylesheet. There are two reasons for this; the first is that by declaring outline:0 you remove the focus identifier for keyboard users. The second is that although Eric released his stylesheet in good faith that people would edit it and style :focus, they don’t. You will also notice that I’ve set defaults for <ins> as I don’t think they got updated very often in Eric’s styles either.

Another change from Eric’s stylsheet is that I decided to remove the lines that remove bullets from lists, the reason for this is purely personal. I tend to only add the list style back in when using Erics reset anyway. I have however included nav ul {list-style:none;} to at least remove those pesky bullets from your navigation.

Using attribute selectors

You’ll notice that I’ve included attribute selctors for <abbr> and <dfn>, the reason for this is I only want the style to appear if there is a title attribute to be displayed. The reason for this is primarly for accessibility. For example we use <abbr> regularly on this site but don’t always include a title attribute, that’s because it’s safe to assume all (no matter what device they are using) our readers know what HTML is, however we need to still include <abbr> to make sure screenreaders read the text as H-T-M-L rather than “HTML” which they struggle to pronounce.

What’s that bit about mark?

<mark> is a new element introduced in HTML 5 used to (you guessed it) mark text in a document. The spec describes <mark> as “The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.”. I anticipate this it will be used for highlighting phrases in search results and similar. We’ll have more on this in a post soon.

Where are all those application elements?

“Application elements” is the term I’ve used to loosely describe those elements such as <datagrid>, <datalist> etc. Basically those that you are likely to find in web apps rather than websites. These have been left out because at the current time hardly any of what was ‘Web Applications 1.0′ has been implemented by browsers. Also this reset is primarily aimed at those serving their pages as text/html not xml.

Go grab it

So that basically wraps it up, it’s released under a creative commons license and you can use it for both personal and commercial work. I thought I’d let Google take care of the hosting so go grab it from Google Code and let me know of any thoughts, queries or improvements you can offer.