We are a web design consultancy in San Diego, California. KINGdesk can help your organization develop and implement online strategies. We publish free articles featuring best practices for web design. For personalized consultation or web design services, please contact us.
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
2 comments • permalink