Resetting Again
- Tue 15 Jan 2008
- 1053
- CSS
- 179 responses
I’ve been pondering reset styles over the past few months, and come to a bit of a shift in my thinking. Here’s the result of that thinking.
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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
%;
vertical-align: baseline;
background: transparent;
}
body {
line-;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
The small changes involve a paring down of the possible quotation around blockquotes and qs. Before, I was explicitly pushing in empty generated content boxes with content: "", but there was no need. A simple quotes: none; takes care of suppressing any automatic quotation marks on those elements.
The much bigger change, the shift in thinking, is the removal of the inherit values in the first rule—the ones that wiped out any boldfacing, italicizing, or font variants in browsers other than Explorer. (You can see them in the “reloaded” post.) I know, I know, I already defended that practice:
[The
inherit] effects, as seen in my development environment, will still serve the purpose of reminding me to build up the styles I actually want, and not use the browsers’ defaults as a crutch. There is the possibility of my forgetting that (for example) IE/Win italicizes em when I don’t want it to, but that’s something I’ll catch during the browser testing phase.
But over time, I’ve come to realize that this is more than just a throwaway development tool. It really is the beginning of a baseline style sheet. (Or can be.) Things like boldfacing and italics are some of the most obvious textual effects readers will see, and to have reset styles that treat them inconsistently across browsers doesn’t make sense.
Of course, browsers might treat elements differently when it comes to boldness and decoration and such. But unfortunately, without inherit as a viable solution (due to the lack of support in Explorer), we’re stuck accepting browser defaults. This is one area where defaults are pretty well consistent across the board, so it’s a small risk to be taking. And this certainly doesn’t preclude anyone from adding to these styles to create their own reset that explicitly handles elements like em and strong.
Which leads me to why I explicitly set ins and del. In some browsers, inserted text is underlined. This leads to confusion, because most people expect underlined text to be a link. I decided to explicitly switch that off and leave a note about it, much as I did with :focus styles.
And why am I not zeroing out deprecated elements, like center? Because they shouldn’t even be in the markup. The way to handle deprecated elements is with something like Marco Battilana’s Big Red Angry Text, not silently neutering them.
Comments and suggestions are, as ever, welcomed. I’m going to shift the end result to its own URL, as I promised I would long ago, so that there will be a permanent home outside of the various postings. Hopefully that will happen before the week is out.
Share this article:
- Share
179 Responses»
Received from Reset Your Style at Alex Jones
[...] Meyer has updated his reset style sheet, outlining the reasons for his change in the post Resetting Again. The modifications, while small, are logical and affirm how important the Reset sheet has become to [...]
Wolf wrote in to say...
I’ve been using your previous “Reset reloaded” for tons of projects, I must say these changes makes a lot of sense – hereby I welcome my new reset. Thanks!
Jon Humphrey wrote in to say...
Thanks again for all the work with these Eric, they certainly help make things a lot easier to start with! I will update our current development template version to this now and add your explainations in comments.
Cheers from across the pond!
Jon
Ricardo Aroca wrote in to say...
Thanks for sharing your work. I’ve been using your previous “reset style” and it increased my productivity.
Tim wrote in to say...
This is probably a basic question, but why did Marco Battilana put the align attribute for and in the BRAT? I didn”t realize that should be avoided. If so what is the better alternative?
Thanks!
Tim wrote in to say...
whoops!! I was trying to reference <div> align attribute and <p> align attribute. Guess I’ll use the preview next time! ;-)
Quentin wrote in to say...
So you kept the
line-;statement?That’s probably the only line I will comment out on my projects!
Not a big deal!
Bramus! wrote in to say...
Ingenious! Makes sense indeed, as Wolf says :)
Eric Meyer wrote in to say...
I did keep it, Quentin, because line-height is one of the things that is almost guaranteed to be different between browsers. I set it to
1because it has an obvious result, and reminds me to change it to whatever the project needs. If you have a preferred default (say,1.33), then by all means make that adjustment. This is, as I said in past posts, a starting point, not an ending point.Received from Bram.us » Eric Meyer’s CSS Reset resetted.
[...] reset styles over the past few months, and came to a bit of a shift in his thinking.” The result can be found over at his blog. Just ingenious I must say! *updating reset.css* Spread the [...]
Neal G wrote in to say...
It might also be useful to add a line re-stating any elements “that usually” have padding/margin top and bottom such as:
h1, h2, h3, h4, h5, h6, p, ul etc.
Rather than setting them to 0. I realize you are just trying to give us the bare minimum here and not a complete style sheet.
You may want to consider showing us another stylesheet that you use to rebuild all of these resets that you use for many projects.
I find myself starting with the same stylesheet each time using both custom styles and reset styles.
ERIC wrote in to say...
why did Marco Battilana put the align attribute for and in the brat? I didn”t realize the issue. what is the better alternative?
Chris Rockett wrote in to say...
I found a some unexpected side effects using IE6 with this new version.
By moving the “background: transparent;” out of the table selector and into the main selector with the other tags, the following selectors would not put the correct colors in the table cell backgrounds. I believe it has to do with the td now having “background: transparent;” when it didn’t before. I fixed it by moving “background: transparent;” back to the table selector with border-collapse and border-spacing.
#content table tr.rowA {
background-color: #efefef;
color: inherit;
}
#content table tr.rowB {
background-color: #fafafa;
color: inherit;
}
<div id="content">
<table>
<tr>
<th valign="top" nowrap>Date</th>
<th valign="top">Title</th>
<th valign="top">Description</th>
</tr>
<tr class="rowA">
<td valign="top" nowrap><a class="/flex3launch.html">Date</a></td>
<td valign="top"><a class="/flex3launch.html">Title</a></td>
<td valign="top"><a class="/flex3launch.html">Description.</a></td>
</tr>
<tr class="rowB">
<td valign="top" nowrap><a class="/flex3launch.html">Date</a></td>
<td valign="top"><a class="/flex3launch.html">Item</a></td>
<td valign="top"><a class="/flex3launch.html">Description.</a></td>
</tr>
</table>
</div>
Dennis wrote in to say...
Great new reset sheet!
One question though: How to make the “other” stylesheet more important. currently I have a stylesheet screen.css and the reset sheet via @import in there.
the body background image defined in the screen.css gets ignored by Firefox though and the background is set to transparent (as defined in the reset.css).
Alan Bristow wrote in to say...
Not tried this new one yet – but thanks again Eric, I include a version of the last one now on all projects. And yes, it does indeed deserve it’s own home – an admirable work.
John V wrote in to say...
Good stuff! I’m a big fan of the reset stylesheet – thanks for the update and the awesome brainwork behind it!
Received from INCG - Reset CSS | INCG
[...] jullie ook gebruik van Eric Meyer’s reset stylesheet? Ik gebruik het in ieder geval wel bij al mijn projecten. Voor de mensen die het niet kennen, de [...]
Received from Deliggit.com | The social sites' most interesting urls
meyerweb.com | Deliggit.com…
meyerweb.com…
Quentin wrote in to say...
Well, thanks for the feedback on
line-heightsetting! Of course I’d adjust it…Good starting point anyways!
Brian LePore wrote in to say...
For those wondering why [align] is used in BRAT, may I introduce you to the CSS
text-alignproperty. :)Speaking of
text-align, why isn’t a text-align: left mentioned in the near-global selector? I’ve found it quite often I’ve had to turn it off for table headers. Especially when using them as row headers. The old reset style sheet had something forcaption,td,th. Why isn’t it in the current version?Eric Meyer wrote in to say...
Chris, I believe that’s a side effect of IE/Win’s rigged method of styling table rows: it allows the row’s background to be inherited by the cells. (Which is a no-no:
backgroumdis a non-inherited property. The only way you could get that effect in CSS terms is by having atd {background: inherit;}rule, but of course IE/Win doesn’t supportinherit. But anyway.) The reset styles wipe out that inherited value, as you discovered.You should be able to get back the effect you had by changing your selectors to read:
Honestly, I can’t decide if the reset styles exposing a browser bug counts as a bug or a feature.
Eric Meyer wrote in to say...
That shouldn’t happen, Dennis, at least not if I’ve understood you properly. Do you have a test case illustrating the problem you could share?
Eric Meyer wrote in to say...
To all asking why Marco did what he did in the BRAT styles: I’m afraid I’ve no answer. I’m lucky to be able to explain my own rationales. If I had to guess, I’d guess that he wanted to find elements using attributes that can be better addressed via CSS, but that’s only a guess.
Pete B wrote in to say...
Why remove focus outlines, or make them unconventional? There’re needed for keyboard navigation and accessibility… and if you’re Dutch, the government will go and get you.
Fraser Pearce wrote in to say...
Couldn’t you replace that very first long statement with:
body, body * {…
I know that would also effect tags you aren’t stating, like the depricated ones, but is that an issue? Are there tags you are specifically avoinding applying those rules to?
Fraser Pearce wrote in to say...
Actually, I think I recall you mentioning that its due to form elements… if so, don’t worry… I can see they’d be a problem.
Eric Meyer wrote in to say...
Pete, note the comment right before that rule. It’s there to prompt the creation of specific focus styles, precisely for the reason that they’re needed. Again: this is a start, not an end.
As you say, Fraser, it’s about form elements and not wanting to touch them if at all possible.
Received from Ess - Sibran Lens » Blog Archive » Update reset.css from Eric Meyer
[...] meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ [...]
Mike Gratton wrote in to say...
Hi Eric,
So your post got me thinking again about how I do maintainable CSS development across webapps to give a common, distinct baseline look, but allowing customization per site/app.
What approach do you tend to take when styling a new site? Use a reset like the above as a template – i.e. make a copy and start editing it? Perhaps @import it then start overriding? Or something else?
Using a template means that as the baseline evolves, older sites remain the same as newer sites start to inherit the newer look, kinda nice from a Darwin POV but it does leave the older sites behind.
On the other hand, using an @import for the baseline means that all the sites will be updated as the baseline is, but you need to test them all for regressions as you go.
Sometimes it’s a tough decision to make.
Cheers,
/Mike
Tommy Olsson wrote in to say...
Just curious, but what’s your reason for setting
border-collapse:collapseandborder-spacing:0for tables? Those are mutually exclusive, as far as I know. Theborder-spacingproperty (which isn’t supported by IE) is ignored in the collapsing borders model.Damjan Mozetič wrote in to say...
I have been using your “reloaded one” previously many times now and these changes are very welcome.
One thing I added to the reset style sheet is the following rule, to hide the default border around linked images.
a img { border: none }Some of you may argue that this doesn’t belong here, but I find it too convenient to drop it out.
Ivan Nikolic wrote in to say...
Thank you very much again for this CSS reset sheet!
Eric Meyer wrote in to say...
Tommy, it’s related to some old browser bugs, as I recall. Perhaps, given the advances made in browsers, I should revise it to simply say
border-collapse: collapseand leave off theborder-spacingpart. Then again, maybe I should switchborder-collapsetoseparateand add in a default value forempty-cells. Hmmm…Damjan, that shouldn’t be necessary because
imgis listed in the first rule andborderis set to0. Is it being overridden somewhere?Received from links for 2008-01-16, or so says Harry Love
[...] Eric’s Archived Thoughts: Resetting Again Reset element styles (tags: css) Tags: Found Objects [...]
Tommy Olsson wrote in to say...
Perhaps it’s not such a bad idea to reset the defaults for both border models. :)
Received from » Blog Archive » MischMasch 2008-01-16 portenkirchner.net
[...] Meyer made some changes to his reset styles. He promises that there will be a separate page for the reset styles [...]
Marco Battilana wrote in to say...
Hello Eric. Thank you for the mention of the BRAT. Much appreciated! Please allow me to follow up on some of the questions.
Tim, the align attribute was added in as it should be dictated by the CSS, being part of the presentation layer and all. It reaffirms what Brain LePore stated about the
text-alignproperty as well as your guess as well.Really, the idea behind the BRAT it is to assure that deprecated elements weren’t being used by some of our favourite WYSIWYG editors, as well as properly separate the content layer from the presentation layer.
I completely agree. In the big picture of trying to educate people, I would rather have the "in your face" approach rather than hide the mistakes under the rug, so to speak.
Mike Cherim wrote in to say...
I really like the the
:focusoutline reset. I always add focus to my links so this will be useful in future projects. I don’t know if I’ll reset all links, but for larger items like masthead links, this will be great. Thanks Eric.Dan wrote in to say...
Please include some sort of licence with this, otherwise, how is anyone to use this? I don’t remember seeing any licence for use at all in the last reset stylesheet.
Received from Recent Links: January 14 to January 17 at Alex Jones
[...] Resetting Again [...]
Paolo wrote in to say...
Extremely useful. Thanks.
Received from Orhan Ekici » Eric Meyer yine resetledi
[...] Meyer default css dosyasını tekrar bizlere sundu. Buradan sayfaya [...]
Received from Orhan Ekici » Elementlerinizi sıfırlayın
[...] rahatlık için ben şahsen tavsiye ediyorum zaten yapacağımız css dökümanımızın başına buradaki kodu [...]
Eric Meyer wrote in to say...
Oh, for the love of…
All right, I’ll put a license on it when I move it to its permanent home. But the idea that a license is needed for a collection of CSS rules about which the author has more than once explicitly said that people should use it as a starting point strikes me as the depths of lunacy. Not your lunacy, Dan: the lunacy of the current legal environment.
Received from links for 2008-01-17 « toonz
[...] Eric’s Archived Thoughts: Resetting Again (tags: css reset reference) [...]
Received from Skylog » Blog Archive » links for 2008-01-18
[...] Eric’s Archived Thoughts: Resetting Again (tags: css) [...]
James wrote in to say...
Eric, why do you remove quotes from the
qelement, when the W3C specifically says that the quotes are to be added automatically by the browser? (The element works especially well on modern browsers when quotes are nested.)Your Reset encourages people to place unnecessary quotes around their
qmarkup, when we are all clearly instructed by the W3C to remove them from ourqmarkup.I realize that IE doesn’t support quotes, and your reset merely sets all browsers on the same playing field, but if and when IE ever does get around to supporting the
qelement, we’re going to have to suppress that element on our sites forever in order to prevent double-quotes from appearing everywhere. That doesn’t seem like a good idea for the long term. I’d be very interested to hear your thoughts on this. Thanks!Received from Ready Set Reset » Curtis Henson
[...] Meyer has updated his reset CSS styles again. For those that don’t know, these reset CSS styles so you have a consistent starting [...]
Will wrote in to say...
Very Nice Eric. The inherit styles are the one thing that kinda annoyed me!
Arne wrote in to say...
A quick suggestion: What about background-color for body in general? One day a client told me the basically white website I made for him would look quite crappy and we found out that it’s got to do with Windows’ appearance settings. He had set general text fields/windows backgrounds to be gray and at least IE6 seems to set the page body background to the color of this setting. So it would be an idea to define white as standard background color there, I think.
Received from Joshua Clanton - Design for the WEB » Blog Archive » Linklist: Asking Questions, CSS Resets, and the Power of Procrastination
[...] Eric’s Archived Thoughts: Resetting Again Eric Meyer has updated his CSS Reset styles. [...]
Received from Sexta-feira dos Web Standards #11 · project.47 - Portfolio e blog sobre Web Standards
[...] Resetting Again – Exemplo de CSS global reset, uma pr�tica que pode facilitar muito o in�cio do trabalho de qualquer site em CSS. Cada um possui a sua maneira de desenvolver, mas sempre � v�lido conhecermos outras maneiras de faz�-lo. [...]
Eric wrote in to say...
I haven’t looked into default browser css too much, so this may be a dumb question…
Which browsers actually need their styles reset for div and span? Are there browsers that don’t display those correctly by default, or are they just in there to be safe?
Received from Resetting Again
[...] Full Article at Eric Meyer blog Did you like this post? Digging and sharing is a great way to say thanks! | Subscribe to RSS [...]
Received from