meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Reset Reasoning

The reset styles are undergoing yet another overhaul, but in the meantime, I thought I’d answer a question several people have asked: why?!?  Why do this at all?

The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults.  (Okay, no two browser families—most Gecko-based browsers do have the same defaults.)  For example, some browsers indent unordered and ordered lists with left margins, whereas others use left padding.  In past years, we tackled these inconsistencies on a case-by-case basis; for example, making sure to always set both left padding and left margin on lists.

But there are all kinds of inconsistencies, some more subtle than others.  Headings have slightly different top and bottom margins, indentation distances are different, and so on.  Even something as basic as the default line height varies from one browser to another—which can have profound effects on element heights, vertical alignments, and overall feel.

This is not something we consider very often.  We think of our CSS as modifying the default look of a document—but with a “reset” style sheet, we can make that default look more consistent across browsers, and thus spend less time fighting with browser defaults.  Rather than say “the size of that heading is just right”, forgetting that not all browsers size headings the same way, I have to write the CSS that sets the heading to be the size I want (or the design requires, which comes to the same thing).

This is why so many people zero out their padding and margins on everything by way of the universal selector.  That’s a good start, but it does unfortunately mean that all elements will have their padding and margin zeroed, including form elements like textareas and text inputs.  In some browsers, these styles will be ignored.  In others, there will be no apparent effect.  Still others might have the look of their inputs altered.  Unfortunately, there’s just no way to know, and it’s an area where things are likely to change quite a bit over the next few years.

So that’s why I don’t want to use the universal selector, but instead explicitly list out elements to be reset.  In this way, I don’t have to worry about munging form elements.  (I really should write about the weirdnesses inherent in form elements, but that’s for another day.)

There’s another reason I want to reset a whole lot of styles on a whole lot of elements.  Not only do I want to strip off the padding and margins, but I also want all elements to have a consistent font size, weight, style, and family.  Yes, I want to remove the boldfacing from headings and strong elements; I want to un-italicize em and cite elements.

I want all this because I don’t want to take style effects for granted.  This serves two purposes.  First, it makes me think just that little bit harder about the semantics of my document.  With the reset in place, I don’t pick strong because the design calls for boldfacing.  Instead, I pick the right element—whether it’s strong or em or b or h3 or whatever—and then style it as needed.

The maddening barrier to this is, yes, Internet Explorer.  See, in order to set all elements to have the same font weight and style (both normal) and have all elements use the same font face without breaking inheritance, I need to declare the following:

font-weight: inherit;
font-style:  inherit;
font-family: inherit;

But IE/Win doesn’t support inherit, which would seem to bring that whole effort to a screeching halt.  I can’t explicitly assign the values, like I did in a previous version of the style sheet, because that would block the effects of inheritance.  Say, for example, I wrote this instead:

font-weight: normal;
font-style:  normal;
font-family: serif;

Okay, now I have this rule later on in the CSS:

h1 {font: bold 2em Verdana, sans-serif;}

Then I have this markup:

<h1>Considering a <em>Truly</em> Annoying Omission</h1>

The em in the middle of the h1 will be un-boldfaced, and in a serif face.  With the inherit values, it would be bold and in Verdana (or some sans-serif font).  I should have realized that from the outset, but sometimes my enthusiasm gets ahead of my reason.

So do I drop those inherit declarations?  In the end, no.  They won’t work in IE/Win, but since I develop primarily in Firefox and Safari, that’s not actually a problem.  Their 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.

Hopefully this helps clarify my motivations and thinking.  I’ll follow up with a new (and hopefully final) version of the reset styles in another post, along with commentary on what other things I changed.

97 Responses»

    • #1
    • Comment
    • Thu 19 Apr 2007
    • 0430
    Priit Pirita wrote in to say...

    This one should help having inheritance in IE:
    font-style: expression(this.parentNode.currentStyle ? this.parentNode.currentStyle.fontStyle: ‘normal’);

    Notice camelized currentStyle properties – fontStyle, fontWeight and fontFamily.

    • #2
    • Comment
    • Thu 19 Apr 2007
    • 0448
    Matt Wilcox wrote in to say...

    Thanks for explaining your reasoning Eric. I’m looking forward to the forthcoming ‘form elements’ post.

    • #3
    • Comment
    • Thu 19 Apr 2007
    • 0559
    C.Kluge wrote in to say...

    Thanks, Eric! Very good read, can’t wait for the follow-ups.

    • #4
    • Comment
    • Thu 19 Apr 2007
    • 0943
    Eric Meyer wrote in to say...

    Priit: Ooooo… very interesting. It doesn’t validate, of course, but a lot of people won’t mind that. It’s definitely worth discussing. Thank you!

    • #5
    • Comment
    • Thu 19 Apr 2007
    • 1137
    Peter Foti wrote in to say...

    Since you previously mentioned that Yahoo has already done this with their Reset CSS, it’s also worth mentioning that they consider font manipulation to be separate from the reset functionality. There is a separate Font CSS for cross-browser typographical normalization and control.

    • #6
    • Comment
    • Thu 19 Apr 2007
    • 1319
    Priit Pirita wrote in to say...

    My approach is not a hack, it is based on well known, well documented and stable IE enchancement. Besides, CSS parsers are told to ignore anything they don’t understand and never guess, so I see no point whatsoever in CSS validating, except for debugging purposes only. And so it is, only Iceweasel fills his console with pointless CSS “errors”, making developing cross-browser CSS and JS at the same time a big headache.

    • #7
    • Comment
    • Thu 19 Apr 2007
    • 1529
    Eric Meyer wrote in to say...

    I never said it was a hack, Priit. I just said it wouldn’t validate, which is a point of concern for many readers.

    I’m curious: is this how font family inheritance would be handled?

    font-family: expression(this.parentNode.currentStyle ? this.parentNode.currentStyle.fontFamily: '');

    I’m not sure what to fill in at the end, there. Any guidance would be appreciated!

    • #8
    • Comment
    • Thu 19 Apr 2007
    • 1616
    Priit Pirita wrote in to say...

    On IE6 of mine under W2K under Parallels – HTML tag’s fontFamily is Times New Roman. That on a page without any styles at all. By the way, fontWeigt is 400 and fontStyle is normal.

    • #9
    • Comment
    • Thu 19 Apr 2007
    • 1824
    pauldwaite wrote in to say...

    I can’t believe they didn’t add support for inherit in IE 7. I know they had a lot else on, but guys, wow.

    Sigh. I think CSS will get really fun again in about 3 or 4 years when the next version of IE is established, and we can start actually using CSS 2.

    • #10
    • Comment
    • Thu 19 Apr 2007
    • 1903
    Ron Stewart wrote in to say...

    Eric,

    This whole series so far on the reset styles has been invaluable! Thanks for a very thought provoking thread here.

    And please consider this a +1 for the article on “… the weirdness inherent in form elements…”

    • #11
    • Comment
    • Thu 19 Apr 2007
    • 2153
    Scott wrote in to say...

    Eric, there’s just one thing I having trouble wrapping my head around. The common practice with reset styles is to zero things out, but then further down in the CSS file people end up styling their elements. For example, you end up with this:

    p { margin: 0; padding: 0; }

    p { margin: 1em; }

    To me it would make more sense to stick the 1em margin on there right away:

    p { margin: 1em; padding: 0; }

    Is there some reason I’m missing to zero things first and then style them later?

    • #12
    • Comment
    • Fri 20 Apr 2007
    • 0137
    Priit Pirita wrote in to say...

    Eric, after a good night sleep.
    One must ask what do you really achieve with that resetting. You achive good, reasonable, default and REAL values to some properties. Zero is not just a blurry default, it is a hard cold real number. And I can use that number in some real layout. The ONLY exception here is font-family. There is NO hard cold real value I can rely, instead I absolutely MUST set that every time – I must choose something for a real layout. So, a deafult font should be set to something someone NEVER uses in real layout. Deafult font-family shall remind developer that he/she has forgotten to define the font-family for that tag. You should set font-family default to monospace.

    html { font-family: monospace}, as last definition ( and monospace for IE in that expression() )

    • #13
    • Comment
    • Fri 20 Apr 2007
    • 0554
    Pete b wrote in to say...

    I’ve just been working on getting cross browser consistency, tackling the very same problems in this post.

    My current solution to avoid ruining input elements is to list all elements except input as zeroed padding and margins, but I’ll add this after as well:

    input {margin:0;}
    textarea {overflow-y:auto;}
    html {overflow-y:scroll;}

    Removing margins on inputs but not padding
    Overflow x/y CSS3 property supported by ie and mozilla and takes away the default scroll on ie textareas, and applied to html element makes mozilla behave with a constant window scrollbar allowance like ie has by default – in my opinion the better solution to make a smoother user experience accross a site.

    also I’m experimenting with a

    * {line-height:1;}

    declaration at the top of the style-sheet to try and equalize things.

    • #14
    • Comment
    • Fri 20 Apr 2007
    • 1301
    Eric Hanson wrote in to say...

    Thanks Eric! That makes a lot of sense. Your previous posts felt like entering the middle of a conversation.

    • #15
    • Comment
    • Fri 20 Apr 2007
    • 1649
    thacker wrote in to say...

    The Pirita CSS JavaScript generates errors in IE [tested in only IE7 and IE6]:

    The code used:

    font-style:expression(this.parentNode.currentStyle ? this.parentNode.currentStyle.fontStyle: "normal");
    font-weight:expression(this.parentNode.currentStyle ? this.parentNode.currentStyle.fontWeight: "normal");
    font-family:expression(this.parentNode.currentStyle ? this.parentNode.currentStyle.fontFamily: "monospace");}

    Referenced within a conditional commented IE style sheet; an XHTML DTD with an application MIME of xhtml+xml, ASP.NET file.

    Why, I have no idea.

    • #16
    • Comment
    • Sun 22 Apr 2007
    • 1131
    Me wrote in to say...

    Hi Eric,

    As an amateur, the “inherit” thing has confused me forever. Your example with the “em” inside the header that doesn’t inherit the bold may finally have made it understandable for me. (So, an element that inherits some characteristics inherits it when it’s within another set of tags in the html, not from the initial declaration within the css!) Thanks.

    What do you think about declaring a separate Internet Exploder Only CSS in the html file. How would it work with your method? I’m thinking it would still be good to have all the hacks for “has layout” confiined to one Exploder 6 CSS.

    • #17
    • Comment
    • Sun 22 Apr 2007
    • 1634
    Jeff Liu wrote in to say...

    Hi Eric and everyone else, I was just wondering…for which elements is the universal selector (*) reset undesirable? If it”s only form elements that are negatively affected, is it possible to do something like

    form * {margin:auto; padding:auto;}

    OR

    select, option, etc, etc {margin:auto; padding:auto;}

    I just really like the simplicity of * {margin:0; padding:0;} so I”d rather keep it if I can instead of using the huge alternative reset method.

    • #18
    • Comment
    • Mon 23 Apr 2007
    • 0839
    Alan Bristow wrote in to say...

    I think it’s great that this reset is being addressed, and I now am learning *has* been addressed by others too. Makes for a smoother ride.

    I bet I am missing something here w.r.t the font-weight: inherit; issue above, but my knee-jerk reaction was to go to my new shiny baseline.css and add the following large rule:

    html em, body em, div em, span em, applet em, object em, iframe em, h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, p em, blockquote em, pre em,
    a em, abbr em, acronym em, address em, big em, cite em, code em, del em, dfn em, em em, font em, img em, ins em, kbd em, q em, s em, samp em,
    small em, strike em, strong em, sub em, sup em, tt em, var em, dd em, dl em, dt em, li em, ol em, ul em, fieldset em, form em, label em, legend em, table em, caption em, tbody em, tfoot em, thead em, tr em, th em, td em {
    font-style: italic;
    }

    This meant if I included the em tag anywhere, e.g. an h1, it *would* have it’s effect. This relates to an earlier comment:
    http://meyerweb.com/eric/thoughts/2007/04/14/reworked-reset/#comment-133701

    • #19
    • Comment
    • Mon 23 Apr 2007
    • 0839
    Robin wrote in to say...

    ‘auto’ doesn’t mean ‘browser default’; unfortunately there isn’t anything in CSS that means ‘return to default’. So no, you’re stuck with styling each element individually if you want to leave form elements alone.

    • #20
    • Comment
    • Mon 23 Apr 2007
    • 0918
    steve firth wrote in to say...

    Interesting reading, to be honest I’ve let browsers go to defaults in the main body of text while tightly styling functional elements.

    Forms I’ve found to be disapointing as regards styling with css in general and would definately be intereting to find out why this is rather than just coping with it.

    Is there a technical guide anywhere to the main browsers default preferences?

    i.e. Header 1 – Firefox – margins: W X Y Z, padding W X Y Z

    • #21
    • Comment
    • Mon 23 Apr 2007
    • 1025
    Eric Meyer wrote in to say...

    Scott, it’s easier for most people to create a block of styles that zero everything out and then build from that foundation. That said, there’s nothing wrong with people grabbing the reset styles, modifying them to their own personal defaults, and using that as an ongoing foundation.

    Pete, the * {line-height: 1;} can lead to problems; see the comments on earlier posts in the thread for the reasons why.

    Jeff, that might work if auto meant “block inheritance” or “use browser default”, but it doesn’t. Besides, padding doesn’t accept auto as a value. It default to 0 in CSS, but browsers can (and do) have other values defined for certain elements. Table cells, for example, are fairly widely set to have a padding of 2 pixels.

    Alan, that would definitely work, but it’s also adding a lot of complexity to the baseline—not for the browser, but for the author who has to understand what’s going on. Since a lot of people are already pushing back against the big grouped selector I did write, I think I’m going to avoid bigger ones like that. No reason you can’t use it in your own reset styles, though!

    Steve—there isn’t a detailed guide of which I’m aware. Anyone can look in html.css and so forth to see what Firefox does, and I believe one can dig up Opera’s default style sheet as well, but IE/Win doesn’t have a style sheet as such. Its default behavior is internally encoded, and so far as I’m aware, nobody has ever pulled out all its defaults and figured out an equivalent style sheet to describe its behavior.

    • #22
    • Comment
    • Mon 23 Apr 2007
    • 1141
    bruce wrote in to say...

    Steve: I collected some browsers’ default css on accessify forum

    I mailed Chris Wilson to ask for the default IE styles, but got no response. Wonder if Molly would oblige?

    • #23
    • Comment
    • Mon 23 Apr 2007
    • 1156
    Priit Pirita wrote in to say...

    there you go, IE6.0.2800.1106, W2K, using Mike Hall’s excellent DomViewer

    accelerator = false
    backgroundAttachment = scroll
    backgroundColor = transparent
    backgroundImage = none
    backgroundPositionX = 0%
    backgroundPositionY = 0%
    backgroundRepeat = repeat
    behavior =
    blockDirection = ltr
    borderBottomColor = #000000
    borderBottomStyle = inset
    borderBottomWidth = medium
    borderCollapse = separate
    borderColor = #000000
    borderLeftColor = #000000
    borderLeftStyle = inset
    borderLeftWidth = medium
    borderRightColor = #000000
    borderRightStyle = inset
    borderRightWidth = medium
    borderStyle = inset
    borderTopColor = #000000
    borderTopStyle = inset
    borderTopWidth = medium
    borderWidth = medium
    bottom = auto
    clear = none
    clipBottom = auto
    clipLeft = auto
    clipRight = auto
    clipTop = auto
    color = #000000
    cursor = auto
    direction = ltr
    display = inline
    filter =
    fontFamily = Times New Roman
    fontSize = 12pt
    fontStyle = normal
    fontWeight = 400
    hasLayout = true
    height = auto
    imeMode =
    layoutFlow = horizontal
    layoutGridChar = none
    layoutGridLine = none
    layoutGridMode = both
    layoutGridType = loose
    left = auto
    letterSpacing = normal
    lineBreak = normal
    lineHeight = normal
    listStyleImage = none
    listStylePosition = outside
    listStyleType = disc
    margin = auto
    marginBottom = auto
    marginLeft = auto
    marginRight = auto
    marginTop = auto
    minHeight = auto
    overflow = scroll
    overflowX = auto
    overflowY = scroll
    padding = 0px
    paddingBottom = 0px
    paddingLeft = 0px
    paddingRight = 0px
    paddingTop = 0px
    pageBreakAfter = auto
    pageBreakBefore = auto
    position = static
    right = auto
    rubyAlign = auto
    rubyOverhang = auto
    rubyPosition = above
    scrollbar3dLightColor = #d4d0c8
    scrollbarArrowColor = #000000
    scrollbarBaseColor = #000000
    scrollbarDarkShadowColor = #404040
    scrollbarFaceColor = #d4d0c8
    scrollbarHighlightColor = #ffffff
    scrollbarShadowColor = #808080
    scrollbarTrackColor =
    styleFloat = none
    tableLayout = auto
    textAlign = left
    textAlignLast = auto
    textAutospace = none
    textDecoration = none
    textIndent = 0pt
    textJustify = auto
    textJustifyTrim =
    textKashida = 0pt
    textKashidaSpace = 0pt
    textOverflow = clip
    textTransform = none
    textUnderlinePosition = auto
    top = auto
    unicodeBidi = normal
    verticalAlign = auto
    visibility = inherit
    whiteSpace = normal
    width = auto
    wordBreak = normal
    wordSpacing = normal
    wordWrap =
    writingMode = lr-tb
    zIndex = 0
    zoom = normal

    • #24
    • Comment
    • Mon 23 Apr 2007
    • 1204
    Eric Meyer wrote in to say...

    Interetsing, Priit—but on what element did you view the DOM, and what about all the other elements? (And please don’t post a pull DOM dump for every element in a document in a comment; put up a page and link to it instead. Thanks!)

    • #25
    • Comment
    • Mon 23 Apr 2007
    • 1220
    Priit Pirita wrote in to say...

    Feel free to explore: http://bkp.ee/dom.html

    Concerning IE, document.childNodes, node 1 is HTML

    • #26
    • Pingback
    • Mon 23 Apr 2007
    • 1614
    Received from Filter for 19/4 2007 - Felt

    [...] Eric Meyer: Reset Reasoning What’s all the fuss whit this Reset stuff? [...]

    • #27
    • Comment
    • Mon 23 Apr 2007
    • 2230
    Miriam wrote in to say...

    Can someone elucidate on this DOM stuff? I looked at Priit’s page – but do I have to look using IE to get the proper list? Was I seeing Firefox’s settings? Being on a Mac I don’t have IE. Is the assumption that an unstlyed page, viewed in IE and explored using the DOM will list all the defaults?

    • #28
    • Comment
    • Tue 24 Apr 2007
    • 0407
    morris wrote in to say...

    When I open a blank page in IE6, the default values for html and body are:

    fontFamily = Times New Roman
    fontSize = 12pt
    fontStyle = normal

    These values were found using the IE Developer Toolbar.

    • #29
    • Pingback
    • Tue 24 Apr 2007
    • 1126
    Received from Hi, my name is Al » Resetting Browsers

    [...] banter so it may appear gibberish. Anyway, I’ve just read through Eric Meyer’s post on Reset Reasoning. At work I have been playing with this idea for a while now, but I have run into various problems. [...]

    • #30
    • Comment
    • Wed 25 Apr 2007
    • 2313
    Abu Aaminah wrote in to say...

    Eric said, “This is why so many people zero out their padding and margins on everything by way of the universal selector. That”s a good start, but it does unfortunately mean that all elements will have their padding and margin zeroed, including form elements like textareas and text inputs.”

    Eric, please forgive my CSS ignorance, but I would have thoughtt it makes more sense to zero *everything* and then add them where needed (e.g. textareas and text inputs)?

    • #31
    • Comment
    • Thu 26 Apr 2007
    • 0630
    Marko Dugonjic wrote in to say...

    Pete b, nice touch with html overflow-y rule, but overflow-y is still not valid CSS property. If you care, the same effect could be achieved with:
    html { height : 100%; margin-bottom: .01em; }

    • #32
    • Pingback
    • Mon 30 Apr 2007
    • 1100
    Received from Ryan Hamilton » Blog Archive » Reset

    [...] sheet. There’s been a bit of discussion about them lately around the web, such as over at meyerweb. This is something I’ve been wanting to do for a while now, and I’ve finally kicked [...]

    • #33
    • Pingback
    • Wed 2 May 2007
    • 1707
    Received from On Using Reset Styles : Design by CSS

    [...] styles. So what are reset styles and why do we need to use them? For that read Eric’s post, Reset Reasoning. In this post, Reset Reloaded, Eric lists exactly what his reset styles are so you can use [...]

    • #34
    • Pingback
    • Wed 2 May 2007
    • 2033
    Received from Links of Interest · All the Billion Other Moments

    [...] of Interest Reset ReasoningEric Myer’s explanation of why you would want to reset styles across [...]

    • #35
    • Pingback
    • Thu 3 May 2007
    • 1335
    Received from Huh? » Blog Archive » Eric’s Archived Thoughts: Reset Reasoning

    [...] Eric’s Archived Thoughts: Reset Reasoning also: [...]

    • #36
    • Pingback
    • Thu 3 May 2007
    • 2302
    Received from CSS Reset | Building better than beta.

    [...] Eric Meyer [...]

    • #37
    • Pingback
    • Fri 4 May 2007
    • 1214
    Received from Reset de estilos — RafaelMarin.net

    [...] Reset reasoning – Eric Meyer [...]

    • #38
    • Pingback
    • Fri 4 May 2007
    • 1414
    Received from historicpress.com » Blog Archive » Hello world!

    [...] 37 Responses» [...]

    • #39
    • Pingback
    • Fri 6 Jul 2007
    • 1503
    Received from Space Ninja » Blog Archive » An Event Apart Seattle 2007

    [...] Eric started the first day with “Secrets of the CSS Jedi,” which was all about thinking outside the box with CSS. He illustrated that the default behavior of all HTML elements is defined by the browser, and each browser defines things slightly differently – especially font handling – which is why he advocates the use of a reset stylesheet. [...]

    • #40
    • Pingback
    • Tue 2 Oct 2007
    • 1056
    Received from 出家如初,成佛有余 » blueprint–css framework研究

    [...] Reset Reasoning:http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/ [...]

    • #41
    • Comment
    • Fri 12 Oct 2007
    • 1707
    Bill wrote in to say...

    Priit, am I missing something, or does this not work in IE 6?

    Marko, overflow-y is valid CSS 3, you were likely validating as CSS 2.

    • #42
    • Comment
    • Tue 6 Nov 2007
    • 1310
    FS wrote in to say...

    Hi Eric! I’am wrong o you don’t use the reset on your web? why?

    • #43
    • Pingback
    • Sun 11 Nov 2007
    • 0809
    Received from Intenta » Blog Archive » CSS inicial de Eric Meyer

    [...] Por defecto, todos los elementos HTML tienen unos atributos CSS predeterminados. Estos estilos, generalmente son los ocasionantes de algunos de los problemas más comunes a la hora de verse bien en todos los navegadores. Una opción es resetear los estilos. Eric Meyer nos aporta su hoja de estilos inicial así como algunas razones que le han llevado a utilizarla. La razón principal es que todos los navegadores tienen presentaciones preestablecidas y todas ellas diferentes. […] Por ejemplo, algunos navegadores sangran las listas con un margen izquierdo, mientras otros usan el padding… […] Pero hay todo tipo de inconsistencias, unas más sutiles que otras. Los títulos tienen márgenes superiores e inferiores ligeramente diferentes, las distancias de sangría son diferentes, y así sucesivamente. Aún algo tan básico como la altura de las líneas varía de un navegador a otro—lo cual puede tener efectos en la altura de los elementos, las alineaciones verticales y en general todo el aspecto. Seguir leyendo »» [...]

    • #44
    • Pingback
    • Thu 15 Nov 2007
    • 0808
    Received from CSS-Prolog = Sinnvoll ?! - Seite 8 - XHTMLforum

    [...] sind ausgenommen — Eric’s Archived Thoughts: Reset Reasoning. Es lohnt sich, Eric Meyers Artikel ganz zu lesen und auch den Links darin zu folgen. Auch in [...]

    • #45
    • Pingback
    • Fri 23 Nov 2007
    • 0630
    Received from It’s Samuel » Blog Archive » CSS Reset, A Quick Introduction

    [...] Meyer writes about this subject in greater detail, and his ‘Reset Reloaded‘ has served me as a CSS [...]

    • #46
    • Pingback
    • Tue 18 Dec 2007
    • 0951
    Received from blueprint--css framework研究 | 孙飞龙博客

    [...] Reset Reasoning:http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/ [...]

    • #47
    • Pingback
    • Sun 10 Feb 2008
    • 1119
    • #48
    • Pingback
    • Fri 29 Feb 2008
    • 1924
    Received from mStudiosTALK | CSS Tools: Reset CSS

    [...] line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you’re interested. Reset styles quite often appear in CSS frameworks, and the [...]

    • #49
    • Pingback
    • Thu 20 Mar 2008
    • 2032
    Received from CSS: The Universal Selector | Alpha Blog Designs

    [...] I still think it’s the simplest, best option. However, Eric Meyer has a great article on why he does not use the universal selector to reset everything, and a follow up article which explains what he does instead, so I might have to rethink my [...]

    • #50
    • Pingback
    • Wed 9 Apr 2008
    • 1328
    Received from CSS Naked Day 2008 | jason friesen {dot} ca

    [...] site should still function and make sense, even without any visual design whatsoever (well, mostly). Why? Because with the increasing freedom available in how people access the internet, your [...]

    • #51
    • Pingback
    • Fri 11 Apr 2008
    • 0436
    • #52
    • Pingback
    • Fri 16 May 2008
    • 1837
    Received from New Moves in CSS

    [...] coined the term in 2007 but the concept has been around longer. Based on the reasoning that “all browsers have presentation defaults, but no browsers have the same defaults,” the CSS Reset creates a common baseline between browsers, reducing inconsistencies so that the [...]

    • #53
    • Pingback
    • Thu 12 Jun 2008
    • 1727
    Received from Global CSS Reset Styles (Ultimate Collection) | IndoProTech.com

    [...] discussed in the original article, CSS guru Erik Meyer set forth to create a universal set of reset styles. This is heavy-duty stuff, [...]

    • #54
    • Pingback
    • Sat 2 Aug 2008
    • 1213
    Received from Gilles Maes » Blog Archive » The ten commandments of HTML & CSS

    [...] shall reset the right way. Eric Meyer was probably one of the first to encourage people to use something else than * {margin:0;padding:0;} for browser resetting and, [...]

    • #55
    • Comment
    • Wed 6 Aug 2008
    • 0414
    R. Rajesh Jeba Anbiah wrote in to say...

    Having :focus seems to create problems. I’m not sure if I’m the only one facing issue and yet looking for the reasons for styling :focus

    • #56
    • Pingback
    • Sun 28 Sep 2008
    • 2031
    Received from onebywon » Consistency across all browsers

    [...] across different browsers. Eric Meyer has written some excellent articles on the subject. His reasoning for a CSS reset is a good place to start reading. The Yahoo User Interface Library offers a quick easy solution for [...]

    • #57
    • Comment
    • Wed 1 Oct 2008
    • 0416
    Mark S wrote in to say...

    Google Code has some tweaks not found in Eric’s model (v1.1), then there’s the mobile intro (v1.2), and the javascript attacks on visibility (v1.3), and intro to remote access to style blocks using ruby, php (v1.4) — all credos to Eric and the current W3C smoke screen. Reset works and here’s my current workshop.

    /* CSS RESET (commented) */
    /* v1.0 20080212 — Eric Meyer */
    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, 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;font-size:100%;
    vertical-align:baseline;background:transparent;}
    body{line-height:1;}
    ol, ul{list-style:none;}
    blockquote, q{quotes:none;}
    blockquote:before, blockquote:after, q:before, q:after{content:”;content: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;}
    /* CSS RESET (uncommented) */
    /* v1.4 20081001 — Mark Stewart, Riverleaf */
    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, rb, rbc, rp, rt, rtc, pre, b, u, i,
    center, dl, dt, dd, ol, ul, li, span, var, param, ruby,
    fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
    margin:0;padding:0;border:0;outline:0;
    font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;
    vertical-align:baseline;background:transparent;}
    ol, ul{list-style:none;}
    table{border-collapse:collapse;border-spacing:0;}
    ins{text-decoration:none;}
    del{text-decoration:line-through;}
    input, textarea{margin:0;}
    blockquote, q{quotes:none;quotes:”” “”;}
    blockquote:before, blockquote:after, q:before, q:after{content:”;content:none;}
    caption, th, td{text-align:left;font-weight:400;}
    :focus{outline:0;}
    ins{text-decoration:none;}
    del{text-decoration:line-through;}
    table{border-collapse:collapse;border-spacing:0;}
    a{outline:none;}
    a img{border:none;}
    html body{line-height:1;background:transparent;opacity:none;outline-width:0}
    * html {display:inherit;}
    html body:after{content:”.”;display:block;height:0;clear:both;visibility:inherit;}
    * html{height:auto;azimuth:inherit;}
    html body{height:inherit;}

    • #58
    • Comment
    • Thu 2 Oct 2008
    • 0617
    Károly György Tamás wrote in to say...

    Hi Eric,
    This is my version: base.css.
    You have a link. :-)

    • #59
    • Comment
    • Tue 4 Nov 2008
    • 1702
    Vincent Pollard wrote in to say...

    how about adding

    img {
    border: 0;
    }

    to the reset.css?

    i use this on every project to stop the nasty default border when an image is inside an tag.

    • #60
    • Pingback
    • Tue 2 Dec 2008
    • 0313
    Received from css reset | 西风坊

    [...] css reset ?简单讲就是把基本的浏览器默认css给重新覆盖掉。因为各大浏览器的样式表实在是差别太大了,(有兴趣的同学可以在firefox地址栏中敲“resource://gre/res/html.css”查看firefox的默认样式表)所以我们像个办法在开始写css之前把一些常见的样式差异都处理掉。(更好的解释请看 reset reasoning 这篇文章)比如我们很常见的body{padding:0,margin:0}就是一个简单的样式重置。 [...]

    • #61
    • Pingback
    • Mon 29 Dec 2008
    • 0751
    Received from blueprint css framework at cssframework

    [...] Reset Reasoning:http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/ [...]

    • #62
    • Comment
    • Mon 16 Feb 2009
    • 1752
    Simon wrote in to say...

    This also needs adding to remove inconsistent padding weirdness in Firefox –

    button::-moz-focus-inner { border: none }

    • #63
    • Pingback
    • Mon 18 May 2009
    • 0103
    Received from Using a CSS Reset File | Jon Karna's Blog

    [...] class so that I can use it outside of the designated content area for the cms. I really enjoyed the collaboration that went into Eric Meyer’s file also. html, body, div, span, applet, object, iframe, h1, h2, [...]

    • #64
    • Pingback
    • Wed 24 Jun 2009
    • 0540
    Received from 960 Grid System | Tarek Shalaby

    [...] file. If you haven’t been resetting your CSS when developing websites, that you should read this article to know why you should. But basically, resetting avoids a lot of browser incompatibility [...]

    • #65
    • Pingback
    • Thu 2 Jul 2009
    • 0811
    Received from reset.css muammas

    [...] pek inanmamam. Eger Yahoo ve Eric Myer tarafindan tavsiye ediliyor olmasi. Nedenine gelince [Link] [...]

    • #66
    • Pingback
    • Wed 29 Jul 2009
    • 0155
    Received from Bermain CSS #1 | eattutsmagazine

    [...] Populer , Eric Meyer adalah seorang CSS GURU ( master ) yang membuat CSS Reset dengan berberapa alasan salah satunya adalah tidak semua browser memiliki sifat yang sama . Dapat dilihat disini [...]

    • #67
    • Pingback
    • Sun 9 Aug 2009
    • 1627
    Received from Reset de CSS @ Marcelo Pedra

    [...] y tamaños de fuente de encabezados… El razonamiento general detrás de esto puede leerse en este post de Meyerweb. Los estilos de reset suelen aparecer en frameworks de [...]

    • #68
    • Pingback
    • Tue 25 Aug 2009
    • 2003
    Received from Powerful and Userful CSS Tools to saving your time – Part III

    [...] line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you’re interested. Reset styles quite often appear in CSS frameworks, and the original [...]

    • #69
    • Pingback
    • Sat 12 Sep 2009
    • 1941
    Received from The Lean Mean CSS Trimming Machine — Website Design UK

    [...] I still think it’s the simplest, best option. However, Eric Meyer has a great article on why he does not use the universal selector to reset everything, and a follow up article which explains what he does instead, so I might have to rethink my [...]

    • #70
    • Pingback
    • Fri 18 Dec 2009
    • 0939
    Received from CSS Techniques I Wish I Knew When I Started Designing Websites - Noupe

    [...] Eric Meyer’s Resets and the reasoning behind them [...]

    • #71
    • Pingback
    • Thu 24 Dec 2009
    • 2247
    Received from CMI Web Studio Blog » Reseting CSS Styles

    [...] discussed in the original article, CSS guru Erik Meyer set forth to create a universal set of reset styles. This is heavy-duty stuff, [...]

    • #72
    • Pingback
    • Mon 1 Mar 2010
    • 1049
    Received from Sam Doyle » CSS Reset – Reduce Browser Inconsistancies

    [...] To see the reasoning behind the need for a css reset, read here. [...]

    • #73
    • Pingback
    • Mon 19 Apr 2010
    • 0700
    Received from 10 Tips for Building Cross-browser Websites « HUE Designer

    [...] file). Eric Meyer has put together a bunch of CSS rules to do just that. He also lists his reasons for using CSS resets. Once you’ve included these rules at the start of your style sheet, you can be reasonably [...]

    • #74
    • Pingback
    • Mon 10 May 2010
    • 0822
    Received from 10 Tips for Building Cross-browser Websites - www.huedesigner.com

    [...] file). Eric Meyer has put together a bunch of CSS rules to do just that. He also lists his reasons for using CSS resets. Once you’ve included these rules at the start of your style sheet, you can be reasonably sure [...]

    • #75
    • Pingback
    • Mon 31 May 2010
    • 2102
    Received from Reset Stylesheets

    [...] up a new website design to turn it into a template, one of the first things I do is to implement a reset stylesheet. The ideal reset stylesheet will essentially turn off all of the proprietary default CSS properties [...]

    • #76
    • Pingback
    • Mon 21 Jun 2010
    • 1702
    Received from CSS Issues Firefox vs. IE | Dan Chase Web Consulting

    [...] and it’s predecessor, Reset Styles, and his follow-up explanation of some of his choices, Reset Reasoning, I thought I may have a clue as to my troubles with the new template design. I should have known [...]

    • #77
    • Comment
    • Sun 22 Aug 2010
    • 1041
    Marco Demaio wrote in to say...

    You reset stylesheet is still the best around. I still prefer yours to the one used by YUI.
    It would be nice if osme day you finde the time to add some more comments in the reset sheet to explain the reasons for the choices you made.
    For instance: why blockquote quotes :none?, why vertical-align: baseline?, why outline: 0? why background: transparent and not #ffffff?

    Thanks!

    • #78
    • Pingback
    • Tue 7 Sep 2010
    • 1824
    Received from Reset CSS – Optimize for iPhone - | JazonPress

    [...] 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 [...]

    • #79
    • Comment
    • Thu 4 Nov 2010
    • 1123
    Danny wrote in to say...

    Hi Eric,

    I have been doing some research on CSS, and discovered ‘CSS Frameworks, Blueprint CSS + Reset’. I noticed CSS framework has:
    * typography.css for basic typographic rules,
    * grid.css for grid-based layouts or
    * layout.css for general layouts,
    * form.css for basic form styling,
    * general.css for further general rules

    Does your CSS reset cover all these aspects?

    Thanks in advance
    CHEERS :)

    • #80
    • Comment
    • Sat 4 Dec 2010
    • 1448
    rob wrote in to say...

    Eric,

    I’d like to propose that the :focus entry is revised…

    /* remember to define focus styles! */
    :focus {
    outline: 0;
    }

    Removing the outline is all well and good but the big problem is that developers rarely provide an alternative, and for people like me who rely on keyboard navigation this essentially renders many sites useless. Every time I find such as site it makes me think “Eric Meyer reset used!”.

    Also I would question as to whether removing the outline is a genuine “reset” or just designer vanity?

    Would appreciate your thoughts.

    • #81
    • Comment
    • Sat 4 Dec 2010
    • 2129
    Eric Meyer wrote in to say...

    Rob, having designer vanity would require that I be a designer.

    The comment in the CSS was meant as a reminder to anyone who used the reset for themselves. I mean, it explicitly says to remember to define focus styles! As in, change this value to have visible outlines. I completely failed to anticipate two things:

    1. That so many would use the reset.
    2. That so few would read it and pay attention to the notes within.

    That said, the coming revision of the reset will either drop that rule or modify it to something like 3px dashed red to drive home the point I was trying to make. More likely it’ll be dropped.

    • #82
    • Comment
    • Fri 24 Dec 2010
    • 1031
    rob wrote in to say...

    Eric – thanks for the reply. It’s great to know you’re “on the case” with it.

    Happy Xmas!

    • #83
    • Pingback
    • Mon 28 Feb 2011
    • 0831
    Received from The Pros And Cons Of CSS Resets | Van SEO Design

    [...] problem is there isn’t a standard for what those defaults should be. While browsers with the same rendering engine will use the same defaults, two different rendering [...]

    • #84
    • Pingback
    • Fri 8 Apr 2011
    • 0536
    Received from Turbo Plone theming with XDV/Diazo | Follia Digitale

    [...] your theme has a reset.css but you want Plone's public.css styles for content editing, it might help to use [...]

    • #85
    • Pingback
    • Fri 10 Jun 2011
    • 1418
    Received from How To: Cross-Browser CSS

    [...] approach to cross-browser styling. Call me a late bloomer but Eric actually blogged about this idea way back in 2007 (some 4 years ago) before I read it in [...]

    • #86
    • Pingback
    • Sat 24 Sep 2011
    • 2236
    Received from Coding A Portfolio Site | Design In Flux

    [...] I attach a reset file (if you do not know what a reset file is, please check out this great link). I have been using Eric Meyer’s reset file for a long time, [...]

    • #87
    • Pingback
    • Mon 10 Oct 2011
    • 1513
    Received from About the CSS Reset File (reset.css) | Mathverse Blog

    [...] Another good reason for resetting styles has to do with regulating browser inconsistencies. Eric Meyer wrote an article on this. [...]

    • #88
    • Pingback
    • Tue 14 Feb 2012
    • 0108
    Received from Background image looks different - DesignersTalk

    [...] solution though. The different browsers have different default CSS settings, read an article here: Eric's Archived Thoughts: Reset Reasoning Get the reset code here: CSS Tools: Reset [...]

    • #89
    • Comment
    • Mon 23 Apr 2012
    • 0626
    Stephan wrote in to say...

    This is the CSS reset I use in most of my projects:

    http://www.htmltweaks.com/Reset_Browser-Specific_CSS_Styles

    Works quite well for me, but I might have to add a couple styles from your Reset CSS Post, like line-height, font-styles and the HTML5 display-role reset for older browsers.

    • #90
    • Pingback
    • Sun 1 Jul 2012
    • 2112
    Received from HTML5 Digital Classroom » Life as an MIS student and tech enthusiast

    [...] Eric Meyer – Reset Reasoning [...]

    • #91
    • Pingback
    • Sun 8 Jul 2012
    • 0227
    Received from Daily Status – July 7 – The Early Worm | Everyday Achievements

    [...] leading me to read about clearfix techniques, CSS attribute selectors, and the concept of CSS reset. Yikes. Down the rabbit [...]

    • #92
    • Pingback
    • Mon 15 Oct 2012
    • 1752
    Received from Some Thoughts on CSS | iQuest Blog

    [...] controversial subject is resetting CSS. The goal of a reset style sheet is to reduce browser inconsistencies in things like default line [...]

    • #93
    • Comment
    • Fri 14 Dec 2012
    • 1527
    VANDERWEYEN Jonathan wrote in to say...

    Hi, shouldn’t be the summary tag also added to the html5 display: block rule ? as defined here it should …

    • #94
    • Pingback
    • Thu 18 Apr 2013
    • 1205
    Received from Why reset CSS? | Here's - nnish! Nishanth Anil

    [...] Note: Remove the <pre> tag from the above code while pasting. See Original Source here. And here’s an elaborate reason for CSS reset from Meyerweb. [...]

    • #95
    • Pingback
    • Tue 13 Aug 2013
    • 0238
    Received from How to Customize Twitter Bootstrap’s Design in a Rails app - SitePoint

    […] reset.less – contains the reset styles to create a clean, cross-browser foundation to use, based on Eric Meyer’s work from 2007. […]

    • #96
    • Comment
    • Tue 8 Oct 2013
    • 1328
    Ivan Gabriele wrote in to say...

    I suggest an addition :

    textarea {
    resize: none;
    }

    :)

    • #97
    • Pingback
    • Wed 19 Feb 2014
    • 2259
    Received from CSS-wide Keywords and All selectors « geedew

    […] a time we struggled to `reset` browser styles. `Resetting` has become the first thing many applications do. Resetting also evolved into normalizing and then […]

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


April 2007
SMTWTFS
March May
1234567
891011121314
15161718192021
22232425262728
2930  

Sidestep

Feeds

Extras