CSS Reset - Refreshed
published: December 21, 2009
updated: July 5, 2010
It is helpful when designing a web page for cross-browser consistency, to create a common foundation. Eric Meyer’s CSS Reset is a valuable tool to cancel out conflicting aspects of default browser stylesheets. KINGdesk Web Design has used this file on every website we have developed in the past 2 years.
As we have begun implementing new HTML5 elements into KINGdesk’s designs, a new bit of code is required. HTML4′s defined behavior for handling of unknown elements requires inline treatment. This requires use of HTML5 block level elements (such as <section>
, <article>
, <header>
, and <footer>
) be explicitly defined as such for proper handling… for a common foundation. Additionally, many new elements (both inline and block level) should reasonably be included in the initial CSS Reset style clearing rule. As such, I am now using the following modified version:
/* v1.2 | 20100218 */
/* Eric Meyer's original CSS Reset is found at
meyerweb.com/eric/tools/css/reset/ */
/* This version's permalink is
kingdesk.com/articles/css-reset/ */
html, body, div, span, applet, object, br,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, 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,
section, article, aside, hgroup, header,
footer, nav, dialog, figure, menu,
video, audio, mark, time, canvas, details {
margin: 0;
padding: 0;
border: 0;
outline: 0;
%;
vertical-align: baseline;
background: transparent;
}
section, article, aside, hgroup, header,
footer, nav, dialog, figure, figcaption {
display: block;
}
body {
line-;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus { /* remember to define focus styles! */
outline: 0;
}
ins { /* remember to highlight inserts somehow! */
text-decoration: none;
}
del {
text-decoration: line-through;
}
table { /* markup tables with 'cellspacing="0"' */
border-collapse: collapse;
border-spacing: 0;
}
Purposefully excluded from the above CSS reset are the following HTML5 elements:
- embed
- progress
- meter
- ruby
- rt
- rp
- command
- datalist
- keygen
- output
trackback url • subscribe to comments
Trackbacks
A Comprehensive Guide to CSS Resets | DesignFools • 6:32 am on Dec. 13, 2010
[…] Web designer Jeffrey King updated Meyer’s original reset for HTML5; his revision is called CSS Reset – Refreshed: […]
A Comprehensive Guide to CSS Resets | WordPress Crunch • 8:36 am on May. 22, 2011
[…] Web designer Jeffrey King updated Meyer’s original reset for HTML5; his revision is called CSS Reset – Refreshed: […]