We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects.
The code
Let’s start with the complete CSS stylesheet:
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
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, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
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,details,figcaption,figure,
footer,header,hgroup,menu,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;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
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;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
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?
Quite a bit! The next few sections explain what I changed and why I changed it.
The basics
I started by removing elements that have been deprecated from the HTML 5 specification, like <acronym>
, <center>
and <big>
. (We’ll cover deprecated elements in more detail in another post). I also added new HTML 5 elements, like and
, in order to remove any default padding, margin, and borders. I’ve also added an explicit display:block
property for elements that are required to render as blocks.
I also removed the explicit unstyling of the :focus
pseudo-class. There are two reasons for this. First, by declaring outline:0
, you remove the focus identifier for keyboard users. Second, Eric released his stylesheet in good faith that people would explicitly style :focus
, but they generally don’t, so it’s safer to leave the default :focus
styles in place. (I also set defaults for <ins>
, since I don’t think that got updated very often either.)
I’ve left the default list styles in place simply as a personal preference. I tend to add the list style back when using Eric’s reset anyway. I have, however, included nav ul {list-style:none;}
to remove those pesky bullets from your navigation.
Using attribute selectors
You’ll notice that I’ve included attribute selectors for <abbr>
and <dfn>
. This way, the style will only appear if there is a title attribute on the element. This is primarily for accessibility. For example, we use <abbr>
regularly on this site but don’t always include a title attribute. We think it’s safe to assume all of our readers (no matter what device they’re using) know what HTML stands for. We do still use the <abbr>
element to make sure screen readers read the text as H-T-M-L rather than struggling to pronounce “HTML”.
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. According to the spec: “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 it will be used for highlighting phrases in search results and other similar purposes. We’ll post more on <mark>
soon.
Where are all those application elements?
Application elements is a term I’ve loosely used to describe elements like menu, etc. These elements are more likely found in web apps than web sites. I left these out since, at the time of writing, browsers implement barely any of what was “Web Applications 1.0”. Also, this stylesheet is intended primarily for authors serving their pages as text/html
, not XML.
Go grab it
The stylesheet is released under a Creative Commons license in the public domain free of charge under a CC0 Public Domain Dedication and MIT License, so you can use it for both personal and commercial work. Go grab it from Google Code or the Github page and let us know about any improvements you make!
Permission is hereby granted, free of charge, to any person obtaining a copy of any version of this file on Google Code or this file on Github (the “Software”), to deal in the Software under the terms of the CC0 Public Domain Dedication, or,alternatively, to deal in the Software under the terms of the MIT License.
251 Responses on the article “HTML5 Reset Stylesheet”
Hi Richard,
outline:0 on anchors is a big accessibility issue because keyboard users can’t see the focused element anymore. And a background color (ins, mark) should never be set without a text color. I’d suggest to fix that.
Thanks,
Martin
You list menu twice in the first and third rulesets. (menu is display:block in browsers already so no need to include it.)
source is an invisible element so doesn’t need any resets.
blockquote doesn’t have quotes by default.
I would argue against removing quotes from the q element — if you use both the q element and quotation characters then you get double quotation characters in the feed reader and in non-CSS browsers such as Lynx. If you’re going to use quotation characters then don’t use the q element at all.
I would also suggest to not use cursor:help since personally I find it annoying and also some people think that something will happen when they click it (since it normally does in the OS).
/* tables still need ‘cellspacing=”0″‘ in the markup */
Why?
border-spacing and cellspacing have no effect in the collapsed table border model anyway. and cellspacing is an obsolete attribute in HTML5.
@martin ah good spot, removed the :focus but forget the anchor in the opening rules, now moved on it’s own. Also thanks for the colour reminder.
@zcorpan ah must have missed source when removing elements from that rule, thanks. Also good on spot on menu, no matter how much checking you do something always gets missed eh?
Didn’t realise that cellspacing was obsolete now, however it has now been removed.
I think the help cursor can be handy, but can understand your concerns that people may think it signifies a link for example.
I did think about including quotes by default but have decided to leave this as found in Eric’s reset.
Cheers
Rich
[…] 5 Doctor publishes a HTML 5 reset stylesheet, based on Eric Meyers‘ CSS Reset. The idea, as Meyer says, is to reduce browser […]
Thanks for this, I’d already cobbled together my own version, but this one is much more comprehensive and built with a better understanding of just what the hell is going on with HTML5.
Nice code, but is CSS reset necessary? What are real advantages of CSS reset?
I think it is illogical to remove blockquote’s margin, or set e.g. border:0 to elements, which don’t have any default border.
CSS Resets: polluting your Firebug(/Web Inspector/etc.) style information and breaking keyboard accessibility in a web project near you.
There are some ideas that i may use in my own CSS Unreset (aka base stylesheet), though.
A few comments on some details:
1. The part for killing automatic quotes looks a bit too convoluted. First, i think there is no need to apply specific rules for that to BLOCKQUOTE elements. I have never seen a web browser that uses automatic quotes for the BLOCKQUOTE element. Then, for the Q element, Firefox and Opera (and maybe IE8?) will accept q{quotes:none;}, but not Webkit. For Webkit you need q:after,q:before{content:””;}. But then my guess is that if you use this line, you don’t need q{quotes:none;}. So you may be able to replace your nine lines of code with just:
q:before, q:after {
content:”;
}
Obviously you should check that it works first. Maybe you already did?
2. For the border on abbr and dfn, you may want NOT to specify a color, and let the browser use the text’s color. I use border:1px dotted;, but i have not tested it extensively.
3. About the “tables still need ‘cellspacing=”0″‘ in the markup” statement, which comes from Eric Meyer’s stylesheet if i remember correctly: i have never found that to be true. Maybe i missed it. I write tables without that attribute and never had a problem because of that. Is that a IE5 or NN6 or IE Mac limitation? If this is the case, then that comment could be discarded.
4. In the first and third selectors, you have the MENU element twice.
5. You write about outline:none on a:focus which kills link focus when navigating with the keyboard. But, at least on Firefox, having outline:none on the A element (with no particular pseudo-class) does the same. I wrote this test page (the first CSS styles apply to all links in the page, the following ones apply only to the relevent section): http://covertprestige.info/temp/liens-focus-active.html The goal is to keep the browser’s default highlighting of focused links, and to avoid this highlighting when links are clicked. In my tests, a:active {outline:none;} works perfectly (with no accessibility issue i can think of) in Firefox 3.0 and 3.5, Safari 3 and 4, Opera 9.6 and 10 (actually Opera forces a very strong focus style when using keyboard navigation, and won’t allow style authors to override it, so it’s not a surprise), AND IE8. It doesn’t work with IE 6 and 7, but those don’t implement the outline property anyway (and have a buggy implementation of :active).
I may have forgotten something, but a:active {outline:none;} looks like a winner to me.
[…] is the original: HTML 5 Reset Stylesheet July 27, 2009 — Searching For Potential Web Hosting ProvidersJuly 27, 2009 — Microblogging in […]
“is CSS reset necessary?”
I think not. CSS resets have their advantages but then they have their problems too. If you take the definition of a reset stylesheet literally, you have to make the display of every single element as neutral or blank as possible. Some reset stylesheets do that, but this one doesn’t. If you read it carefully, or read the author’s comment, you will find some places where some really visible styles are added to elements that are or may be otherwise transparent. Like ABBR elements or INS or MARK elements.
So this is not a reset stylesheet proper, but more like a base stylesheet that’s 70% reset and 30% set. ;)
Now it does reset a lot of stuff, the most obvious being element margins. I would advise against doing that. I often encounter websites where the CSS coder forgot to style such or such content, some particular content combinations. With resetted margins plus that kind of omission, you end up with chunks of text glued together when they shouldn’t be. Like a header that touches the text above (making it closer to the text it does not describe than to the text it DOES describe). Or blog comments that appear very raw because even though some HTML or Markdown syntax is allowed in comments, the CSS coder only expected raw text in comments.
My point is that the default styles of browsers are useful, and are not as problematic as people often say. There may be like five or six common problems with browser default styles, the rest being very minor issues that may not be covered using a reset stylesheet anyway. Why not just write a base stylesheet that addresses those five or six issues, and be done with it? That stylesheet could be complemented with a few rules for some of the minor problems; those problems generally don’t have a clear-cut solution, so you would need to review what rules you’ll be using for each project, maybe.
The second biggest issue of reset stylesheets is that they apply a bunch of rules to virtually any element in the page. And some of these rules may be inherited. Wich means that a) there is a small performance footprint (maybe/probably? negligible), and b) when you ask Firebug or Web Inspector or IE8’s Developer Tools or Opera DragonFly for the styles that apply to a given element, you get this:
/* START OF EXAMPLE */
selector for this element {
some styles
}
selector for this element’s parent {
some inherited styles
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 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 {
some inherited styles
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 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 {
some inherited styles
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 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 {
some inherited styles
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 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 {
some inherited styles
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 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 {
some inherited styles
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 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 {
some inherited styles
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 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 {
some inherited styles
}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 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 {
some inherited styles
}
/* END OF EXAMPLE */
So you get like 90% useless information. Way to pollute the information displayed by those tools.
“What are real advantages of CSS reset?”
Getting rid of the five or six most comment inconsistencies between browser default styles. But any CSS Reset that aims to create a blank state is overkill for that. Then there may be a few projects who NEED a blank state, but apart from some web apps who totally rewrite the look-and-feel and behaviour of most HTML elements they use (e.g. GMail) i think there are not a lot of such projects.
[…] HTML 5 Reset Stylesheet | HTML5 Doctor […]
Thanks for this! Also:
1) Do tables still need ‘cellspacing=”0″‘ in the markup?
2) Great point Martin. As a default, we can use the following file to help remember about the focus:
/* remember to define focus styles! */
:focus {
outline: 0;
}
[…] publica una CSS Reset específica para HTML5. Se trata de una adaptación de la famosa CSS Reset de Eric Meyers, a la que se le han añadido los […]
[…] publica una CSS Reset específica para HTML5. Se trata de una adaptación de la famosa CSS Reset de Eric Meyers, a la que se le han añadido los […]
[…] See the original post here: HTML 5 Reset Stylesheet | HTML5 Doctor […]
[…] See original here: HTML 5 Reset Stylesheet | HTML5 Doctor […]
I used to use a reset based on Eric Meyer’s but don’t anymore as I found that I explicitly state margins, padding, borders etc on everything anyway, so there was no need to reset everything.
[…] HTML 5 Reset Stylesheet | HTML5 Doctorhtml5doctor.com […]
[…] HTML 5 Reset Stylesheet | HTML5 Doctor (tags: html5 css reset webdesign) […]
It seems like some of you guys aren’t keen on resets (or base as Florent better describes it). My personal view is that it depends on the project, you have to take each one on it’s merits.
@Florent, some great comments there, thanks for making them. Most of those bits and pieces you picked up having been solved by your’s, Martins and zcorpans comments.
@Web Overhauls, you’ll see from the article that I’ve removed the :focus parts of the stylesheet as people don’t style it so no outline is shown which isn’t good for accessibility. And no, as zcorpan pointed out the cellspacing attribute is deprecated in HTML 5
@John, it’s always interesting to see how different folks work and have a different development path.
[…] HTML 5 Reset Stylesheet | HTML5 Doctor (tags: html5 css reset webdesign) […]
I don’t know that it makes a hill of beans, but I made a small adjustment in the reset sheet myself.
Since ins and mark have two common attributes, I just wrote those together and then placed the separated elements on their own.
ins, mark { background-color: #ff9; color: #000; }
ins { text-decoration: none;}
mark { font-style: italic; }
Nothing big, but it seemed logical.
[…] 5 CSS Reset Richard Clark made a few adjustments to the original CSS reset released from Eric […]
Couple of points. I think resets are a good idea over all but can be taken to extremes. The reason we need them is to force you to actual define your styles. If blockquote’s margin’s were not reset to 0, there is a good chance that you might like how it looks in firefox and never style it. Opera comes a long and treats blockquotes differently and your design falls apart. So by making all browsers suck the same, as designers we then have to fix it the same. I just wish it wasn’t so heavy and gunk up firebug, but I think its worth it in the end.
Now my main reason for commenting, is I never understood why we kill bullets on unordered lists. I mean I guess my reasoning above could be the answer, but the core functionality of an ul is to expect bullets. I also don’t know why someone decided that bullets should be outside instead of inside. Inquiring minds want to know.
[…] The rest is here: HTML 5 Reset Stylesheet | HTML5 Doctor […]
Still have menu listed twice.
I’m of the view that resets at the least achieve more consistent layouts across browsers. I never used them until about a year ago, but find I spend less time hacking, changing position numbers especially to make things work cross-browser! No reset is perfect so must be used on a case by case basis.!
“I’m of the view that resets at the least achieve more consistent layouts across browsers.”
How so? There is no black magic in CSS Resets, so the very little they do must help avoid some common problems. So what are those problems? Wouldn’t it be better to teach CSS coders those few common problems?
My take on this is that most developers who use CSS Resets do so because of a) the margin/padding difference for the BODY, UL and OL elements, and b) lack of understanding of the collapsing margins mechanism in CSS.
@Tony, we certainly could combine the selectors as you’ve done in order to save a few bytes (and repetition) however I’ve left it like that to make it easy for developers to see what’s going on and amend as required.
@Rob Miracle, it’s true that you might like how the browser renders a blockquote in some browsers but not others, however I doubt that they’ll be sharing common default stylesheets in the near future. Also on your point re bullets, you’ll notice that that’s why I’ve only removed bullets from ul’s that are within the nav element.
@Hurr, good spot, should be corrected now.
@Sahus, you’re spot on about using resets or base files on a case by case basis, and that’s why I urge you to take it and modify it for your own needs.
[…] HTML 5 Reset Stylesheet – HTML5 Doctor Ett reset-css för HTML5. (tags: css html5 reset) […]
[…] Adapted from Eric Meyer’s CSS reset, this can be a good start for people looking to use CSS reset for HTML 5. […]
[…] 6. HTML 5 Reset Stylesheet […]
[…] a Better Designer, Right Now 10 Simple Ways to Make Life Easier for Your Website’s Users HTML 5 Reset Stylesheet How to Make Your Web Design Stand out from the […]
I was actually surprised how many people disliked resets, or at least were not in love with them as many others. In fact this post should’ve been called “Resets, like em or hate em here’s one for HTML5.”
Florent pointed out that it was only 5 or 6 inconsistencies, and I really disagree. Before resets, I used to have to zero out margins and padding on many elements, which was really annoying. Then when there’s layout problems (especially for IE), instead of doing just margin-left or martin-top etc, I would have to use the shorthand to zero out all the margins/padding that I didn’t zero out in the first place. Also when you don’t really know or remember what margins you set in the first place, then you don’t want to be zeroing them out or setting the same margins again on page specific css and such and to work out bugs.
I have never had the Firebug problems of which Florent talks about, although I see your point. However, when you set css for elements, it overwrites the reset (which should be before any other css in the file or page). So what you see first is the id, class, and the most specific css to it first. Then you will start seeing the styling for general tags, which you can skip and not have to read at all. So that is definitely not a problem, and the reset does not appear a billion times like you’ve posted.
Sahus is pretty much right on here though, it prevents layout issues. With my reset (which I’ve formed from Eric Meyer’s and YUI’s for fonts), I rarely have to go in browsers to check for inconsistencies. IE might have some, but at least I know that a negative margin here and there will solve it instead of wondering what default properties it has set on my element.
If your coding is not so hectic without a reset, that’s fine with me. I just however think a css reset will benefit in many ways, including helping you code less and much faster due to less bugs within browsers and even Firefox itself if you’re looking to creating a complex site.
Awesome HTML5 reset though, I probably will be sticking to XHTML for a while still, but I will start experimenting soon like YouTube has on http://www.youtube.com/html5
“Florent pointed out that it was only 5 or 6 inconsistencies, and I really disagree.”
Then could you maybe list more than 10 such inconsistencies? I’m not speaking of CSS rendering bugs in some browser (mostly IE 6-7), but of cases where one HTML element has significantly different default styles in different browsers. Obviously even with the same default styles, one browser could still mess up the rendering, but that’s not an issue relevant to CSS Resets. ;)
Here is the list i can come up with:
1. The BODY element has a 8px margin in some browsers, and a 8px padding in some others. If you want to be able to have DIVs or other elements touch the borders of the viewport, you will need a body {margin:0; padding:0;}
2. The UL and OL elements have a 40px space on the left. That space is either a padding-left or margin-left, depending on the browser. When you want to zero out this space, you have to specify margin-left:0; padding-left:0.
3. The top and bottom margins of the P and H1-6 elements are 1em in most browsers. But some may be using a pixel value instead (i think IE does, but i can’t guarantee that and i should test it). Setting p {margin: 1em 0;} is enough to avoid most inconsistencies, since for titles you’re very likely to give them precise margins when you end up styling them.
4. Default margin and padding for the FIELDSET element is a bit inconsistent from one browser to another. Setting fieldset {margin: 0; padding: 0;} is enough to fix this problem. Or you may choose to fix it when you end up using a FIELDSET element (which doesn’t happen that often if you know your HTML).
5. The exact font-size for H1, H2, H3 elements is slightly different between IE and other browsers. Nothing major, but if you rely on the default font-size for your title you may have slight inconsistencies. I tend to style the global font-size and titles font-sizes at the very beginning of a project, avoiding that kind of issues.
I can’t think of anything else from the top of my mind (and i have a rather comprehensive knowledge of CSS).
I’m not saying that CSS Resets are not useful to some extent. I think it’s pretty convenient to have a base stylesheet that will 1) take care of the five issues i have listed above, 2) maybe correct the default styles (such as recommended by the W3C spec) to get something closer to what we usually need in most projects (smaller overall font-size and smaller title font-sizes, for instance), 3) provide a canvas that we can then alter to further define the basic styles for a given project. But classical CSS Resets (and this one as well) take a heavy-handed AND UNNECESSARY approach to (1) and (2), and don’t provide a canvas that coders can alter. Which is why i think they are inferior to a well thought-out base stylesheet.
Granted, the negative consequences of a classic CSS Reset are no big deal. It’s mostly coders forgetting to set some styles, and the pollution of {{your favorite tool here}} results when inspecting an element’s styles. Let me illustrate both issues:
– http://files.getdropbox.com/u/145744/screens/troublewithreset.png
– http://files.getdropbox.com/u/145744/screens/reset-inheritance.png
(Protip: if your reset stylesheet does not specify an inherited property for all elements (no font-size or color…), you avoid that second issue altogether.)
Here is the base stylesheet (and some extensions) that i use in my projects, and that i publish in a set of tools for Komodo or on Alsacreations.com (website on web standards and mostly front-end development). When i use it in a project, i usually strip out most of the comments, and i may not use all the rules.
http://dpaste.com/hold/74038/
“So that is definitely not a problem, and the reset does not appear a billion times like you’ve posted.”
That example was an extreme case, but it was NOT an exaggeration. See the screenshot i posted above, or inspect any element (deep enough in the DOM tree) on this website. (Just checked right now on the “Comment by…” line on this page. The actual result is MORE complex than the example i gave in a previous message. The added complexity is that if you want to see what the styles inherited from BODY are, you have to scroll past five blocks of bla,bla,bla,bla,bla,bla,bla{font-size:100%;), which is worse than what my example showed.)
I’ll end this comment with a question: do you understand the concept of collapsing margins well? Do you know what it is? Are you able to tell, when coding, if it will apply or not?
I’m asking this because in my experience i have found that many people insisting on the usefulness of CSS Resets don’t know about collapsing margins or know a bit but are reluctant to deal with them.
[…] 6. HTML 5 Reset Stylesheet […]
[…] 6. HTML 5 Reset Stylesheet […]
Shouldn’t there just be a simple CSS-tag or something that kills the default (or all) styles in every browser? That would be a nice option.
As mentioned before, as someone who used to use a reset, but now who doesn’t, I find the opposite to be the case.
You can use * { margin: 0; padding: 0 } but if you read the original article by Eric Meyer on resets linked near the beginning of the article, you’ll see why that method has its problems.
[…] Source: http://html5doctor.com/html-5-reset-stylesheet/ […]
[…] a Better Designer, Right Now 10 Simple Ways to Make Life Easier for Your Website’s Users HTML 5 Reset Stylesheet How to Make Your Web Design Stand out from the […]
In response to Florent again, I think this debate on whether using a reset or not is kinda pointless however I do see your point.
I wish I could name out about 20 problems right off the top of my head, but I really can’t but having default margins and padding on every tag, consistent font sizing, table display properties (border-collapse), and other small things like text alignment on everything that I begin making.
Here’s the differences I see on resets,
If using a hard reset, you will never have to reset anything but style things accordingly. I don’t believe you should set list-style to none on default, but your reset will back you up on future pages and sites. For me, it’s simply the assurance of having a reset, otherwise I find myself spending lots of time wondering why something’s not the same in every browser. Font sizing is a big one, but I’ve taken a look at my own reset and I’ve noticed that you’re completely right on there being not a lot to reset or many styles, but this chunk of code in my core css file has everything built on it, for the stuff it does reset. With reset margins, I know that if I put margin-left: 5px; I will ONLY get 5 pixels of margin on the left. No defaults on the top or right or any of that. What’s the best way to do that? Simply zero out margins in a big reset with tags separated by commas. Any defaults I do agree with are how font-weight and font-style are set on heading, strong, and em tags and probably a couple more. Mostly anything visual, but not structural. I feel it’s pointless to set defaults for that, since the main purpose of them is to have some sort of visual cue that it’s important. Now let’s say not every page of your site uses the template you set up in your base.css file, not having a reset you cannot just load your core css or copying and pasting the reset you usually use. I really don’t know if you’re resetting things on #header or divs in general, but a big file like that doesn’t seem necessary just to remove some padding or borders.
My css file is located over here: http://cdn.myunv.com/css/uecore.css which has my reset and also has my template styles so it actually is a “base.css” file however I just like the name core more. If I only needed the reset though, I could simply append a ?reset=only to the url since my css is a php file in disguise but copying and pasting is a better option. I usually find having to use this on simple pages though without the template, where a hard-core reset sometimes isn’t necessary. Besides, I’m working on having a consistent template on every page anyways.
When just having a good “base.css,”
I am not sure if what you mean by a good base.css file. Are you having some sort of small reset then, because it will still not turn out the same. I don’t like default margins/paddings on anything, and have had so many bugs with that so I am sort of afraid of how inconsistent browser styles are. Now if are resetting just margins and padding and perhaps font size on body (and inputs, tables, pre type tags..) then you will still see yourself having a ton of tags reset which doesn’t exactly separate you from not using a reset or a so called “hard” reset. If you don’t use one, I couldn’t imagine how many “margin: 0; padding: 0;” you would have, and all those separate resets will add up to the file size (every bit counts, I even code in single lines).
Now the reason I’ve called this debate pointless is not to be mean but considering I have yet find any browsers problems that have come from eric meyer’s reset, have not yet had debugging issues where the resets get in the way in Firebug, and I have come from not using a reset at all or a bare reset to using a good one where now I feel like I code so much less now with more browser compatible pages (I’m not talking about IE6, however I was surprised to how some stuff actually did work for it). In your case you’ve come from using a reset to not using one, so having yet to see the advantages to not using one (or having not seen disadvantages of using one), I really don’t think I’ll be cutting out support for CSS resets.
I hope not to stir up anything here, I simply believe people should use resets because it works for me. I can exactly see why some may not prefer it or even use it at all.
I don’t see this debate as pointless. Although it could be seen as nitpicking.
I’m actually interested in why people would FEEL that a CSS Reset is necessary or vastly useful. I have used very basic reset styles (like * {margin:0; padding:0;}) as a beginner, because that technique was recommended on many ressources. But i quickly found that having to redefine everything was a pain, and stopped using reset techniques altogether.
I welcome decent reset stylesheets such as this one or Eric Meyer’s work. I mean, if people want to use a reset stylesheet then that stylesheet should at least avoid major problems (keyboard accessibility, OS styles on form elements, etc.).
“I don’t like default margins/paddings on anything, and have had so many bugs with that so I am sort of afraid of how inconsistent browser styles are.”
Were the bugs you had really about default margins and padding? I’m not sure about that. See, i’ve made my point about reset stylesheets and base stylesheets, you made your point about why you think like using a reset stylesheet, but now the one thing i’m interested in is: why do you (and others) FEEL that default margins and padding wreak havoc? I have a hunch about that, so allow me to repeat my questions:
Do you understand the concept of collapsing margins well? Are you able to tell, when coding, if it will apply or not?
Those are two simple questions; you should be able to answer “yes” or “no” to each question. If you don’t mind, i would like to know if you (or any person who relies on some kind of reset stylesheet) master that CSS concept or not.
Nice post
Default margins and padding don’t wreak havoc, they are simply annoying to zero out especially for divs. One major use I had in having a reset for margins/padding is the whole point of “cascading” style sheets. If you set margin-top: 50px; then everything else will be zero which is what I want. In most cases I don’t see a use of default margins, on a blog it might make sense but I usually set padding on paragraphs with text-indent, and just a margin-left on headings.
For your next question, I usually do see problems like these but they are not a problem. I solve them with padding, perhaps a wrapper, or relative positioning with top and left. Depending on the situation, there is always a way to position or add spacing properly. The box model is the first thing I learned about CSS, so over time I have become experienced in being able to position anything to my liking. With a reset, I would find myself with all these default values I simply don’t need. This is mostly just margin and padding, so not having a reset for them does not make sense.
You have opened a pretty interesting topic for me to think about though, are css resets needed or are they there just to make you feel good about your css? Well I think they are needed to an extent, I use Eric Meyer’s reset and Yahoo’s font reset. Did I ever have problems with this? No, and if I did I learned more about CSS this way.
Here’s an interesting story though. I had to remove my reset because it was causing problems on a community site that I have on Flux, but I have it wrapped in my template. It had nothing to do with display options, but it cause a weird lag. Maybe some JavaScript file kept defining stuff or something. Anyways I removed my reset, and what do you know? Only the header had a few problems. I setup php so if it had ?id=community appended to it, it’d comment out the reset but for every other page it’d still show.
So from that I learned that my template won’t break if I don’t have a reset, and in fact it’s probably from my XHTML that led to the page not breaking still. However, I feel better with it, have to code less margin 0s, had no problems with it so far and lots of people recommend it.
As long as we’re nitpicking, I found it interesting Florent said he could only come up with 5 differences, as he listed 14 differences in the way elements were styled by various browsers (differences between h1-h6 renderings count as 6 differences, because they’re six different elements, after all).
As for resets, I use them after a fashion. I began by using Meyer’s reset as it was written, so I’ll start from there. Why did I use it? Certainly not because of lack of understanding. I’ll be honest, I used it out of laziness. Using it, I had a known, established base to start styling from. Oh, I could have coded on without it, pulling the default numbers each browser used from my memory, covering all the exceptions myself as I wrote (and going back to diagnose and fix the occasional times I missed — hey, nobody’s perfect) but just plugging in the reset saved me both effort and time, and time is money. And as for the “polluted” firebug displays, after working the reset into my normal workflow I had less occasion to need firebug in the first place, so I broke even on that.
But I said “began by.” I don’t use it straight-up any more. Instead, I go into it and change the neutral values to whatever I want the defaults for the project to be. For example, I might want the default margin-left on a ul to be 1.5em, and the default for a ul inside a nav block to be 0. So those entries will get made in the default stylesheet I use for the project. I have a set of “house defaults” now that form the base for projects, with slight changes from that as required.
I still find the principle of a reset valuable, because it saves effort and time and forestalls many of those “dumb mistakes” (which, like spelling errors, happen and require time to go back, locate, and fix). I just don’t see a need to reset to a neutral value before setting to a “real” one.
[…] HTML 5 Reset Stylesheet […]
[…] 更多内容猛点这里:http://html5doctor.com/html-5-reset-stylesheet/ […]
Thank you for posting up a HTML5 Reset. I personally advocate web developers using resets, it’s beneficial.
[…] HTML 5 Reset Stylesheet | HTML5 Doctor Posted: Wednesday, August 12th, 2009 @ 8:16 am Tags:books, bugs, css, delicious, design, development, documentation, git, howto, html5, javascript, jquery, opensource, optimization, plugin, plugins, reference, tutorial, ui, versioncontrol […]
[…] HTML 5 Reset Stylesheet […]
Hello, you may add strike together with del.
It is less used, but I’ve seen a guy trying to use it once.
Hi Hikari
The reason that strike hasn’t been included is because it has been deprecated in the HTML 5 spec. See http://www.w3.org/TR/html5-diff/
Cheers
[…] HTML 5 Reset Stylesheet […]
Hey All.
Just a quick note about the reset ….
Adding padding: 0; to an ordered list tag causes the numbers to not be written. Sorry if this has already been mentioned here. Comments have gotten out of control on this post. Maybe because this blog ROCKS.
Anyway, what does reset mean for an ordered list tag? Would we want to kill numbering?
What ya think?
Steven Tate
Hi Steven
Good point about the numbering being lost with the padding, I think I’ll make that change.
Re killing numbering, you’ll see I’ve only taken the list-type off of those ul’s within a nav element (unlike Eric’s original) so numbering shouldn’t be affected only the padding.
Cheers
strike was deprecated too? well, I always used del anyway
An off-topic question: what will we do with the deprecation of u (underline) element? I’ve read ppl saying that only links should be underlined, but I don’t agree because we always had the trio bold-italic-underline in text editors. It seems we’ll have to use span with text-decoration attribute, but it is much bigger than ‘u’.
I also forgot to ask about abbr. Should we use it on EVERY abbreviation on our site, for accessibility sake?
If it is true that padding:0 hides ol numbers, it would be better to give it a default style that includes numbers. CSS Reset must not mean that everything will be removed and then restyled (I’ve even read that strong must have bold removed!). It is just a way to ensure browser defaults are overwritten so that differences in browsers defaults don’t make ours sites look different on each of them. It shouldn’t mean that we must remove elements default look & feel.
W3C should suggest a default style to finish these problems :p
[…] Der HTML5Doctor ist zusammen mit seinen Lesern dabei, ein CSS-Reset speziell für HTML-5 zu erstellen HTML 5 Reset Stylesheet […]
[…] HTML 5 reset par html5doctor.com […]
[…] — so much so that it’s really not worth detailing here. Starting out with the reset stylesheet and Bruce Lawson’s article on designing a blog in HTML 5, almost everything worked out of the […]
[…] files for CSS reset is the Eric Meyers CSS reset. For HTML 5 I suggest you to take a look at the Richard Clark CSS reset based on the Mayers file. These files reset all existing HTML tags and therefor contain a lot of […]
[…] files for CSS reset is the Eric Meyers CSS reset. For HTML 5 I suggest you to take a look at the Richard Clark CSS reset based on the Mayers file. These files reset all existing HTML tags and therefor contain a lot of […]
[…] HTML 5 Reset Stylesheet – HTML 5 is new standart, then now I’ve found HTML 5 Reset Stylesheet which based on Meyer CSS Tool: CSS Reset […]
[…] for CSS reset is the Eric Meyers CSS reset. For HTML 5 I suggest you to take a look at the Richard Clark CSS reset based on the Mayers file. These files reset all existing HTML tags and therefor contain […]
[…] files for CSS reset is the Eric Meyers CSS reset. For HTML 5 I suggest you to take a look at the Richard Clark CSS reset based on the Mayers file. These files reset all existing HTML tags and therefor contain a lot of […]
> CSS Unreset (aka base stylesheet)
> So this is not a reset stylesheet proper, but more like a base stylesheet
The semantics you’re using are completely meaningless. Base or reset, call it what you will, the point of it is to smooth out the differences in various user agent (browser) stylesheets. You could call it “smooth stylesheet” or “neutral stylesheet” it doesn’t matter. However, for some years now, the Web development community has been calling these “reset stylesheets” because that’s what Eric Meyer called them in his widely-read book on CSS.
If you make a site that is completely devoid of any CSS, it will still have a stylesheet applied to it by the browser. That stylesheet comes first in the cascade. If you make only one more stylesheet, the page will look different in each browser because in Firefox you are seeing the Firefox stylesheet plus your stylesheet, and in WebKit you’re seeing the WebKit stylesheet and then your stylesheet. If you put a reset stylesheet in-between the user agent stylesheet and the site stylesheet, then the reset gives you a common base to work from that is independent of various browsers.
Ideally, there would be no need for an HTML5 reset stylesheet because the spec covers browsers also, and defines how each browser should apply a user agent stylesheet in a standard way, however not all browsers are up to the spec yet.
In practice, a reset stylesheet makes it easier to treat an HTML page like you are working in a layout program instead of a word processor. You ask for 5em of space and you get it, not 4em instead because some element already has a 1em margin.
It feels intellectually satisfying to know all the default margins and which browser messes up what, but there are so many ugly, ugly pages on the Web, the priority should be the creative satisfaction of making solid, readable layouts. There is still a movement in Web design to use tables for layout because CSS can be so easily overcomplicated. Anything that makes it easier to go from zero to a great-looking page in all browsers should get strong consideration.
I disagree. Yes, there is a common goal, but i have presented two different takes on that “smooth out the differences” goal. One is the classic Reset stylesheet, which zeroes out everything it can. Another one is trying to stay close to the browser’s default styles, while rounding a few angles (figuratively). You can mix the two (my own “base stylesheet” is roughly 80% base and 20% reset), so the differences are not absolute. Still, i think that the distinction is far from meaningless, though it may be of more importance to specialists (front-end developers) than to occasional CSS coders.
[…] para eliminar diferencias entre navegadores desde el principio. Pues ahora os traemos de la mano de html5doctor.com un nuevo reset CSS adaptado a HTML5. Incluye las nuevas etiquetas y elimina las que ya no […]
[…] HTML5 Reset Stylesheet […]
The point of these reset stylesheets is to generally get everyone on the same track and to encourage progressive design while still supporting aged, or poor browsers.
You might even consider adding
body { font-size: 75%; }
to make the base text size 12px (which I personally feel is a little small) or alternatively
body { font-size: 62.5%; }
for 10px
Either or.
[…] it.With the advent of HTML5, including the new HTML elements in your CSS reset is also a good idea. html5doctor provides a good update to Eric Meyer’s reset that you can use for free in your projects.You can […]
[…] the advent of HTML5, including the new HTML elements in your CSS reset is also a good idea. html5doctor provides a good update to Eric Meyer’s reset that you can use for free in your […]
[…] the advent of HTML5, including the new HTML elements in your CSS reset is also a good idea. html5doctor provides a good update to Eric Meyer’s reset that you can use for free in your […]
[…] the advent of HTML5, including the new HTML elements in your CSS reset is also a good idea. html5doctor provides a good update to Eric Meyer’s reset that you can use for free in your […]
I’ve finally started developing a WordPress theme from scratch from my sites and I used your HTML5 Reset for it. I’ve done some changes and I’d like to share them with you.
1) I removed ul, ol and li from that first blob of resets. Leaving them there had broken nested lists, they were being shown all with the same margin, as if they were 1 unique list, and with no list-style-type. It would take too work to restyle nested margins with different list-style-type for each nesting, so instead of turning everything to 0 I copied FireFox’s default style, which seems to be very complete.
Interesting that together with ul and ol, FireFox also styles dir and menu with them, and sets it all perfect.
2) I know about deprecated HTML4 elements, but still people may use them. I know that FCKEdit uses strike instead of del, and also people may still have
<u>
around.Talking about
<u>
, I’ve found a nice replacement for it. A simple.ul
class settingtext-decoration:underline
is the obvious replacement. But instead of using it with a span, I’ve defaulted it forem
, so that when they are together italic is replaced for normal and underline is set.That’s nice because underline is meant for emphasing a text, so nothing better for Semantic purposes if
em
is used, together with a class, for underlining too.3) I’ve also removed
<q>
resetting, setting default content and quotes for it. I know HTML spec says each language should have their specific quote… maybe somebody could share a full list of laguage quotes so that we can add to our reset :PIn general, I don’t like the idea of CSS Reset cleaning everything. CSS Reset should be meant for resetting browser inconsistent defaults, setting our default over them… and not for resetting styles themselves.
Ah! 1 more thing.
Bringing strike and u back still validated it over CSS 2.1, so I don’t think those elements should be excluded just because the reset is meant for HTML5.
Let HTML5 validators ding users that still use those elements! Let’s not mix markup matters with styling matters… If we ommit them, what will happen in practice is that they will be styled by browsers defaults, which is what we wanna avoid with CSS Resets to begin with.
If we wanna use styling to blame invalid HTML5 elements, it would be better to set some odd styling to them, like a background-color that would highlight where they are :P
[…] 以下是html5doctor.com给出的HTML5 Reset Stylesheet […]
[…] HTML5 reset StyleSheet […]
Any chance you could post a modification of the new YUI3 reset.css (http://real.us.yimg.com/lib/yui/3.0.0/build/cssreset/reset-min.css) with HTML5 support?
I did my best, but that just adding:
In my experience adding a zoom:1 to the new elements style made IE6 especially play much much nicer.
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block; zoom:1;
}
[…] HTMLの次期バージョンHTML5の策定作業が進行していますが、既にHTML5のタグやCSS3を先行実装するブラウザも現れてきました。これらが実際の制作現場で使われるようになると、また制作の手法も変わってくるでしょう。リセットCSSもHTML5用のものが提案されていたりします。今後どうなっていくのか注目です。 […]
@Tyler, why would that need adding specifically? Elements are treated as inline by default anyway and some of those in your list should be treated as block so it would be bloating the code unnecessarily.
@Paul, cheers for that Paul. I don’t think I’ve come across many problems with IE6 except the usual bugs such as giving elements hasLayout as you’ve pointed out. I would probably add
zoom:1
to my default IE6 stylesheet.[…] *HTML 5 Reset Stylesheet […]
[…] HTML5 Reset Stylesheet We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects. […]
[…] 对于其的讨论实在激烈,英文好的可以看这里:html5doctor,我认为,其目前只适用于尝鲜使用,毕竟,我们还在IE6呢. […]
[…] modification of Meyer’s Reset for HTML […]
[…] HTML5 Reset Stylesheet HTML5 Doctor […]
RE: Florent V.
I love the reset no reset debate.
Maybe you should realize that there is more than one way to build a website.
Respect everyone’s opinion because the writer of this post respected yours!
HTML5 Reset Stylesheet | HTML5 Doctor…
We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 pro…
[…] 这篇针对HTML 5 Reset Stylesheet的文章也可以参考下:http://html5doctor.com/html-5-reset-stylesheet/。文章在Eric的CSS […]
“I started by removing elements that have been deprecated from the HTML 5 specification, like , and .”
I’m assuming the inclusion of <span> here is an error.
Sorry, forgot to markup the quote in my last comment.
[…] HTML 5 Reset Stylesheet […]
[…] modification of Meyer’s Reset for HTML […]
A lot of bashing on the comments but, personally, I think it’s a great and much needed. Good work!
Sure, I’ve tweaked a few bits and yes it needs to be used only when appropriate but generally I think it’s brilliant and I’ve suggested it to my developers. Cheers Rich!
[…] 重置样式源代码来源:HTML5 Reset Stylesheet文章。 […]
[…] 重置样式源代码来源: HTML5 Reset Stylesheet文章。MySky […]
[…] http://html5doctor.com/html-5-reset-stylesheet/ Related Websites […]
[…] Meyer's reset.css modified to set some basics for the new html5 elements see the original article [HTML5 Reset Stylesheet] this file is on s12.in http://s12.in/html5/reset.css use a simple link tag to include it but make […]
Hi Richard, I’m getting a permanent 20px padding at the top of the body section which I can only get rid of if I apply a relative position to the body and a top position of -20px. Do you get this and do you know what it is so I can get rid of it?
Code is basically:
<body>
<header>
<nav>
ul etc
</nav>
</header>
<footer>
</footer>
</body>
Cheers
Andy
@squidge have you got a demo page I can look at somewhere? You shouldn’t be getting padding on the body with this stylesheet.
[…] HTML 5 Reset Stylesheet […]
[…] HTML 5 Reset Stylesheet […]
[…] altri fogli di stile di reset meno famosi di quelli appena visti. Tra questi spicca sicuramente HTML5 Reset Stylesheet che, basato sul reset di Meyer, consente di azzerare lo stile anche ai nuovi elementi introdotti […]
Some browsers render headlines in bold type by default. You may want to consider adding something along these lines to your reset:
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-style: normal;
}
Keep it up guys :)
Hey Richard. Fantastic CSS Reset! I use it for every project.
One thing I keep fighting is the browser’s default font-size when one is not defined. So I think a cross-browser base font definition is in order.
I’ve found that using this snippet works for me.
body { font-size: 12px, line-height: 12px; }
I can then use
font-size: 1em;
on any other text based element and have it render the same across all modern browsers.I’ve tested this in Windows Vista and Mac OSX against Firefox 3.6.7, Safari 4, Chrome 5, and IE 8 and it appears to be a very solid addition.
Kudos for a great resource.
Peace,
Brandtley
@sverri & @brandyley – with regards to default font size & weight, this reset isn’t intended to completely level the playing surface. Rather, it should be used as a starting point to allow you to work with HTML5 elements. I’d encourage you to go ahead and edit it specifically for your own use, this is something I do but it tends to be a base stylesheet as opposed to a reset.
[…] There’s a lot of discussion going on over here: http://html5doctor.com/html-5-reset-stylesheet/ […]
hello, this page fails on IeTester
http://www.my-debugbar.com/wiki/IETester/HomePage
is that a problem with your code, or a problem with ietester?
thanks
Why only reset ul inside of nav?
@johny – Which version of IE? I’ve never opened in the site in IE6 so if it’s that, that’d be why.
@autodidakto – Because for other ul’s I prefer bullets to show. However, feel free to take the code and use it as a starting point for your own reset stylesheet.
[…] it to the HTML5 kit. Published on Aug 11, 2010 Filed under: HTML5 | No Comments HTML5 Demos Comments are […]
[…] my latest project we're using this HTML5 Reset, which is based on Meyer's sheet and adds several HTML5 […]
[…] HTML5 Reset Stylesheet(http://html5doctor.com/html-5-reset-stylesheet/) […]
anchor style is doubled
@ntgd – thanks not sure where that crept in!
I tried to validate the Reset Stylesheet, using the http://jigsaw.w3.org/css-validator/#validate_by_input
But ended up with 2 errors, is that a mistake, or can it right?
@Michael, inherit on border-width is fine, so not to worry. http://www.w3.org/TR/CSS2/box.html#border-properties.
I did a few quick tests regarding the abbr without a title and abbr with a title. I think you will want to remove the inherit value as you can’t mix that into shorthand. I don’t think it is really necessary anyway.
And if anyone is wondering why it worked in my comment, it’s because it’s defined later on in his stylesheet as border-bottom: 1p solid #00000.
[…] Bygget finns att beskåda på madr.se/overview. Det är en del css-gradients och en orgie i text-shadow, men koden blev ändå lagom lång och hanterbar. Ta en titt i cssfilen overview.css för att se vad som händer (filen core.css gör i det stora bara en html5 css reset). […]
@Ryan, although inherit doesn’t validate, it does work ok cross browser so I don’t see it as an issue.
This isn’t merely an issue of validation. It actually does not work in any browser because inherit becomes ambiguous when used in shorthand declarations… It does work for you on this site because you define a hex value later on in your stylesheet which overrides the inherit value. Open up firebug on this abbr and remove the border-bottom property on line 735 of your stylesheet and you will see what I mean.
“because there’s simply no way of identifying the subproperty to which the value inherit refers—after all, it’s not unique within the sequence.”
http://reference.sitepoint.com/css/inheritvalue
@Ryan, you’re right, sorry for the confusion. I’ve updated the style sheet to reflect this and removed the inherit value.
[…] in all browsers. IE < 9 requires a shim. Use HTML5 CSS reset to set default […]
[…] on Eric Meyer’s Reset CSS, the HTML5 Reset Stylesheet by HTML5Doctor.com aims to provide a basis for any websites making use of the new HTML 5 attributes, while improving […]
[…] Adapted from Eric Meyer’s css reset, this can be a good start for people looking to use css reset for html 5. Though there is one thing I like cast my opinion on regarding this paragraph by Richard Clark. […]
[…] used a HTML5 reset style sheet because unfortunately, most browser don’t have an internal style sheet that sets the expected […]
[…] We’ll also add a HTML 5 compatible reset stylesheet. This “resets” various styles to sane, known values for most of the tags supported by HTML 5. Jake has provided the one from HTML5 doctor. […]
[…] HTML 5 Reset Stylesheet […]
[…] html4 Eric's Archived Thoughts: Resetting Again html5: HTML5 Reset Stylesheet | HTML5 Doctor […]
There is one modification I’ve used from this reset and I’ve been using it for a while.
In the last selector:
input, select {
vertical-align:middle;
margin:0;
}
The reason is Webkit adds margin to
input
s that isn’t on other browsers. This can cause infield labels to be slightly off in Webkit compared to other browsers. Zeroing the margin fixes this and allows infields to look consistent on all browsers.@Nicholas, thanks for the feedback, we’ll look at incorporating this in future versions.
[…] HTML5 Reset Stylesheet | HTML5 Doctor […]
How about adding
margin:0, padding:0
for button elements? Is there a reason you left it out, or did you forget it?
Rich Clark, there are no elements that have been “deprecated” in the HTML5 spec. The ones you cite have been outright removed. There’s no need for deprecation because they have separate specs for user agents and authors. User agents are required to support them for legacy purposes but it’s not valid HTML5.
[…] Le reset CSS est une technique qui consiste à réinitialiser les valeurs de l’ensemble des élements HTML afin d’éviter une partie des différences d’affichage sur les différents navigateurs. Ici, le Reset CSS est une version modifiée du Reset CSS d’Eric Meyer. […]
[…] HTML5 Reset Stylesheet […]
Reset style sheet?
Extremely overkill!
http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
You forgot the [s] element, which I would argue takes the place of the [del] element. I’d argue that the element is a way to leave the content in the file without displaying it, deserving display: none; and being strike through. But, honestly, people will probably not use these in this fashion, and therefore, both probably deserve a strike-through.
[…] HTML5 Doctor’s HTML5 Reset Stylesheet […]
strike element was removed from HTML5, and del element always meant a line cutting it.
del doesn’t mean a content being deleted and hidden, it means a content that was there before and now is updated and therefore deleted, but author wanna keep the old content there so it’s marked as outdated content that must be seen but not considered by the reader.
[…] includes a update of Eric Meyer’s famous CSS Reset that’s rewritten for HTML5 (get that here). Lots of useful stuff. […]
@Chris, you’ll notice that button, input, select etc aren’t touched (with the exception of vertical-align property for inputs). The main reason for this is I tend to leave the specifics of form elements to the browser. That way users get a common experience across sites.
@Jacob yes Hikari is correct strike is absent from HTML5.
@Craig you’re right the elements haven’t been deprecated, I didn’t explain that very clearly. They are simply absent elements. It’s better described in this post
[…] HTML5 Reset Stylesheet: il resetting di HTML5 secondo i Doctor […]
[…] a Strict HTML4 doctype anyway) but with juicy extras and an HTML5 doctype. There’s already an HTML5 reset stylesheet to cobble together appropriate display behaviour for new elements if I decide to get adventurous […]
[…] http://html5reset.org/ http://html5doctor.com/html-5-reset-stylesheet/ […]
[…] 对于其的讨论实在激烈,英文好的可以看这里:html5doctor,我认为,其目前只适用于尝鲜使用,毕竟,我们还在IE6呢. […]
[…] one proposed by Richard Clark of HTML5 Doctor, which I found sufficient for the job. Here is the HTML5 Reset Stylesheet for you to […]
I have a noob question for you Richard. I apologize if the answer is obvious :)
You have the font reset to 100% in the body yet further down the CSS you have set the font again in the body to 14px. Why are you setting the font twice for the body?
[…] CSS Reset by Eric Mayer(http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)HTML5で作り上げていく今回のWordPressテーマにもやはり必要なのがEric MayerのCSS Reset。これにHTML5用のリセットCSSを追加したHTML5 Doctor謹製のreset.cssに少し手を加えたものを利用する。 […]
[…] HTML5 Reset Stylesheet […]
[…] HTML5 Reset Stylesheet […]
[…] following scripts, services, and people who have made the idea possible:HTML5 Shiv, by Remy SharpHTML5 CSS Reset, by Richard ClarkLightbox Evolution, by aeroalquimiamooLazyLoader, by Stephan EpericatjQuery […]
[…] Reset Stylesheetについて Eric MeyerのReset CSSをベースにしたHTML5向けのReset CSSが気になります。プレゼンターがHTML5docotorのHTML5 Reset Stylesheetをおすすめしています。ブラウザのデフォルトスタイルを「リセット」するReset Stylesheetの使用については、賛否両論あるようですが個人的には使用推進派です。ブラウザ間の表示差を最小限におさえ作業の効率化を図るためのメリットは大きいと思います。これに関しては、論文のような記事 (英語)もあったので一読して今後自分の意見をまとめてみたいと思っています。 […]
[…] HTML5 Reset Stylesheet […]
nav ul
should be
nav,ul
@Stephen,
No, it’s correct. What I’m doing there is only removing the default styling for unordered lists within a nav element. It’s a personal preference of mine and that way if you have an unordered list in an article or section it will render with default bullet points.
[…] http://html5doctor.com/html-5-reset-stylesheet/ This entry was posted in HTML, HTML5. Bookmark the permalink. ← Copywriting for Ecommerce […]
[…] ha mencionado que se apoyó en el HTML5 Doctor Reset para su adaptación, aunque si revisamos bien ambas versiones, hay diferencias […]
[…] of you may be thinking: “Hey, it’s the HTML5 Doctor reset!” Actually, no, though I did use their work as a check on my own. I felt like that one went a […]
[…] of work has been done in this area but Rich Clark‘s HTML5 Doctor reset stylesheet appeared to be the industry […]
Personally I like to add the following:
a img{border:none;}
This line is helpful because when you use an image link, like a company’s logo that links back to the home page of a website, borders are generated and I think they’re rather hideous.
I also removed some points like body line-height, mark and the dfn/abbr statements since I think these should be part of a website-specific stylesheet.
[…] explicit a:focus styles, as the HTML5 Doctor reset does. This overcomes the problem of focus-stripping, but imposes a specific focus appearance. That […]
[…] explicit a:focus styles, as the HTML5 Doctor reset does. This overcomes the problem of focus-stripping, but imposes a specific focus appearance. That […]
[…] you’ve been using the also very popular HTML5 Doctor reset stylesheet, you’ll probably notice some similarities in Meyer’s new effort. Both make excellent […]
[…] Nice HTML5 Reset CSS stylesheet http://html5doctor.com/html-5-reset-stylesheet/ […]
[…] Reset CSS is the base of today’s CSS Reset rules. Meyer and HTML5Doctor made it simple. But there are chances to make it more optimize and […]
[…] you’ve been using the also very popular HTML5 Doctor reset stylesheet, you’ll probably notice some similarities in Meyer’s new effort. Both make excellent […]
[…] risolvere il problema io ho utilizzato il CSS Reset di HTML5 Doctor, derivato dal CSS Reset di Eric Meyer. Includetelo nel vostro foglio di stile e non avrete […]
[…] reset.css ကို လိုချင်တယ်ဆိုရင် HTML5 Reset […]
How would you markup threaded comments?
Would you use the classic nested lists, and inside each list element put article element, or would you nest multiple article elements?
[…] el momento, la mejor alternativa era la CSS Reset de HTML5Doctor, una hoja creada precisamente a partir de la de Eric Meyer donde se habían incluido las reglas […]
[…] er?Eigenlijk maar eentje en dat is de meest populaire, en naar mijn mening ook meest complete: de HTML5 Reset Stylesheet van HTML5 Doctor, geschreven door Richard Clark. Sinds 2009 is deze uitbreiding op de Eric Meyer […]
[…] For CSS, I’m just using the very basic HTML5 CSS reset from HTML5 Doctor. […]
HTML5 Reset CSS Dosyası…
HTMLDOCTOR , yeni gelen HTML5 dosyaları için uyumlu bir reset.css dosyası hazırlamış. Bu dosya hazırlanırken Eric Meyer’in reset.css dosyası baz alınmış…….
[…] maar eentje en dat is de meest populaire, en naar mijn mening ook meest complete: de HTML5 Reset Stylesheet van HTML5 Doctor, geschreven door Richard Clark. Sinds 2009 is deze uitbreiding op de Eric Meyer […]
This doesn’t seem to work for IE8.
I still have to declare my section, nav and other block elements that aren’t recognized in my own stylesheet, otherwise they aren’t styled.
I am using both this and the html5shiv.
[…] of you may be thinking: “Hey, it’s the HTML5 Doctor reset!” Actually, no, though I did use their work as a check on my own. I felt like that one went a […]
[…] explicit a:focus styles, as the HTML5 Doctor reset does. This overcomes the problem of focus-stripping, but imposes a specific focus appearance. That […]
[…] risolvere il problema io ho utilizzato il CSS Reset di HTML5 Doctor, derivato dal CSS Reset di Eric Meyer. Includetelo nel vostro foglio di stile e non avrete […]
[…] HTML5 Reset Stylesheet We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 projects. […]
One change I noticed from Eric Meyer’s reset CSS was the addition of background: transparent to the very first rule, which got me wondering: what’s the rationale behind that addition?
[…] Erweiterung von Eric Meyer’s Reset ist das HTML5 Doctor Reset. In der Beschreibung zur überarbeiteten HTML5 Reset-Variante erklärt Richard Clark genau, […]
[…] for the styling – I used the reset.css from html5doctor instead of Ian’s suggestion since it is more modern. I dropped the suggested […]
[…] problemas cuando le apliquemos los estilos oportunos. A continuación os dejo dos buenas opciones:html5doctorhtml5resetNuevo doctypeEl doctype encabeza todas nuestras páginas. Se encarga de indicarle al […]
[…] unstyled.Eric Meyer’s CSS Reset was one of the first and is the most well known and used. The HTML5 Reset Stylesheet from HTML5 doctor can also help style newer elements. There are several others — CSSReset.com […]
[…] Meyer Reset CSS Eric Meyer: Reset 2.0b2: Paring Down Reset Revisited HTML5 Reset Stylesheet HTML5 Reset Stylesheet Google Project .toucan-css-reset A Killer Collection of Global CSS Reset […]
[…] HTML5 Reset Stylesheet for CSS cross-browser […]
[…] HTML 5 Reset Stylesheet […]
[…] http://html5doctor.com/html-5-reset-stylesheet/ This entry was posted in Bookmarks and tagged css, html5. Bookmark the permalink. ← HTML5 Video Player – VideoJS […]
[…] utilizando: HTML5 para a semântica correta com microdata para os dados de endereço no rodapé; Reset CSS para facilitar o cross-browser; 960 Grid System para o CSS organizando o layout em colunas; Head […]
Made all the difference for my client’s site!
Webkit moved divs down about 4 points.
Fixed now!
Thanks
[…] CSS Rounded Corners Generator CSS Code Compressor Ultimate CSS Gradient Generator CSS Gradient Generator CSS Layout Generator 960 Grid HTML 5 Reset Stylesheet […]
[…] CSS3 Generator All In One CSS Rounded Corners Generator CSS Code Compressor Ultimate CSS Gradient Generator CSS Gradient Generator CSS Layout Generator 960 Grid HTML 5 Reset Stylesheet […]
[…] Temat använder sig av en CSS reset från html5doctor.com […]
Has anybody noticed that this html5 reset removes the styling of the html5 form validation in google chrome?
I solved it by removing the div-tag from the first declaration and then adding a seperate line for the div:
div { outline:0; font-size:100%; vertical-align:baseline; }
So, I removed the reset of margin, padding, border and background on the div tag.
I haven’t actually tested it, but I think that would be the point of a css reset: to normalize all CSS rules so that everything looks the same across browsers.
Doesn’t seem like something you’d necessarily want to have all the time (such as in the case you mentioned)… hmm
Thanks, very nice to have!
[…] (这个规则来自 Rich Clark 的 HTML5 Reset Stylesheet,你可以在这篇文章中找到很多有趣的东西。) […]
[…] Fertig eingebundene CSS Datei mit einem HTML5 CSS Reset von HTML5Doctor […]
Just thought I’d point out, there are whitespace errors in the CSS download. Make it all tabs or all spaces, not mixed. As it is now, I have to reformat it, removing trailing whitespace to satisfy Git and Gerrit (and myself).
Thanks for the modern reset CSS :)
[…] a html5doctor Descarga de las CSS en Google […]
Hi,
I wanted to ask what do you think about adding the following reset row:
a img {border: 0;}
It is something that I always find useful.
Thanks,
Michael
If there is
small
having more than 1 line of text for some purpose it starts to break base-line alignment in Firefox 5 adding +/-1px per line.I fix it by adding simple:
small { line-height:1 }
Another simple thing I include to my reset is styling nested list number (1.1.1):
ol {
counter-reset: item;
}
ol li {
display: block;
}
ol li:before {
counter-increment: item;
content: counters(item, ".") ". ";
}
Anyway – I enjoy your reset, a lot and use it in my projects.
[…] the advent of HTML5, including the new HTML elements in your CSS reset is also a good idea. html5doctor provides a good update to Eric Meyer’s reset that you can use for free in your projects. You can […]
this is great info I appreciate you explaining the reset. I definately will use it in my next project
mmm… think i found a browser bug!
when you have a div id=”container” centre aligned (margin:auto; in the css) and you want to push the container div down – by say 20px – to create a bit of space at the top of the page (an actual client request… ) th CSS: margin:auto; then change to margin:20px auto 0 auto;) the body background repeat-x will also jump down with the #container.
fix it by adding a 1px border to the top of the page. stupid i know but that’s browser for you… border-top:#fff 1px solid;margin-top:-1px;
another way to fix this is to remove the background-color:#FFFFFF; from the html rule in the reset(if you have it in there).
ps: this only happens if you have a background color on your html tag in the css which is part of some css reset file available out there.
personally i just removed it but you may need to give your html tag a bg colour.
cheers!
We did tests about each html5 element behavior, also got some information based on others internet public resets, and finally we created a CSS base document with one ideal reset to reach our needs.
If you are interested in knowing our work will be a pleasure to share our document!
CSS base document: http://www.webstandards.blog.br/css/documento-base-para-css/
/* reset */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dd, ol, ul, menu, form, fieldset, legend, figure, section, summary { margin: 0; padding: 0; }
article, aside, details, summary, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
button, fieldset, iframe, img { border: 0; }
First let me say what a great site.
Second, I am just starting out with web design and would like to ask is it better to concentrate on html5 from the outset?
Thanks,
Penny
Wow, some useful style sheet info.
Cheers.
Hi Richard,
Are all elements of the reset necessary? I mean, there are many tags that I almost never use so including all of them adds to the size of the page. What do you think of using just what I need?
@Battra – I agree, and (sorry, Richard!), have now switched to using the more minimal normalize.css (http://necolas.github.com/normalize.css/), which essentially harmonises browser differences rather than redefining everything. Anyone else have views on this?
[…] 重置样式源代码来源: HTML5 Reset Stylesheet文章。 […]
Thanks, just what i need! An Erick Meyer’s Html5 approach! ;)
Great post and some fantastic follow up comments. The site has been bookmarked
When I implement a reset stylesheet I always add an a img border reset to ensure the unsightly blue box does not appear.
[…] reset.cssだけでなくnormalize.cssを追加 […]
Great!! I am using it on my website projects!! Thanks a lot!
Is it better to @import a css reset or should it be included at the top and thus only have one file?
I am wondering about http requests and speed, and I was not sure how the @import will come into play when using a reset.
I have been using @import, but wonder if I should change it up.
Thanks
@Jordan: you might find the answer to your question in this article: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
@kevin: Thanks, I will read it.
Would you recommend to a learning website designer using a reset files or better to avoid them?
I cannot believe I wasn’t using resets for the first few years of my web design career. Would have saved me a whole lot of hair pulling debugging time…
[…] hang on there is something called HTML5 reset stylesheet that you can get from http://html5doctor.com/html-5-reset-stylesheet which is a modified version of Eric Meyer’s original reset, and is modified by Richard […]
Nice article it’s used full me thanks for sharing …
Really super article. thank you for this… I’ll come back when I am putting a site’s styling together.
@Battra I think best practice shows you only to use the reset on whichever elements you actually use in your CSS. For instance, using someone else’s reset is probably not the best way to go because not all sites are the same or have the same needs/styles.
[…] HTML5 Doctor Reset (public domain) by Richard Clark […]
[…] http://html5doctor.com/html-5-reset-stylesheet […]
[…] 第1行:css重置歸零,這邊我採用normalize.css,也可以採用HTML5 Reset。 第2~4行:依專案內容的css樣式檔,hack.css管理css hack,responsive.css 則是來處理行動裝置版的樣式。 第5行:Google Analytics的code,獨立在外面,方便修改。 第6~11:針對舊IE處理兼容性的處理,在前一篇文章處理CSS瀏覽器兼容性的js有介紹。 […]
[…] 这篇针对HTML 5 Reset Stylesheet的文章也可以参考下: http://html5doctor.com/html-5-reset-stylesheet/。文章在Eric的CSS […]
Hi there,
Newbie here. I am learning how to use HTML5. I noticed there is a CSS reset and I managed to stumble across this site.
Is this CSS reset for html5 updated for 2013? Is there any chances of a later version e.g. HTML6?
Many thanks in advance
CHEERS :)
Hi Mike,
Yes, you can use this reset for any version of HTML (not that 6 is with us just yet), but it is backwards compatible (to an extent as obsolete elements aren’t included).
Although now I tend to recommend using Normalize instead of a CSS Reset.
Rich
Hey Doctor,
Thanks for your response. So are you saying a CSS reset is obsolete now and replaced by Normalize CSS? I had a quick browse at the Normalize CSS file, and it has 2x different versions to download. How do I use it? Is it the same as using a separate CSS file(normailze.css) and put CSS coding development in another CSS file (structure.css)?
M
Mike,
It’s up to you to choose between the two but I would now recommend Normalize.
I’d just add normalize to the top of your main stylesheet and you’re good to go.
Rich
Interesting to see you now recommend Normalize.css, Rich. Do you have a blog post where you discuss the impetus behind your switch?
I’m returning to active web dev, and I’m curious if the great “to reset or not to reset” debate is finally over.
Thanks Richard,
I just took a look at normalize.
I am glad I ended up at this page because I will be definitely using normalize in my next project.
Great site.
Paul
Hey Jeffrey,
I don’t have a post written I’m afraid but thankfully Dr Oli has written something on the Pastry Box Project.
Rich
That was a great post. Thanks for the link, Rich!
[…] http://html5doctor.com/html-5-reset-stylesheet/ […]
Just to point out that Google for some reason stopped hosting the css reset file.
[…] HTML5 Reset Stylesheet […]
[…] Meyer’s reset stylesheet is a popular choice for many projects, and Richard Clark updated it to add HTML5 […]
I still rely on a simple reset file provided by Bill weinman in one of his HTML5 courses in lynda.com.
[…] HTML5 Doctor CSS Reset […]
[…] HTML5 Doctor CSS Reset http://html5doctor.com/html-5-reset-stylesheet […]
I hope you have an easy solution for an issue I have with Internet Explorer. Some websites are presented with invisible buttons. I can hover over them and the link is displayed at the bottom of the screen, but all that shows up on the page is a dotted box. This is very problematic when the box is supposed to indicate “submit” or “purchase” or “continue.” Ever see this before?
[…] 18 líneas – Invocación del reset oficial de HTML5 doctor (En realidad se ha utilizado un snippet de Sublime […]
Good day: (I use this term, and we promote, because new technologies, one never knows what time does the person with whom we speak or read).
Referring to “http://html5doctor.com/html-5-reset-stylesheet/” A subtle suggestion.
Add to “
" tags the following attribute:
" Using HTML's translate attribute " (From: "http://www.w3.org/International/questions/qa -translate-flag ". Since thereby translators ignore code,
In fact it would be interesting to exclude the cometary "/ * xxxxxx * /" and "", but not how it could be done.
* Is there a manual as the "Reset Stylesheet" used for computer rookies?
* Is there any way to implement a style locally for:
- Make translucent box better translation suggestions.
- Put it to 25px instead of 8px, not to tape what lies beneath the cursor.
- Said Rdeucir char size box.
* Certainly knew that "https://translate.google.es" if the text gets translated entr double quotes, the translator told omitted? - This is great -
No more for now, I am at your service.
"Manuel R. Castro I. 05 / feb / 2015"
anslated with "https://translate.google.es" the original in Spanish.
Buen día: (yo uso esta expresión, y la promuevo, porque con las nuevas tecnologias, uno nunca sabe que hora tiene la persona con quien hablamos o nos lee).
Con referencia a: "http://html5doctor.com/html-5-reset-stylesheet/" Una sutil sugerencia.
Añadir a las etiquetas "
" el siguiente atributo:
"Using HTML's translate attribute" (Tomado de: "http://www.w3.org/International/questions/qa-translate-flag". Ya que con ello los traductores ignoraran el código,
De hecho sería interesante poder excluir los cometarios "/* xxxxxx*/" y "", pero no se como podría hacerse.
* ¿Hay algún manual de como se usa el "Reset Stylesheet" para novatos de la informática?
* ¿Hay alguna forma de implementar un estilo de forma local para:
- Hacer translucido el cuadro de sugerencias de mejor traducción.
- Ponerlo a 25px en lugar de a 8px, para que no tape lo que se encuentra debajo del cursor.
- Rdeucir el tamaño de dicho cuadr de diálogo.
* ¿por cierto, sabían que en "https://translate.google.es", si en el texto a traducir se pone entr comillas dobles, dicho traductor las omite? - esto es genial -
Sin más por el momento, quedo a sus órdenes.
"Manuel R. Castro I. 05/feb/2015"
Traducido con "https://translate.google.es" del original en español.
[…] また、リセットせずにその都度設定する「Vanilla CSS Un-Reset」といった方法も存在する。「Eric Meyer Reset CSS」を元にカスタマイズしたものを作る予定だが、上手く行くことを願っている。その後、色んなリセットCSSを試した上で、「HTML5 Reset Stylesheet」に落ち着いた。 […]
i think resets aren’t a bad idea in some scenarios, but honestly i have found that you should technically be setting all these properties on every single element in page design regardless.
so in 99% of situations – its useless to bother with resets.
the proper way is to set your own defaults all the way through.
the one that i could see might be helpful is for the HTML5 elements that need display:block
Join the discussion.