Friday, May 21st, 2010

CSS Structural Reset

Category: CSS, Tip

<p>Browsers weren’t given guidance in early HTML specs for default styles on elements. Does the body have a margin or a padding? What colors? etc.

The easiest way to deal with multiple browser is so reset the CSS for them all, and built up from there. We then got Eric Meyer’s reset and YUI reset etc.

Vladimir Carrer just threw out his mini reset to handle the 80% rule:

  1. html, body, div, form, fieldset, legend, label
  2. {
  3.  margin: 0;
  4.  padding: 0;
  5. }
  6.  
  7. table
  8. {
  9.  border-collapse: collapse;
  10.  border-spacing: 0;
  11. }
  12.  
  13. th, td
  14. {
  15.  text-align: left;
  16.  vertical-align: top;
  17. }
  18.  
  19. h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }
  20.  
  21. img { border: 0; }

Folks comments on their own tweaks, including the minimal:

  1. * { vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0; padding: 0; margin: 0; }

What reset do you use?

Related Content:

14 Comments »

Comments feed TrackBack URI

There are a couple of resets missing like outline: none.

Comment by Jeph — May 21, 2010

* { zoom: 1; }

;-)

Comment by MartijnHoutman — May 21, 2010

Never been a fan of using wildcards “*”. It creates an unnecessary overhead. While I’m at it, I’m also not a fan of zeroing all elements in the web client. Meyer’s reset with some needed patterning works wonders. So my resets are actually pattern setters for a particular company’s web presence.

Comment by dutchcelt — May 21, 2010

Ha, I use zoom:1 here and there but is there any performance penalty for EVERYTHING zoom:1 ?

Comment by ck2 — May 21, 2010

*{zoom:0.0001} :evilgrin:

Comment by bugme — May 21, 2010

div mentioning is excessive here. I’d prefer to add two optional things (depend on how you use it mostly):
— table, thead, tbody, tfoot, th, td { padding: 0; border: 0; }
— add ul to {margin:0;padding:0;} group and
ul {
display:block;
list-style:none;
}

Comment by GreLI — May 21, 2010

My resets differ for every project but I have a few that are always part of it

* { margin:0; padding:0; }
ul { list-style:none; }
img { display:block; }
a img { border:none; }
.clr { clear:both; }

Comment by iliad — May 21, 2010

.tal {text-align:left}
.tac {text-align:center}
.tar {text-align:right}

Comment by nxtbcca — May 21, 2010

One big thing missing for me is the font resets. Fonts and typefaces are an important part of web design and with webfonts on the way it seems like it should be in there.

Comment by AndersMattson — May 22, 2010

If i’m feeling cheeky i like to add this:
br + br { display: none }
I’m fed up with editors using 2 line-breaks instead of 1 paragraph.

Apart from that i try to avoid the * selector for performance reasons. Eric Mayer’s reset has been serving me well. I tweak it a little for each website, as you should. But i may switch to something less verbose in the future.

Comment by randomrandom — May 22, 2010

CSS resets are backwards. Agents (not to mention users!) have diverse default styles for a reason. Leave them alone.

As for presentational per site “resets” (e.g. list item styles), those are not resets at all.

Scripts certainly should not need to (and really can’t) rely on such things. And trying to make every browser looks like the handful you test with is a fool’s errand.

Comment by DavidMark — May 23, 2010

I was turned on to *{padding:0; margin:0;} awhile back, and it works quite well. Especially when you consider you’re likely to set what you want on all the other tags in your main css file.

Comment by AgentG — May 26, 2010

I usually use Eric Meyers reset. =)

Comment by JSkid — May 29, 2010

body, h1, h2, h3, h4, h5, p, form, ul, ol, li, fieldset { margin: 0; padding: 0; }
object, embed { outline: none; }
ul, ol, li { list-style: none; }
img, fieldset { border: 0; }

works like a charm.

Comment by gonchuki — June 1, 2010

Leave a comment

You must be logged in to post a comment.