Reworked Reset
Published 17 years, 4 months pastHere’s the latest version of my “baseline” style sheet, with some changes based on feedback from readers on the original post.
/* Don't forget to set a foreground and background color on the 'html' or 'body' element! */ html, body, div, span, applet, object, iframe, 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, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; vertical-align: baseline; } a img, :link img, :visited img { border: 0; } table { border-collapse: collapse; border-spacing: 0; } ol, ul { list-style: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; }
The changes are:
The leading comment — rather than fill in some default document colors, which I hesitate to do given how often they’ll be changed, I just threw in a comment reminding the author that setting them is a good idea. I’d expect that anyone who uses their own set of baseline styles will fill in their own favorite color set.
font-weight: inherit;
— this used to benormal
, but it was pointed out that this would upset normal inheritance. For example, if you set adiv
to be boldfaced, none of its descendant elements would inherit that boldness (because they’d be explicitly assignednormal
). Usinginherit
avoids this problem while still “zeroing out” boldface styling.font-style: inherit
— same reasoning.vertical-align: baseline
— this brings everything onto the baseline, including superscripts and subscripts. This forces authors to determine the exact vertical offset they want for such elements, as well as any others they might care to vertically shift, as well as how they’ll accomplish said shift(s).a img, :link img, :visited img
— this will make sure images in anchors and links don’t have a border by default. Usinga img
covers images in named anchors, while the rest of the selector handles images inside either visited or unvisited links. You might considera img
to be sufficient, and for now you’d be right. But in the future, any element may be a link, not justa
elements, so this gives us a bit of future-proofing.
I also put some spaces into the selectors to make them easier for me to read. If you use these styles, you might consider stripping out the unnecessary whitespace to compact the rules as much as possible.
It was suggested that min-width: 0;
be added to the first rule in order to invoke hasLayout, but Ingo Chao explained why that was a bad idea. It was also suggested that text decorations should be removed from links, but I’d rather not. I try never to mess with link decorations, and also figure that anyone who feels otherwise can add their own text-decoration
declarations.
So we’ll see how well this one stands up to use in the wild. Let me know!
Comments (99)
Great followup article. I previously used the global * { margin: 0; padding: 0; } method. Both your articles have opened my eyes to a much smarter solution that I will be implementing in my next design.
Thank you very much.
Thanks!
What is it for?
I’m curious why you have:
a img, :link img, :visited img {
border: 0;
}
When you’re already setting
img
to haveborder: 0;
in the very first selector? Or am I missing something really obvious?Hey Eric, looks great! I was wondering, since a lot of us already know about Faruk’s Initial.css method, how does this one stack up against it and which would be the preferable method in zeroing out sites.
Thanks a lot!
I use this to trigger
hasLayout
if you are interested:http://www.tanfa.co.uk/css/examples/haslayout/tripswitch-demo.asp
Brad: specificity. Some browsers have this sort of thing in their style sheet:
In Gecko-based browsers like Firefox, it’s:
That would win out over plain old
img
on specificity grounds. With the selector I wrote, the specificity will be as high as the first of those selectors, and thus win out (since author styles come after browser styles).Of course, the Gecko style sheet means that in those browsers, images and object with a
usemap
attribute will still get borders, since they are being selected at a higher specificity than what’s in my reset rule. I’m sort of on the fence as to whether I should account for those, or let them go on the grounds that they’re very rare cases.Dean–
Thank you very much. That will help. Am always tripping over haslayout and getting triggered into “Jack Palance” mode.
Eric:
You could write
html body img { border: 0 }
to overcome the specifity of browser stylesheets, no?Also, any reason you”re using
q:before { content: "" }
andq:after { content: "" }
instead of the direct approach,q { quotes: "" "" }
?Fine. Seems to work good for me with one exception. The line height should also be inherited. Otherwise one needs to define the line height for each element and it is impossible to just do something like “#teaser{line-height:160%}” because the p- and li-elements and so on have their own definition.
Thanks, Eric!
Hey Eric,
there is some really good stuff here. Do you see this as a fork of Reset.css from YUI or something that could be fed back in?
There is a Bugzilla for YUI on Sourceforge if you wanted to make notes of where the Reset.css has issues. http://sourceforge.net/tracker/?group_id=165715&atid=836476
Interesting, thank you! :)
Aristotle: if they’re just using
a img
, then yes, but Gecko isn’t. I’m pretty sure the -moz- pseudo-classes contribute 0,0,1,0 specificity, so*|*:-moz-any-link img
is 0,0,1,1 — which requires something like:link img
to compete. Also, I should add aquotes
rule, so thanks!Sebastian:
line-height: 1
should have exactly the same effect as inheriting, and does when I test it. (So wouldline-height: 1em
, actually.) Do you have a test case where it isn’t?Tom: I see it as a parallel effort, but they’re certainly welcome to fold anything I’ve done here into their CSS. I think that, to the extent that CSS needs a license (which I don’t for a second think it does), it can be under the WTFPL.
Have come across the same issue as Sebastian relative to the line-height value of 1 as opposed to a value of inherit.
If a value of 1 or 1em as the same effect as inheriting, wouldn’t a value of inherit be more direct?
This is not a suggestion. It is a question. Ergo, the question mark.
Thank you very much.
Addendum:
Would the specification of the inherit value for line-height not override any browser default values?
Thanks.
I have the same issue as thacker & Sebastian regarding the line-height.
When I try this:
<body>
<div id=“header”>
<h1>Headline1</h1>
</div>
</body>
body {
font:16px/1.5 Sans-serif;
}
h1 {
margin-bottom:24px; font-family:Serif; font-size:200%;
}
The headline has a line-height of 1 with the reset css file as is. But if line-height is changed to inherit in the reset file, the line-height is perfectly fine.
Eric,
1. a img {border:none} works perfectly fine on Gecko 1.7+ and Gecko 1.9a, and has actually been doing so for ages.
2. line-height:1 is, as has been commented, not a good idea. That breaks the inheritance of the line-height property.
Pingback ::
Reset delle proprietà dei CSS « the juice of internet…
[…] secondo eric meier […]
Using inherit on font-weight and font-style doesn’t actually zero out styling in IE 6. I’m not sure about IE 5.x or 7 but I’m guessing they behave the same way. One could selectively serve normal to IE and inherit to everything else but I don’t think that’s the way to go as we’d no longer be leveling the playing field.
Ah, now I see. For people who actually do use unitless line-heights (which, in my experience, had been basically nobody), the
line-height: 1
causes problems. I keep forgetting to look forward there instead of back. Okay, so there’ll be at least one more post, or at least a modification of this one.The line-height problem seems to impact unit specified line heights as well. It is not allowing inheritance from parents, e.g. when the body element has had line-height of any specified unit value set.
Are all these inherit values not leveling browser defaults as indicated by Ed Eliot, ie. font weight and font style within IE6?
Thank you.
Pingback ::
Ramblings » Blog Archive » CSS fun I look foward to trying
[…] Reset CSS styles Eric Meyer presents a baseline set of CSS (based on a Yahoo set) that resets default styles. I have often considered coming up with something like this and am super excited to give this one a whirl. […]
Good work, Eric. Thanks.
This is not meant to be overly critical of E. Meyer’s intent or method to reset browsers.
After reviewing Philipp where he/she mentions “redundancy”, Ed Eliot’s Blog where he states:
and other miscellaneous issues including line-height, image borders, font styling and possible overuse of the inherit value that may not reset IE browsers, that I am in agreement with Ed Eliot’s quoted observation.
The use of a reset style sheet is one that needs adjusted, individually, for the individual’s coding style. A magic bullet style sheet for all uses and individuals to flatten out built-in browser styles may not be practical.
That said, the Meyer Reset provides the groundwork that can be modified for individual use. For that, Eric, thank you.
I use unit-less line-heights…
And I forgot to say, it was interesting how my site kind of went bonkers with this reset CSS. It was mostly some no longer-inherited line-height’s. Nice work. I’ll definitely be using this on future projects.
Pingback ::
anthillz » Blog Archive » links for 2007-04-15
[…] Reworked Reset – Eric Meyer (tags: css work webdesign) […]
Pingback ::
Filter for 16/4 2006 - Felt
[…] Eric Meyer: Reworked Reset An updated version of his alternative to YUIs reset CSS. As usual, some of the more interesting stuff is in the comments. […]
I don’t use tables for layout, but with this reset I find that my data tables do not display borders if I use the <table width=“200” border=“1” cellspacing=“2” cellpadding=“6”> markup within the table selector. Do I have to style all my tables individually to get the borders to show?
I personally wouldn’t use the quote part, although I did used to. Jez Lemon pointed out that non-IE browsers are correct to the spec to include quotation marks, you could run into language issues from encouraging authors to use inline quote marks. Not to mention effectively punishing other browsers for doing it to-spec.
Although not applicable to every case, for a general style sheet I’d rather leave the quotes part out of the CSS and use Jez Lemon’s approach.
Pingback ::
Web Developers Bookstore Blog » Blog Archive » CSS Reset
[…] reset code to bring some of the individual browser quirks to a standard imposed by the developer. Eric Meyer has published his over the weekend which covers just about every contengency. I prefer to only […]
Excellent post Eric, thanks.
I must be missing something as regards:
font-weight: inherit;
and
font-style: inherit;
.I have an
h1
that includes anem
. As it stands, theem
(or had I had one,strong
) is overridden by these rules.I can fix this with additional rules, eg:
h1 em {
font-style: italic;
}
However, adding this seems ‘wrong’.
Is the need to include:
font-weight: inherit;
and
font-style: inherit;
greater than this wrongness or should these two be dropped perhaps?
I admit I don’t often markup
h1
withem
orstrong
, but it still seems wrong somehow.Pingback ::
links for 2007-04-17 : Greg Palmer
[…] Eric’s Archived Thoughts: Reworked Reset I’d like to test this out on a few sites and see how it stacks up to the Yahoo! reset.css I currently base my work on. (tags: todo css design webdev) […]
Pingback ::
green galoshes » An Event, Truly Apart (Day 2 recap)
[…] Eric Meyer has been working on his own version of a css “reset” stylesheet. 2007, aea, aneventapart, boston, conference, DOM, event, speakers This entry was written by […]
Pingback ::
mcdave.net » links for 2007-04-17
[…] Eric’s Archived Thoughts: Reworked Reset “baseline” style sheet (tags: css tips) […]
Hi Eric, I was wondering why you where resetting the list’s?
I’ve used tantek’s undohtml.css for some time — it is mentioned in the very first comment to the original post.
Could someone explain why one approach is better than the other.
Thanks
You could (and probably should) set the border and cellpadding of a table with CSS. Setting the cellspacing with CSS is not yet possible in IE.
Pingback ::
Ess - Sibran Lens » Blog Archive » Update of the reset.css
[…] http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/ […]
Trackback ::
MadeMyDay. EveryDay. Webdesign Karlsruhe Blog.
Zurück auf Los….
…m Stylesheet immer den gleichen Effekt haben. Bzw. man ist abgesichert gegenüber vergessenen Formatierungen.
……
Pingback ::
crawlspace|media
[…] Eric’s Archived Thoughts: Reworked Reset (tags: css tools resource) Leave a Reply […]
I like (prefer, actually) unitless line-height. But it’s not the only problem here. After trying the reset I ran into this:
<div class="t"><div>Text</div></div>
.t { text-align: right; }
Inheritance problem. Text is, of course, rendered left aligned.
I fixed this by putting a “html, body” rule directly below the long one where I set font-size, line-height, text-align to 100%, 1, and, left respectively. Those can then be set to inherit for everything else. Make sense?
Pingback ::
All in a days work…
[…] Eric’s Reworked Reset Here”s the latest version of my “baseline” style sheet (tags: CSS) […]
A real interesting article, great work! :)
Great topic Eric,
Thanks again for feeding back to the community some of your hard work and research. I’ve always used a similar idea of baseline styles, but never put it into a dedicated css file.
I’ll have a play around with your reset stuff and see if i can break my sites, but i doubt i will.
Pingback ::
input [type=checkbox] - borderless ? wie geht? - XHTMLforum
[…] Rat "Setz mal den Prolog" h�tte sich ja dann auch �berholt. W�re Eric Meyers "CSS-Reset" die bessere […]
Pingback ::
Fatih Hayrioğlu’nun not defteri » 19 Nisan 2007 Web’den seçme haberler
[…] CSS’de söz sahibi bir isim Eric Meyer’den başlangıç css dosyası. Kullanışlı bir doküman. Link […]
Pingback ::
Jason Friesen {dot} ca » Blog Archive » Layout Holy Grail
[…] This is where I am. Sample: selkirk.ca/testpages/test-wireframe/. I started with Yahoo Grids, with their decent CSS Reset code (although I’m looking hard at Meyer’s css reset method. […]
Pingback ::
simpledream web studio: standards-based web design and development » Archives » Interesting Links for April 13–19, 2007
[…] Eric’s Archived Thoughts: Reworked ResetEric Meyer’s reset styles for starting CSS files. It might be a while before I incorporate this into my base style sheets, but it’s a great starting point for zeroing out default browser styles.(Tags: css, reference, web-standards, web-design) […]
Great job on this, thanks much. However, I’m confused by one thing, what does the very last rule for the blockquotes do, and why?
Pingback ::
wehuberconsultingllc.com » Blog Archive » Eric’s Archived Thoughts: Reworked Reset
[…] Link to Eric’s Archived Thoughts: Reworked Reset […]
Hi, cool preset-reset, thanks for that!
What I prefer is to set a:focus { border: 0; }, to wipe those dashed borders, after clicking a link and open in in a new tab/ window.
So, this would be my only addition right now.
Sorry, to correct my comment, it’s a:focus{ outline:none; }
Pingback ::
Il meglio della settimana - 25 | Napolux.com
[…] Polar Clock Why you should not use a flag as a symbol of language Experimental Gameplay Project Eric’s Archived Thoughts: Reworked Reset Grafici con Javascript Free CSS Graph Resources Generators Font Garden css, font, grafici, Il […]
Pingback ::
Junk Designs » Blog Archive » CSS Reset
[…] Here is his post, found in it’s original form here. […]
Good stuff, I’m using it with greater ease than just the global reset. It’s opened my eyes to further tweaking, which I can do on an individual basis.
Good job, Eric!
I’d like to point out that
input[type=text]
,select
andtextarea
should also have the background rule set. Otherwise it will inherit default OS theme behavior. Luckily, most of the computer users have set application backgrounds to white, but you never know.Additionally, be cautious with
input[type=hidden]
. If one sets margin and/or padding rule to allinput
s, but hidden fields are not reset, she might be wondering where all those gaps came from.BTW, one more vote for unitless line-heights.
Daniel, by reseting borders for
:focus
pseudo-class you’re making it hard to navigate with a keyboard. If you really have do it this way, please don’t forget to highlight the link in focus with some other method.Pingback ::
Web Design Blog - Override browser default styles
[…] Meyer has kindly published some reset CSS styles, with the aim of overriding the browsers in-built default […]
Pingback ::
Friday roundup at teabyrd.com
[…] Baseline CSS! […]
Pingback ::
70 Expert Ideas For Better CSS Coding | Smashing Magazine
[…] both margin and padding for all elements at the top of their stylesheets. Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s […]
Pingback ::
Darren Hoyt Dot Com -+ Weblog, Bookmarks & Testing Station • » Blog Archive » Baseline Stylesheets
[…] have posted source code for their baseline stylesheet at one point or the other: Christian Montoya, Eric Meyer, Ping, Mike Rundle…any others come to […]
Pingback ::
Reset Styles | 煮豆燃豆萁
[…] 原文:Reset Styles […]
Pingback ::
欲至何所 » Blog Archive » Reset Styles
[…] 原文:Reset Styles […]
Pingback ::
Best of May/June 2007
[…] Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant […]
Pingback ::
Best of May/June 2007 | Webdesign (css, grafica e altro)
[…] Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant […]
Pingback ::
lost node » Blog Archive » Best of May/June 2007
[…] Stylesheets Darren Hoyt follows Christian Montoya, Eric Meyer, Ping and Mike Rundle and offers his default baseline stylesheet for clean and elegant […]
Pingback ::
WildWebWeaving » Blog Archive » Universal White Space Reset
[…] without squandering browser resources or disabling HTML attributes. You may also be interested in Eric Meyer’s solution, although it seems to me to deal with many tags that are unlikely to have padding or margin presets […]
Pingback ::
Reseteando el CSS « frogx.three
[…] O pueden checar el archivo en la pagina del autor aqui rightclick, en los comentarios tambien mencionan este otro de meyerweb […]
Arghh!!!
Opera seems to be choking on the big reset rule at the top. I assume it’s because of all the element declarations. *sigh*
I’m going to try and narrow this down some more.
ah ha! it seems that using html as a selector in opera with the big reset will confuse it (not all the time though – sometimes a page refresh triggers it, sometimes it fixes it. go figure)
So now my reset rules are exactly above but with ‘html’ removed from the first rule selection list.
That’s been annoying me for weeks – so glad it’s fixed now. didnt seem to disrupt any other browsers either. Why on earth they would bother styling the html element I do not know :-/
Pingback ::
links for 2007-08-08 en newdisco
[…] Eric’s Archived Thoughts: Reworked Reset Reset para que los CSS no tengan incompatibilidades entre navegadorores (tags: css webdev webdesign) Archivado en: Links Diarios | Etiquetas: No Tags. […]
Pingback ::
Dave Woods » Reset CSS
[…] known that this has some issues with it when dealing with forms and am starting to come round to Eric Meyer’s way of using a baseline css file in order to reset the specific elements that you want to set as apposed to just assuming that all […]
Pingback ::
Elements: un altro framework CSS di cui non sentivamo il bisogno - Laburno
[…] è il reset di Eric Meyer, pari […]
Pingback ::
napyfab:blog» Blog Archive » links for 2007-09-11
[…] Eric’s Archived Thoughts: Reworked Reset (tags: css reset web development webdesign howto design layout) […]
Pingback ::
CSSLab » CSS Reseter
[…] directa de 3 fuentes: Yahoo UI Reset CSS, Eric Meyer’s Reworked Reset y mi experiencia personal para ir adaptándola a mis […]
Unfortunately, in Firefox, vertical-align baseeline on the tr element causes table cells with rowspans to have the first adjacent row line up at the bottom of the cell rather than have the multiple cells line up adjacent to the one rowspanning cell.
Even more worrisome is that Firefox does not render an overriding style, such as vertical align middle, even if the style is in element’s STYLE ATTRIBUTE!!
Firebug shows it as overridden, but Firefox does not render it correctly.
ah ha! it seems that using html as a selector in opera with the big reset will confuse it (not all the time though – sometimes a page refresh triggers it, sometimes it fixes it. go figure)
So now my reset rules are exactly above but with “html” removed from the first rule selection list.
That”s been annoying me for weeks – so glad it”s fixed now. didnt seem to disrupt any other browsers either. Why on earth they would bother styling the html element I do not know :-/
Hi Eric,
I read somewhere that using the universal operator to reset CSS takes a lot of browser processing time since it travels through the entire DOM when a page gets styled (i.e. reset).
I’d like to hear your opinion on that – was that ever a concern in your investigations?
Cheers!
Pingback ::
IT民工的坐井观天 » CSS Framework,让你事半功倍
[…] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 […]
Pingback ::
Broken Pick » Blog Archive » CSS Framework CSS框架入门教程
[…] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 […]
Pingback ::
[转] CSS Framework,让你事半功倍
[…] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 […]
Pingback ::
Grid Design или вёрстка с Сеткой. / theartbox
[…] наша нуждаетса в глобальном сбросе, я предлагаю CSS Reset от Эрика Майера, сохранив reset.css создадим grid.css в […]
Maybe a simple question, but if I use a browser reset style, should I add a new selector ‘body’, to override the reset for the selector body? Or should I alter the lines in the Reset-CSS?
How can I deal with this?
Pingback ::
CSS for lunch » Reset styles
[…] is Eric Meyer’s rendition of reset.css. Try it out, and let us know how it […]
Pingback ::
www.963.it » CSS Master: azzerare i valori di default dei fogli di stile dei browser: blog personale di Vincenzo Mania
[…] Eric Mayer mette a disposizione degli sviluppatori web un CSS Master come pure il team di sviluppatori di Yahoo all’interno delle librerie UI. […]
Nice reset, but, what about the different display value between browsers, its a good idea defining for any element in the stylesheet the display value?
Pingback ::
梦想照进现实 » 转-CSS Framework,让你事半功倍
[…] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 […]
Pingback ::
CSS Framework | 星辰创想
[…] 首先是将绝大部分元素的样式清零,免得经常会遇到各种各样的问题。来自于Eric 的一篇文章。 […]
Pingback ::
A good start - setting up xhtml and css files for your design - bee-digital design
[…] Eric Meyer’s reset styles. […]
Pingback ::
27stars » Blog Archive » Some Tip’s to avoid IE fixing stress…
[…] 1)Use a base stylesheet – why spend hours tweaking styles when all that needs to be done is catching all those pesky initial values. Don’t have a base stylesheet? Your can find a nifty one by Eric Meyer here. […]
Pingback ::
Bringing browsers to parity (reset styles) « Web Help!
[…] a link to Eric’s post on his own website, which he created after someone at the conference asked if he had an example of […]
Hi Eric,
your CSS code is quite well optimized for compactness. Unfortunately that has a drawback: -it is not clear which tags really need a given style rule (because inheritance is not applied by default, for instance, or because different browsers have different default style sheets).
Would it be possible to show the CSS code in an unentangled way? That is, for each one of the following type of rules, give the corresponding set of tags that really need those rules:
i) margin: 0; padding: 0;
ii) border: 0;
iii) font-weight: inherit; font-style: inherit; font-family: inherit;
iv) font-size: 100%;
v) line-height: 1;
vi) text-align: left;
vii) vertical-align: baseline;
The point is that I would like to set directly the final rule values whithout needing to reset and then setting them again.
ah ha! it seems that using html as a selector in opera with the big reset will confuse it (not all the time though – sometimes a page refresh triggers it, sometimes it fixes it. go figure)
So now my reset rules are exactly above but with “html” removed from the first rule selection list.
That”s been annoying me for weeks – so glad it”s fixed now. didnt seem to disrupt any other browsers either. Why on earth they would bother styling the html element I do not know :(:(
Pingback ::
Alexander Sperl Padding is a Strange Creature
[…] how can you take anything for granted after you see the bottom padding here… Maybe those browser reset stylesheets are not such a bad idea after all… At least it looks the same in FF and […]
Pingback ::
How To Create a Stylish Content Slider using CSS3 & jQuery | SpyreStudios
[…] it should look like this. Now we’ll add some style to the whole thing.CSSIf you like you can use Eric Meyer’s CSS reset, but in our case this should be enough. * { margin: 0; padding: 0; } body { font-family: helvetica, […]
Pingback ::
Getting your CSS to look the same in all browsers – Base CSS / CSS Reset | Public Identity
[…] Eric Meyer’s – Reworked Reset […]