Here’s Chris’ comment:

One issue is that different browsers have different definitions of the padding and the margin variables. The fact that different browsers and different versions of browsers look at these and other variables differently is a really pain.

All true except for that last part about it being a pain to develop cross-browser css.

I want to talk about the problem of different presentational defaults used by browsers, and then talk about how css resets solve the problem and why you may not want to use a css reset.

The Problem of Browser Defaults

When you add an <h1> to a web page, but don’t specifically style it in any way, that <h1> will by default have some styles associated with it.

It will likely be larger than other text on the page, it will be bold, and it will have a certain amount of space above and below.

This is a good thing and one of the reasons html is relatively easy to use. An <h1> should look different from an <h2>, which should look different from a <blockquote>, etc. By default all these things will look different.

The 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 engines could have different default values.

The table below shows defaults for an <h1> tag in several browsers.

The values are from a more complete table of CSS2.1 User Agent Style Sheet Defaults. The date listed in the url shows the full table is nearly 2 years old, but there’s no reason to think the default values have changed.

Here’s a more recent table of defaults for IE6–IE9

Browsers typically use 16px as the default font-size for body text so 2em = 32px = 12pt, but it’s easy to realize how different these values will be if you change the font-size on the body or start setting the size for the <h1> tag.

Another common example of different browser defaults are lists. By default lists are usually indented, however one browser will do that by giving the list some margin and another does it by giving the list some padding.

When you come along and change one or the other things are no longer equivalent across browsers.

There are many other inconsistencies and if you aren’t aware of each it can be confusing to try to make your design work cross browser.

The Simple Solution

The solution to the problem above is actually quite simple. Since it’s the browser defaults causing the problem, don’t let the browser default be the style that’s applied.

If you explicitly set a margin-bottom of 20px on <h1> tags then all browsers will use that 20px. It’s only when you don’t explicitly set the style that the default will be used.

For example when I’m using an unordered list on a site, I’ll add the following to the css

ul {margin: 0; padding: 0}

The line above will ensure that all browsers are now using the same margin and padding on ordered lists. The inconsistency is gone. Of course since I probably do want some indentation, I might change the above to something like

ul {margin: 20px; padding: 0}

Now the list will be indented 20px as well as having 20px of space on the top, bottom, and right. More importantly all browsers will add those 20px as margin. You can just as easily place the 20px on the padding and leave the margin as 0 if you want. The important thing is to set both.

CSS Resets: Pros and Cons

As I mentioned above there are a lot of inconsistencies in browser defaults and you probably aren’t going to remember them all, let alone remember to explicitly set values for all of them. This is where css resets come in.

Pros

CSS resets set new and consistent default values for you. If we look at Eric Meyer’s css reset file (probably the most used of all css resets) it starts by listing a number of html elements and applying the following css to all of them.

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;

There’s more to the file, but the idea is still to solve the problem of different browser defaults. If you use the css reset you can be sure that all the tags listed will have a margin of 0px, a padding of 0px, etc. The inconsistency has been removed.

The other popular css reset is the one provided by Yahoo and you can read a few thoughts about both here.

Sounds like a perfect and easy solution so where’s the downside?

Cons

The downside is that while the reset fixes the inconsistency problem, it does so by creating new defaults that you may or may not want. The new defaults will be consistent cross browser, but you’ll likely still end up wanting to style many of them.

Keeping with the example of lists, most people usually do want their lists to be indented. Odds are even with a reset in place you’ll still add those same 20px (or any value of your choosing) to the margin or padding.

You now have a bit of redundant code as you’re specifying the margin or padding style twice. Is that big deal? Not really. It’s a few extra characters in a css file, but it is a few extra characters that don’t need to be there for every element you later style. Those characters do add up.

Meyer himself says as much when he tells us

In other words, this is a starting point, not a self-contained black box of no-touchiness.

Most people, however, tend to treat resets as a black box.

Another potential issue is the tags you don’t style. For example one of the tags set to have 0 margin and padding is the <abbr> tag.

I don’t know about you, but I can’t remember the last time I used the <abbr> tag. Because I don’t use the tag regularly, I generally don’t style it.

Imagine though at a later time I or a client decides to use the tag. With the reset there will be no margin or padding on the abbreviation, which is probably not what you want. In this case letting the browser set the default might be the better option.

This isn’t exactly a difficult problem to overcome. You just have to make sure every element listed in the reset is styled the way you want, whether it’s your own style, the reset style, or the browser default style.

Like Eric Meyer says a css reset is a starting point and not a black box.

Should You Use a CSS Reset?

Using a css reset is really up to you. They will fix the problem of browser defaults. They also create a few minor issues of their own, that quite honestly either aren’t a big deal or may never even come up.

I usually don’t add one (though I do use one at times), mainly because I am already styling those elements where there’s probably going to be a cross-browser default conflict. After coding for a number of years I’ve developed my own way of structuring a site and know where the potential issues are.

With tags I don’t commonly use or style, I’d rather let the browser default take over, since it generally won’t break the design and there isn’t any reason everything needs to look exactly the same across all browsers.

I take care of the elements I know can cause major issues and tend not to worry about those with minor differences.

That’s not to say I’ll never use a reset or that you shouldn’t use one either. As long as you understand what they’re doing they’re great files. Just treat them as a starting point and don’t simply add one and forget about it.

Ideally you would use one or two css resets as a guide to build your own reset file that you can use in your projects based on your style of coding and design.

Summary

Cross-browser inconsistencies often trip up new css developers. The fix is really quite simple in that you just need to set explicit styles as opposed to relying on browser defaults. For many of us that will only mean adding the styles to a few key elements, though it depends on how you typically structure a site’s html.

CSS resets solve the problem quickly and easily by declaring all those styles for you including a variety of elements you may not remember to include on your own.

If you’re new to css or find you have trouble developing a design that looks the same across browsers you probably want to use one.

On the other hand if you’re an experienced developer who doesn’t have cross-browser issues you may not need to add a reset (unless a reset is the reason for your cross-browser consistency) or you should remember not to treat your reset as a black box.

The choice is really yours. I do think css resets are a good thing as long as you understand what it is they’re doing and where the few potential problems with them are.

Out of curiosity do you use a css reset? If so which one and do you just include it or do you use it at as a starting point?

Go to Source

This guide examines the infinite-like variety of CSS resets created by web developers and designers across the world.

While almost all of these CSS resets are generally provided free for public use (many through Creative Commons licensing), it is incumbent upon you to check the terms of use before putting them to use in your projects.

This guide follows Part 1, where the history of CSS resets was discussed; you’re advised to read that before this one to get the most out of this guide.

This is a three-part series of articles on the topic of CSS resets.

• Part 1: The History of CSS Reset
• Part 2: A Comprehensive Guide to CSS Resets
• Part 3: Should You Use CSS Reset? (coming soon)

In putting together this guide, the 2007 collection of resets by Jeff Starr — who, as an aside, has contributed articles on Six Revisions — was used as a jumping-off point.

"Hard" Reset

As discussed in Part 1 of this series, the original version of the "hard" reset was by web designer Andrew Krespanis:

* {padding:0; margin:0;}

It wasn’t long before folks added border: 0; and outline: 0; to the list of properties, giving us:

* {padding:0; margin:0; border: 0; outline: 0;}

Because of the universal selector (*), this succinct style rule has a powerful transformative effect on any web page in which it is used.

Unfortunately, because of the well-documented ill effects of such an all-encompassing selector, many designers have moved away from this method towards something more controlled.

Tantek Çelik’s undohtml.css (2010 Version)

Tantek Çelik, who is thought to have kick-started the use of CSS resets back in 2004, updated his reset this year. What follows is the updated version of undohtml.css:

/* undohtml.css */
/* (c) 2004-2010 Tantek Çelik. Some Rights Reserved. http://tantek.com */
/* This style sheet is licensed under a Creative Commons License.      */
/*             http://creativecommons.org/licenses/by/2.0              */

/* Purpose: undo some of the default styling of common browsers        */

/* link underlines tend to make hypertext less readable,
   because underlines obscure the shapes of the lower halves of words */
:link,:visited,ins { text-decoration:none }

/* no list-markers for nav lists, default markers work well for item lists */
nav ul,nav ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code/kbd too */
h1,h2,h3,h4,h5,h6,pre,code,kbd { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
dl,ul,ol,li,
h1,h2,h3,h4,h5,h6,
html,body,pre,p,blockquote,
form,fieldset,input,label
{ margin:0; padding:0 }

/* who thought blue linked image borders were a good idea? no abbr borders */
abbr, img, object,
a img,:link img,:visited img,
a object,:link object,:visited object
{ border:0 }

/* de-italicize address,abbr */
address,abbr { font-style:normal }

/* get rid of ad frames inserted by local wifi connections e.g. AnchorFree */
iframe:not(.auto-link) { display:none ! important; visibility:hidden ! important; margin-left: -10000px ! important  }

/* more varnish stripping as necessary... */

The comments in the stylesheet explain the idea behind the update, but to reiterate, here is a breakdown of what the updated file does:

• Removes underlines (text-decoration: none) from links
• Removes style properties from ordered/unordered lists
• Resizes heading elements (<h1> through <h6>) as well as the pre, code, and kbd elements
• Removes the margins and paddings from most HTML elements
• Removes the border around linked images (i.e. <a><img /></a>)
• Removes italicization of address and abbr elements
• Renders iframes invisible, mostly to stop "ad frames inserted by local wifi connections" from appearing

Poor Man’s Reset

The "poor man’s reset" sets the margin, padding, font-size, and borders of the html and body elements instead of all elements. This not only removes the reliance on the universal selector, but is also more conservative with what elements and CSS properties are reset.

html, body {padding: 0; margin: 0;}
html {font-size: 1em;}
body {font-size: 100%;}
a img, :link img, :visited img {border: 0;}

Siolon Reset

In 2008, Chris Poteet developed a hybrid reset, incorporating the universal selector reset for a number of CSS properties, along with some selected (and idiosyncratic) reset values for individual elements such as table and li:

* {vertical-align: baseline; font-family: inherit; font-style: inherit; font-size: 100%; border: none; padding: 0; margin: 0;}
body {padding: 5px;}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {margin: 20px 0;}
li, dd, blockquote {margin-left: 40px;}
table {border-collapse: collapse; border-spacing: 0;}

Poteet says the "idea is that you intercept the default browser stylesheet (that is used first in the cascade), reset, and then apply generic styles including margin/padding."

Inman Reset

Designer/developer Shaun Inman used the following targeted global reset on his personal site:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {padding: 0; margin: 0;}
table {border-collapse: collapse; border-spacing: 0;}
fieldset, img, abbr {border: 0;}
address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, strong, th, var {font-weight: normal; font-style: normal;}
ul {list-style: none;}
caption, th {text-align: left;}
h1, h2, h3, h4, h5, h6 {font-size: 1.0em;}
q:before, q:after {content: '';}
a, ins {text-decoration: none;}

The Inman Reset is reminiscent of a terser version of Eric Meyer’s Reset CSS.

Tripoli Reset

One of the most far-reaching resets outside of Eric Meyer’s Reset CSS is the Tripoli Reset by David Hellsing. It is intended to work along with a foundational stylesheet to rebuild the CSS after the reset tears it down.

* {margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none;}
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext {font: inherit; font-size: 1em; white-space: normal;}
dfn, i, cite, var, address, em {font-style: normal;}
th, b, strong, h1, h2, h3, h4, h5, h6 {font-weight: normal;}
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table {border: none;}
table {border-collapse: collapse; border-spacing: 0;}
caption, th, td, center {text-align: left; vertical-align: top;}
body {line-height: 1; background: white; color: black;}
q {quotes: "" "";}
ul, ol, dir, menu {list-style: none;}
sub, sup {vertical-align: baseline;}
a {color: inherit;}
hr {display: none;} /* we don't need a visual hr in layout */
font {color: inherit !important; font: inherit !important; color: inherit !important;} /* disables some nasty font attributes in standard browsers */
marquee {overflow: inherit !important; -moz-binding: none;}
blink {text-decoration: none;}
nobr {white-space: normal;}

Hellsing’s reset addresses many deprecated HTML elements — often by disabling them — such as the <blink> and <marquee> elements, which could be handy for projects that are used by several people with varying levels of HTML knowledge. Some developers love the Tripoli Reset, others consider it major overkill.

Dan Schulz’s Reset

In August 2008, Dan Schulz, a vastly talented web designer who has since passed away, posted his idiosyncratic version of a "global" reset (which he extensively documented in the SitePoint thread he posted it in):

/* CSS RESET RULES */
html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, cite, code,
col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, i, img,
ins, kbd, label, legend, li, map, object, ol, p, param, pre, q, samp, small, span, strong, sub,
sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, ul, var {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

body {
    background: #FFF;
    color: #000;
    font: 85%/1.5 verdana, arial, helvetica, sans-serif;
}

code, pre {
    white-space: pre;
}

del {
    text-decoration: line-through;            /* it's deleted text - show it as such */
}

dfn {
    font-style: italic;
    font-weight: bold;
}

em {
    font-style: italic;
}

fieldset {
    border: 0;
    display: inline;
}

h1, h2, h3, h4, h5, h6 {
    font: bold 1em/1.5 georgia, garamond, "times new roman", times, serif;
}

img {
    border: 0;
    vertical-align: bottom;
}

ins {
    text-decoration: none;
}

strong {
    font-weight: bold;
}

tt {
    display: block;
    margin: 0.5em 0;
    padding: 0.5em 1em;
}

.skip {
    position: absolute;
    left: -999em;
}

Schulz explained that he didn’t want to use the universal selector, but he did want to zero out the margins and padding on most elements. Since he always coded under Strict doctype, he didn’t bother resetting deprecated HTML elements. Schulz set basic font families, and went into some detail about font sizing. He used some of Meyer’s work on Reset CSS, adding a few "bug-squashing" inclusions.

Thierry Koblentz’s base.css

In March 2010, developer/designer Thierry Koblentz decided to turn the idea of a "global reset" on its head and created a base stylesheet that reset many browser defaults, not necessarily to zero, but to a value he wanted to begin his designs with.

Koblentz’s base.css is big, but much of it has to do with extensive comment documentation:

/*
 * base.css | v0.4 (06132010) | Thierry Koblentz
 *
 * The purpose of this styles sheet is to set default styles for common browsers and address common issues (missing scrollbar, extended buttons in IE, gap below images, etc.)
 *
 * See: http://thinkvitamin.com/design/setting-rather-than-resetting-default-styling/
 *
 * Changes in this version:
 *    - input, button, textarea, select, optgroup, option {line-height: 1.4 !important;} (to override FF's default styling)
 *    - styling <ol> inside <ul> (merci Goulven)
 */

/* using height:100% on html and body allows to style containers with a 100% height
 * the overflow declaration is to make sure there is a gutter for the scollbar in all browsers regardless of content
 * note that there is no font-size declaration set in this rule. If you wish to include one, you should use font-size: 100.01% to prevent bugs in IE and Opera
 */
html {
  height: 100%;
  overflow-y: scroll;
}
/* not all browsers set white as the default background color
 * color is set to create not too much contrast with the background color
 * line-height is to ensure that text is legible enough (that there is enough space between the upper and lower line)
 */	
body {
  height: 100%;
  background: #fff;
  color: #444;
  line-height: 1.4;
}

/* this choice of font-family is supposed to render text the same across platforms
 * letter-spacing makes the font a bit more legible
 */
body, input, button, textarea, select {
  font-family: "Palatino Linotype", Freeserif, serif;
  letter-spacing: .05em;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Georgia, "DejaVu Serif", serif;
  letter-spacing: .1em;
}
pre, tt, code, kbd, samp, var {
  font-family: "Courier New", Courier, monospace;
}

/* These should be self explanatory
 */
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}

h1, h2, h3, h4, h5 {font-weight: normal;}

/* styling for links and visited links as well as for links in a hovered, focus and active state
 * make sure to keep these rules in that order, with :active being last
 * text-decoration: none is to make the links more legible while they are in a hovered, focus or active state
 * a:focus and :focus are used to help keyboard users, you may change their styling, but make sure to give users a visual clue of the element's state.
 * outline:none used with the pseudo-class :hover is to avoid outline when a user clicks on links
 * note that these last rules do not do anything in IE as this browser does not support "outline"
 */
a:link {color: #000;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:focus {text-decoration: none;}
a:focus,:focus {outline: 1px dotted #000;}
a:hover,a:active {outline: none;}

/*
 * This one is commented out as it may be overkill (users who use both a mouse and the keyboard would lose keyboard focus)
 * Besides, this may create a performance issue
 * html:hover a {outline: none;}
 */

/* margin and padding values are reset for all these elements
 * you could remove from there elements you do not used in your documents, but I don't think it'd worth it
 */
body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td {
  margin: 0;
  padding: 0;
}

/* this is to prevent border from showing around fieldsets and images (i.e., images inside anchors)
 */
fieldset, img {
  border: 0;
}

/* to prevent a gap from showing below images in some browsers
 */
img {vertical-align: bottom;}

/* Styling of list items
 * This styles sheet contains a class to apply on lists to reset list-type and margin on LIs
 */
ol li,
ul ol li {list-style-type: decimal;}
ul li {list-style-type: disc;}
ul ul li {list-style-type: circle;}
ul ul ul li {list-style-type: square;}
ol ol li {list-style-type: lower-alpha;}
ol ol ol li {list-style-type: lower-roman;}

/* These should be self explanatory
 * I believe *most* UAs style sub and sup like this by default so I am not sure there is value to include these rules here
 */
sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

/* color is to make that element stands out (see color set via body)
 * padding is used so Internet Explorer does not cut-off descenders in letters like p, g, etc.)
 */
legend {
  color: #000;
  padding-bottom: .5em;
}

/* according to Eric Meyer's reset: tables still need 'cellspacing="0"' in the markup
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* caption and summary are very important for tabular data but because caption is nearly impossible to style across browsers many authors do not use it or use display:none to "hide" it (which is almost the same as not using it).
 * so to prevent such workaround, I am positioning this element off-screen
 */
caption {
  position: absolute;
  left: -999em;
}

/* all th should be centered unless they are in tbody (table body)
 */
th {text-align: center;}
tbody th {text-align: left;} 

/* See Eric Meyer's article about Fixed Monospace Sizing
 * http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/
 */
code {color: #06f;}
code, pre {font-family: "Courier New", monospace, serif; font-size: 1em;}

/* This should be self explanatory
 */
blockquote, q, em, cite, dfn, i, cite, var, address {
  font-style: italic;
}

/* to prevent some browsers from inserting quotes on "q" and "p" ("p" in blockquotes)
 */
blockquote p:before, blockquote p:after, q:before, q:after {content: '';}

/* These should be self explanatory
 */
th, strong, dt, b {
  font-weight: bold;
}

ins {
  text-decoration: none;
  border-bottom: 3px double #333;
}

del {text-decoration: line-through;} 

abbr,
acronym {
  border-bottom: 1px dotted #333;
  font-variant: normal;
} 

/* Creating white space (vertical gutters) via padding
 * most authors do not set right/left padding or margin on these elements, they rather use an extra wrapper or style the container with padding to create the left and right gap/gutter they need
 * I find that the latter creates less robust layouts because it leads authors to mix padding with width which creates issue with the broken box model (IE5 or IE6 in quirks mode)
 * so imho, setting this style using the child combinator (i.e., div > h1) should be the best way to do it, but unfortunately IE 6 does not support such syntax, so I have to go with the following + a reset (see next rule)
 */
h1, h2, h3, h4, h5, h6, p, pre, ul, ol, dl, fieldset, address {padding:0 30px;}

/* this is to reset the left/right gaps (created by the previous and next rules) on nested elements
 */
dd p, dd pre, dd ul, dd ol, dd dl, li p, li pre, li ul, li ol, li dl, fieldset p, fieldset ul, fieldset ol {
  padding-right: 0;
  padding-left: 0;
}

/* These should be self explanatory
 */
dd {
  padding-left: 20px;
  margin-top: .5em;
}

li {margin-left:30px;}

/* we cannot use padding on a table to create left and right gaps (as we do with the elements above), instead we use margin
 */ 
table {
  margin-right: 30px;
  margin-left: 30px;
} 

/* we use margin for hr for the same reason we do for table
 */
hr {
  margin-right: 30px;
  margin-left: 30px;
  border-style: inset;
  border-width: 1px;
}

/* top margin solution */
/* this is my approach to create white space between elements, you do not have to adhere to it
 * rather than stylling these elements with top and bottom margin, or simply bottom margin I only use top margin
 */
h1, h2, h3, h4, h5, h6, p, pre, dt, li, hr, legend, input, button, textarea, select, address, table {margin-top: 1.2em;}

/* top padding solution */
/* this is a different approach which may be less frustrating for novice because it avoids running into collapsing margin and allows to clear floats while preserving space above the element
 * if you decide to give this a try, then comment out the above rule and uncomment the two next ones
 */
 /*
 h1, h2, h3, h4, h5, h6, p, pre, dt, dd, li, legend, address {padding-top: 1.2em;}
 hr, input, button, textarea, select, table {margin-top: 1.2em;}
 */

/* form elements
 * this should not affect the layout of the labels unless you style them in a way that padding applies
 * if I include this here it is mostly because when labels are styled with float and clear, top padding creates a gap between labels (bottom margin would, but not top margin)
 */
label {padding-top: 1.2em;}

/* line height helps to set the vertical alignment of radio buttons and check boxes (remember to group these in fieldsets)
 */
fieldset {line-height: 1;}

/* vertical alignment of checkboxes (a different value is served to IE 7)
 */
input[type="checkbox"] {
  vertical-align: bottom;
  *vertical-align: baseline;
}

/* vertical alignment of radio buttons
 */
input[type="radio"] {vertical-align: text-bottom;}

/* vertical alignment of input fields for IE 6
 */
input {_vertical-align: text-bottom;}

/* a specific font-size is set for these elements
 * the line-height is to override FF's default styling
 */
input, button, textarea, select, optgroup, option {
  font-size: .9em;
	line-height: 1.4 !important;
}

/* this is to fix IE 6 and 7 which create extra right/left padding on buttons
 * IMPORTANT: because IE 6 does not understand the first selector below, you need to apply the class "inputButton" to all input of type="button" in your documents
 * the first declaration is for IE 6 and 7, the second one for IE 6 only, the third one is for all browsers.
 */
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.inputButton {
  *overflow: visible;
  _width: 0;
  padding: .2em .4em;
}

/* classes
 * to style elements with the default padding and margin we set on headings, paragraphs, lists, etc.
 * for example, this class could be used on a DIV inside a blockquote or a DIV inside a FORM, etc.
 */
.block {
  padding: 0 30px;
  margin-top: 1.2em;
}

/* to swap padding for margin
 * for example, this class could be used on a heading you'd style with a bottom border
 */
.padding2margin {
  margin-right: 30px;
  margin-left: 30px;
  padding-right: 0;
  padding-left: 0;
}
/* list items are styled by default with markers (disc, etc.) and left margin
 * if you apply the class "noMarker" to a list, its items won't display markers and won't have left margin
 */
.noMarker li {
  list-style: none;
  margin-left: 0;
}

Koblentz’s base.css does a number of things other resets do not, including:

• Forcing a gutter for a vertical scrollbar
• Incorporating an IE button fix
• Prevention of what he calls "mysterious gaps below images"
• Stopping the descender of some letters from being cut off inside <legend> elements in IE
• Vertically aligning checkboxes and radio buttons with their label
• Setting a default color background for the document
• Styling lists by default
• Creating horizontal and vertical whitespace

Like some other resets, Koblentz warns that base.css includes IE "hacks" that prevent the stylesheet from validating.

Simple Reset

In April 2010, Russ Weakley gave us a much more targeted and limited reset, which he called Simple Reset.

/* ----------------------------
simple reset
---------------------------- */

html, body, ul, ol, li, form, fieldset, legend
{
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

fieldset,img { border: 0; }

legend { color: #000; }

li { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td
{
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

input, textarea, select
{
	font-size: 110%;
	line-height: 1.1;
}

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

In his explanation of Simple Reset, he noted that it removed margins and padding only from selected elements, as opposed to the wholesale removal made by the resets that rely on the universal selector.

Other things Simple Reset does:

• Removes top margins on paragraphs and headings
• Removes borders from fieldsets and images
• Sets table borders and spacing
• Sets values for a number of table-related elements (such as <th> and <td>)
• Applies font-size and line-height to form elements
• Removes list item bullets
• Gives attributes to the rarely styled <abbr> and <acronym> elements
• Gives a vertical alignment value to <sup> and <sub> elements to avoid line-height issues

Weakley reminded CSS reset users: "As with any of the resets, you should do what you feel comfortable doing!"

He echoed Eric Meyer in reminding users of Reset CSS that these style rules are not "self-contained black box[es] of no-touchiness," but tools to be used, tweaked, and modified for the project’s needs.

CSS Mini Reset

Designer Vladimir Carrer combined elements from Weakley’s and Meyer’s resets to create what he called the CSS Mini Reset:

/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0;
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

It is much less overarching than either Weakley’s or Meyer’s efforts, focusing primarily on resetting margins and padding, stripping default values from table elements, resetting headings to normal font weight, and removing borders from margins.

Carrer says that CSS Mini Reset is best used "when you actually don’t want to reset everything."

Carrer based his reset on Azbuka, an earlier and much more complex effort at a typographically-based reset and base stylesheet he created in 2009.

Soft Reset

Around the same time Carrer released his reset, web designer Mark Aplet contributed his Soft Reset. Aplet explained that his reset "attempts to hone in and reset only the properties that really need to be reset, leaving some styling to the browser."

/* Soft Reset */
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset, img { border:0; }
h1, h2, h3, h4, h5, h6, address, caption { font-style:normal; font-size:100%; font-weight:normal; }
caption, th { text-align:left; }
ol.listreset, .listreset ol, ul.listreset, .listreset ul, .listreset li { margin:0; padding:0; list-style:none; }

Aplet’s .listreset class was inspired by Nicole Sullivan’s Object Oriented CSS, (OO CSS) stating that reusable classes are "performance freebies." On large-scale sites, he says that abstracting CSS "can greatly improve your application performance" and "save you hundreds of lines of code."

Less is More Reset

In June 2007, Web developer Ed Eliot provided an even more stripped-down reset; something he called the Less is More reset:

body {
padding: 0;
margin: 0;
font: 13px Arial, Helvetica, Garuda, sans-serif;
*font-size: small;
*font: x-small;
}
h1, h2, h3, h4, h5, h6, ul, li, em, strong, pre, code {
padding: 0;
margin: 0;
line-height: 1em;
font-size: 100%;
font-weight: normal;
font-style: normal;
}
table {
font-size: inherit;
font: 100%;
}
ul {
list-style: none;
}
img {
border: 0;
}
p {
margin: 1em 0;
}

Less is More, Eliot explains, "only affects the elements I most often find myself needing to reset."

There are hacks in the stylesheet that handle some IE issues (highlighted above); unfortunately, they render the CSS invalid when checked against W3C standards.

For those who insist on validation, Eliot recommends moving them to a separate file and using conditional comments.

The Visibility:Inherit Reset

In August 2009, web designer Eric Watson made his own base stylesheet available. It included a small but powerful reset, shown below:

/* -------------------- Resets --------------------- */
body, form, fieldset, ol, ul, li, h1, h2, h3, h4, h5, h6, p {
margin:0;
padding:0;
}
img {
border:0; /* kills Gecko bug when img's are placed inside links */
vertical-align:bottom; /* set vertical align to bottom for IE */
}

Homebrewed CSS Reset

Jeffrey Way at Nettuts+ shared a method for creating your own reset file. The steps he includes for homebrewing your own reset.css are:

1. Zeroing out margins and padding on many elements
2. Taking control of font sizing
3. Creating "default" classes for elements you will use in all of your designs

Way shared his own home-brewed reset.css at the end of his discussion (shown below):

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}  

body
{
line-height: 1;
font-size: 88% /* Decide for yourself if you want to include this. */;
}  

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}  

ul, ol
{
list-style: none;
}  

a
{
color: black;
text-decoration: none;
}  

a:hover
{
text-decoration: underline;
}  

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}  

.floatRight
{
float: rightright;
padding: .5em 0 .5em .5em;
}

HTML5 Resets

Many professionals are eager to dance with the cute new kid on the block: HTML5. Here are some projects that deal with CSS reset in HTML5.

HTML5Reset

Rich Clark and the folks at HTML5Reset have given us an expansive reset crafted for HTML5.

The project comes in several flavors; here is the Bare Bones version:

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

The CSS reset is based on Eric Meyer’s Reset CSS. As explained by Clark, it goes significantly farther than your average global reset stylesheet. It removes elements that have been deprecated from the HTML5 specs, adds new HTML5 elements to remove default padding, margins, and borders, and corrects the frequently repeated "unstyling" of the :focus pseudo-class.

Clark notes that some of the code included in the HTML5 reset is there more by personal preference than anything else (a caveat that is essentially true of all the resets available).

The creators of HTML5Reset says that although the reset is not "the end-all and beat-all" solution, they think that "it’s a fairly good starting place that anyone can take and make their own."

Clark explained some of his thinking behind the HTML5 reset:

When I decided to create a reset stylesheet for HTML5, it was primarily for a project I was working on and figured I might as well release it to be used, modified and improved by the community at large. The main differences from Eric’s stylesheet … are the removal of those absent elements in HTML5, including the new elements and declaring those as block level elements (something that will later be built into browser stylesheets and can be removed from the reset). Also included is some baseline styling for the mark element and a few other bits that I tend to use in every project so it makes sense for me to include them. I also decided to remove the default anchor styling from Eric’s stylesheet so that the outline wasn’t suppressed on links. It has a comment in Eric’s original but rarely seemed to get changed by authors. This highlights one of the biggest issues with CSS resets — you have to craft your own that works for you and for specific projects. It’s unlikely that a reset that works for one site will be exactly what’s required for the next. I’d always suggest using a reset as a starting point and then modifying it for your own needs.

CSS Reset – Refreshed

Web designer Jeffrey King updated Meyer’s original reset for HTML5; his revision is called CSS Reset – Refreshed:

/* v1.2 | 20100218 */

/* Eric Meyer's original CSS Reset is found at
   http://meyerweb.com/eric/tools/css/reset/ */

/* This version's permalink is
   http://kingdesk.com/articles/css-reset/ */

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,
section, article, aside, hgroup, header,
footer, nav, dialog, figure, menu,
video, audio, mark, time, canvas, details {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	}
section, article, aside, hgroup, header,
footer, nav, dialog, figure, figcaption {
	display: block;
	}
body {
	line-height: 1;
	}
ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	}
:focus { /* remember to define focus styles! */
	outline: 0;
	}
ins { /* remember to highlight inserts somehow! */
	text-decoration: none;
	}
del {
	text-decoration: line-through;
	}
table { /* markup tables with 'cellspacing="0"' */
	border-collapse: collapse;
	border-spacing: 0;
	}

HTML5 Boilerplate

Let’s end the guide with a wildly popular project that many of us are constantly talking about: Paul Irish’s and Divya Manian’s HTML5 Boilerplate, a fully developed "framework" — the creators say that it isn’t a framework — that includes a robust, HTML5-friendly reset.

The CSS reset in HTML5 Boilerplate is an amalgamation of HTML5Reset and Eric Meyer’s Reset Reloaded + HTML5 baseline.

/*
  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
  html5doctor.com/html-5-reset-stylesheet/
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display:block;
}

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }

/* END RESET CSS */

Clark (one of the creators of HTML5Reset) says that HTML5 Boilerplate "really highlights how the web community is very good at sharing and opening up for public use."

Conclusion

There are many options for setting your CSS to baseline defaults, as can be seen above. What’s important to note is that you should use what works best for you and the project at hand. You can use an already-existing reset stylesheet, piece several of them together, or build your own from scratch; the choice is yours.

The third and final part of this series discusses the ongoing debate on whether or not we should reset our CSS in our site builds.

This is a three-part series of articles on the topic of CSS resets.

• Part 1: The History of CSS Reset
• Part 2: A Comprehensive Guide to CSS Resets
• Part 3: Should You Use CSS Reset? (coming soon)

Related Content

• Resetting Your Styles with CSS Reset
• Structural Naming Convention in CSS
• 100 Exceedingly Useful CSS Tips and Tricks
• Related categories: CSS and Web Design

About the Author

Michael Tuck is an educator, writer, and freelance web designer. He serves as an advisor to the Web Design forum on SitePoint. When he isn’t teaching or designing sites, he is doing research for the History Commons. You can contact him through his website, Black Max Web Design.

Go to Source

To recap briefly, this is a media query:

.sidebar {
	float: right;
	width: 250px;
}

@media all and (max-device-width: 600px) {
	.complicatedFunctionality {
		display: none;
	}
	.sidebar {
		float: none;
		width: auto;
	}
}

The media query asks whether the width of the device is 600px at maximum. If it is, the special styles are executed. This usually comes down to hiding advanced functionalities that do not make sense on mobile or take too much bandwidth, while it can also be used to change the site’s grid from horizontally oriented to vertically oriented; for instance by placing a sidebar not right of the main content, but below it.

Technically, the .complicatedFunctionality and .sidebar declarations are added to the style sheet only when the query returns true, i.e. the device is less than 600px wide.

Now this works. Better still, media queries are the ideal way of adapting your design to different screen resolutions. Still, they are not the be-all-end-all of making your website mobile-friendly.

Jason identifies two main problem areas:

• It’s all very well to hide, say, an advanced mapping application on mobile, but if you use only media queries the browser will still download the scripts associated with the application.
• Even though images might be hidden from mobile browsers, or low-source ones should be used, the browser still downloads the full-source variants.

In other words, media queries do not stop the browser from downloading assets that will not be used on a mobile phone. And with bandwidth at a premium, this is a serious problem.

He concludes:

CSS media queries are a tool, but they are not a silver bullet.

I mostly, but not entire agree. Media queries are silver bullets when it comes to pure CSS. Restricting the width of your site, moving sidebars and main navigations elsewhere, media queries can do all that and more.

The trick, however, is that a pure CSS approach is not enough. In addition we need a JavaScript that also reads out the media queries and uses the data to decide whether to download the complicated mapping script, whether to download the low-source or the full-source images, or possibly none.

As far as I know there is no direct access to media queries from JavaScript. You can’t read out whether the example media query above has fired or not.

JavaScript pairing

Fortunately, there is a pretty safe way of using JavaScript in conjunction with media queries. It turns out that all browsers I tested so far have paired the width and device-width media queries with the values of document.documentElement. clientWidth and screen.width, respectively.

This is a general rule. All mobile browsers that support media queries exhibit these pairings. It’s hard to believe, but I haven’t found any exceptions yet — and rest assured that I searched for them, because I could not believe that it would be this simple. And I will continue to keep an eye on this and report problems as soon as I find them.

One caveat, though: although the pairing exists in all browsers, some browsers report incorrect values for document.documentElement. clientWidth and screen.width. However, these browsers will also fire media queries based on these incorrect values, so the net result remains that both media query and script are executed, although at the wrong time. See the viewport compatiblity table for the gory details.

Therefore, if we want a JavaScript component that fires when the example media query above is triggered, we simply do:

if (screen.width < 600) {
	// don’t download complicated script
	// use low-source images instead of full-source ones
}

I think it’s best to reverse the script logic:

if (screen.width >= 600) {
	// download complicated script
	// swap in full-source images for low-source ones
}

If you want to use width instead, do this:

@media all and (max-width: 900px) {
	// styles
}

if (document.documentElement.clientWidth < 900) {
	// scripts
}

Thus it is quite possible to pair a JavaScript routine with your media queries, and use it to decide which assets you should and should not download.

When these scripts are added to media queries, we’re a whole lot closer to making one website that reacts to a mobile (or rather, a narrow-screen) environment both in its CSS and in its asset management.

Go to Source

Developers have modified it, bloggers have learned HTML and CSS on it, and designers have made it their go-to template for designing blogs of all sizes for clients.

But let’s face it: five years on the Web is like a hundred years anywhere else, and Kubrick, even according to its creators, is due for an update.

Enter “Twenty Ten” the new default theme for WordPress 3.0, which is scheduled for an imminent release. Not only does it address general changes in Web standards and style guides, it takes into account the clamoring of designers who love WordPress but have had a hard time applying new principles to an older theme.

It’s got meatier CSS, more functionality, increased abstraction and a few other deviations from Kubrick that every theme developer should know about.

These changes should ensure that designers who are already WordPress fans will embrace it, and its flexibility increases the likelihood that WordPress itself will continue its march across the CMS arena.

A Quick Look

• Kubrick: 26 files and 1 folder (87.4 KB)
• Twenty Ten: 42 files and 3 folders (547 KB)

As you can see, Twenty Ten is a heavier theme than Kubrick. Much of the extra weight comes from a different (and markedly improved) way of abstracting the functions and page types that designers once had to change by hacking them or rewriting the code.

Charting the Changes

editor-style.css (new)
One basic yet exciting change is the above style sheet, which gives designers a way to define the styles of the WYSIWYG editor in the WordPress admin. By matching the styles of your templates and blog in this file, the WYSIWYG editor offers a truer representation of what gets published.

style.css (new)
Another surprising statistic, like the difference in the sizes of files and folders, is the increase in lines of CSS. They have almost doubled: from 719 lines to 1343. What’s all that extra code doing there? Well, the additions include a “Print Media” section that defines styles for website visitors who want to read posts while on the go; a mobile Safari section to accommodate iPhone and iPad users; and a section dedicated to custom navigation styling (a new feature in WordPress 3.0). The code is well organized, but you’ll still have to do a typical search for all instances of, say, a hover or accent color.

author.php
Another great new function in WordPress 3.0 is the ability to make author-specific templates. This paves the way for files like author-john.php and author-bob.php, so that everyone who publishes on a blog can have their own visual style.

category.php, tag.php
The archive.php file has lost the functions if (is_category()) and if (is_tag()) in exchange for the added flexibility of abstracting these templates to separate files. This makes customizing easier than ever, especially with the increased functionality of taxonomies.

loop.php
If you look in Twenty Ten’s index.php file, you’ll notice something is missing: no loop! That’s because many frequently used loops have been relocated to the loop.php file so that they can be called from multiple files without having to copy and paste code. This also reduces the weight of some new pages, such as category.php and tag.php. But be warned: if you’re looking to create a custom loop for, say, index.php, don’t mess with loop.php. Create a new file called loop-index.php, and put your custom loop in there. That’s what the get_template_part( 'loop', 'index' ) is for; it lets you make these changes non-destructively.

onecolumn-page.php
Have you ever wanted to leave the sidebar off of just one page? Twenty Ten’s admin option has you covered and it’s got a convenient template to boot!

sidebar-footer.php
A recent trend among Web design gurus is to create an expanded footer area with information that is more useful and compelling than the usual contact info and copyright. The sidebar-footer.php file accommodates an expanded footer by allowing you to style sections in such a way that widgets can be injected in the footer area.

attachment.php
This template file replaces the image.php file and does a much better job of accommodating all of the different types of files we’re now used to publishing in WordPress.

The changes above may look minor to the untrained eye, but they’re a reason to rejoice if you’ve ever created or modified a WordPress theme or been frustrated by its lack of control or extensibility.

By scrapping Kubrick and listening to the concerns of developers, WordPress has managed to incorporate in Twenty Ten the changes needed to bring the now-flourishing CMS into the new decade.

We’re pretty excited, as are most designers and developers who love WordPress, to see 3.0 up and running, and a major reason for that excitement is the flexibility and personalization offered by Twenty Ten.

Written exclusively for Webdesigner Depot by Blue Derkin, a project a social media lead for webhosting company InMotion Hosting. He also blogs at Web Hosting Help Guy.

What do you think of the upcoming changes in WordPress? What features are you looking forward to the most?

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: M7ZD0X

Go to Source

Do you remember the Wicked CSS3 3d bar chart that I placed online a couple of weeks ago? Paul Irish left a comment, requesting for an example with transitions. My reply was that I was already working on that, and today I’m proud to release the animated wicked CSS3 3d bar chart.

The principle is the same as the previous version: Create a beautiful 3d bar chart. But this time, we don’t create a "stacked" one (since animation would be hard), but several bars placed under each other. When hovering, the animation shows and the bar will grow to the appropriate size.

One of the neatest things of this example (in my opinion), is that it uses the exact same HTML (except for the title) as the original article (wicked CSS3 3d bar chart). It’s a great example to show what you can do with flexible CSS; You can create a totally different page with the same HTML and using only a different style sheet file.

  

Take note that this example only works in -webkit based browsers (Safari and Chrome), because those are the browsers that currently only support CSS3 animation (The next version of Firefox will support animations too). So, once again, this example is just a sneak peak into some awesome stuff CSS3 can do for us.

Read more…

Go to Source

Editors Note: In his first article for Think Vitamin Thierry Koblentz discusses the issue of “resetting” your CSS.

“base.css” versus “reset.css”

For a long time, the very first line in my styles sheets was:

* {padding:0;margin:0;}

This simple rule was very convenient as it leveled margin and padding values of all elements across browsers. This “hard reset” was short and simple and it had the advantage of belonging to the main styles sheet rather than being an external file.

Later, this technique was denounced as bad practice as it makes the rendering agent style (check) every single element in a document. It also triggered issues with form controls, but authors were used to specifying styles for these.

Then came “reset” styles sheets. These files go way beyond resetting margin and padding. The most complete in terms of properties/elements involved has to be Eric Meyer’s. It “unstyles” everything you could think of, from a to var.

Authors start with a clean slate. From there, they most often write rules to style elements that were originally styled by the browser’s styles sheet, but overwritten by the reset file. In short, many elements are styled three times:

1. by the browser’s styles sheet (see User Agent Styles Sheets).
2. by the “reset” file.
3. by the author’s styles sheet.

Criticism of this Approach

Jonathan Snook, Jens Meiert and others have “criticized” this approach, saying more or less that there was no use for a “middle man”. On Jen’s site, “randomCommenter” summarizes the issue pretty well when asking: “Wouldn’t a well written base style sheet render a reset style sheet redundant and therefore useless?”

Actually, I believe Eric Meyer himself hints in that direction when he says:

“I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on. In other words, this is a starting point, not a self-contained black box of no-touchiness.”

In any case, people should at least evaluate the rules in these reset files before copying and pasting their content. For example, if one authors documents as HTML 4.01 Strict! one may safely remove from a reset styles sheets any reference to elements like:

• iframe
• applet
• strike
• u
• font
• s
• center

My Base Styles Sheet

Following the idea of “tweaking” a reset file, I came up with this “base styles sheet“. It sets default styling for many elements, follows a couple of recommendations regarding usability/accessibility, and addresses a few “common issues” as well.

What does it do that a reset doesn’t?

It fixes a few things

• It forces a gutter for a vertical scrollbar (when content is too short to require a scrollbar)
• It includes an IE button width fix
• It removes “sticky” outline (not in Internet Explorer though)
• It prevents “mysterious gaps below images“
• It prevents descenders letters in legend from being cut-off in Internet Explorer
• It vertically aligns checkboxes and radio buttons with their label
• It sets a default color background for the document with no shrink wrap effect on body¹

It styles lists by default

It is easier to remove markers on lists than to style them. So, by default, lists are styled to show indentation and markers depending on hierarchy and list types. But the styles sheet contains a class to reset this styling. When applied to a UL or OL – it will remove markers and left margin on their items.

It creates vertical “gutters”

Left and right padding are applied to most block-level elements to create vertical gutters. This allows to build layouts without having to use “padding” on main containers which helps to produce designs that do not break in IE 5 (or IE 6 in quirks mode) as width and padding values are not mixed. This is also an alternative to using non semantic wrappers as a workaround to avoid mixing these properties.

Why using padding instead of margin to create that space?

Using padding allows to paint elements’ background all across their parent container. Stretching from one edge to another. When this behavior is not seeked, for example when styling a heading with a bottom border that should be no wider than what appears to be the “content box”, authors can use a class (in the sheet already) to revert that styling (swaping padding values with margin values).

It creates horizontal white space too

• Via margin – By default, vertical space is obtained through top margin. A top margin of 1.2em is applied to most block-level elements.
• Via padding – Authors can uncomment two rules in the styles sheet to create spacing using padding instead of margin. The advantage of this method is that it prevents two common “issues”:
  • Collapsing margins - Margins will not collapse since elements are not styled with vertical (top/bottom) margins.
  • Loss of top margin when clearing floats – When an element clears a float, it “loses” its top margin, but that gap is preserved if top padding is used instead.

What else?

Rules in this base styles sheet are well commented and values that one would like to change (font-family, font-size, line-height, color, padding, etc.) are placed near the top of the file.

You can download base.css with comments or a minified version. My advice is to use these rules as a starting point to create your own styles sheet. Do not link to an external file to then override property values, instead, add, remove and edit anything you want to end up with a main styles sheet for your own project(s).

My base.css styles sheet is a work in progress. If you play with it, and if you see things that should not belong in there or to the contrary things that should be included, please join the discussion.

¹ The YUI reset styles sheet sets a background-color on html. This styling makes the browser paint the background of body no taller than its content instead of matching the viewport’s height (this is by specs). I believe a future release of YUI reset will include this change.

Go to Source

Style Sheet switchers (or "colour theme choosers") are not really that new. Apart from that fact, they still are pretty fun to use and cool to see. I was wondering how jQuery could help me achieve this technique. While searching, I came across several solutions.

There is a problem when using these techniques, which I will explain later. I created a little work-around to create a better jQuery stylesheet switcher. We’ll simply change some colours for the user!

Make sure to check out the demo to view what we’re trying to accomplish.

  

The cute little monsters used in the demo are created by Fast Icon (Dirceu Veiga). Now, let’s take a look at how you can create something like this yourself!

Read more…

Go to Source

Who cares about older browsers?

If you haven’t done so, I highly recommend cracking out a copy of Firefox 1. Start bouncing around to a few sites and check out what’s broken. Sure, most stuff is fine but you’d probably be surprised at what’s broken. What about Firefox 2? I have more people using this old version of Firefox than I do of all Opera users put together. These are browsers that I don’t check my site in any more. In a way, it’s like they don’t even exist.

As web browsers have progressed, we’ve increasingly gotten to the point where we just ignore old browsers like they don’t exist. No more testing, no more hacks, no more nothing. Who knows what it looks like? Is it good, is it bad? Does it even matter?

My initial stance

My initial stance was that every browser mattered. It doesn’t matter if they’re coming in with Netspace 1.0 or Internet Explorer 3. These people are armed with a browser and they deserve content. No, they don’t get any CSS, or maybe a limited amount. Only the recent browsers get the good stuff.

We draw a line in the sand that says, "You popular browsers, stand over here. Everybody else, just be happy you got content."

More specifically, a base style sheet would declare some default font styles but no float or other layout tricks. Just linear content. This default would look decent in any browser, no matter from what era. It makes a great print style sheet, too.

Then, for those cool, fancy browsers that we know and like, we give them the good stuff. The whole enchilada.

Two major issues here:

1. How can you tell that you have a current browser?
2. What can you assume about browsers that haven’t come out yet?

With Internet Explorer, it’s really easy: we have conditional comments that we can use to target specific versions. Now for the rest of them? Unfortunately, the best way (that I can think of) is to use user agent sniffing on the server to serve up the extra stylesheets only if the visitor has a browser within the subset that we find acceptable.

On that second point, what happens when a new version comes out? Or somebody says they’re "compatible" with another engine and your user agent sniffing serves up something limited. Basically, it becomes difficult to future-proof something for any length of time.

My softened stance

My pragmatism comes into play, like that little devil and angel on my shoulders telling me each side of the story. The fact is, these are old browsers. Why haven’t these people upgraded? Why are all these people still using Firefox 2? So what if it’s a little (or a lot) broken for them. They should upgrade.

Obviously, Internet Explorer 6 is the oddball here. She’s that awkward girl who doesn’t understand social cues and realize that the party is over. It’s the elephant in the room, as it were. Too big to ignore. But right! We have a way to target IE browsers by version. We can use our conditional comments to tailor for IE6 until it disappears. We can feed it the limited CSS and let everybody else get the fun stuff.

Mmmmm, pie

When it comes to market support, I’ve often looked at it as one big pie. You may say that Opera is too small to really care about. It’s only 2%. You don’t care about Firefox 2 users. It’s only 2%. You may not care about accessibility issues. It’s only 2%. Soon enough, you’ve whittled down your potential market to 90% of what it could have been.

Every site, whether it be for personal or professional reasons, needs to mark that line in the sand. If you’re running a content-heavy, large traffic site targetting a less than savvy crowd then maybe IE6 and FF2 support is critical. You want to capture as much of the market as you can. If you’re running a niche blog focused on tech issues then even IE6 might be safe to put on the ignore list.

But all the while, I’ll keep thinking about all those people I could be getting. Did they walk away with the best experience? Sometimes it hurts my head just to think about it. So now it’s your turn: Should we care about old browsers or fringe browsers? Or are we safe in our little bubble?

You can see both the problem and two workarounds on this test page. In brief, the problem occurred when I had a table cell containing a paragraph with an explicit width set. I did this through the style attribute, though tests show that for this bug, it doesn’t matter whether you use the attribute or assign it via a style sheet. Around these explicit-width paragraphs were div elements with width: 200%;, for bar-drawing purposes (it’s a little complicated). Everything was fine in 99% of cases. But as soon as the header text at the beginning of the row went to two lines of text, the explicit-width paragraphs doubled in width. What was 80.1% wide would be drawn as though it were 160.2% wide.

My hopefully understandable reaction was to say, “Whuh?”. I threw a few hasLayout triggers at the offending paragraph (relative position, zoom, etc.) and got nowhere. In the end I worked around the problem by telling IE6 and IE7 to not wrap text in the row headers of combo charts. (The bug is not present in IE8.)

I mentioned all this in my announcement post, and the ever-awesome Dan Wilkinson discovered that the problem could be fixed by setting all of the table rows to, say, height: 3em. Armed with that breakthrough, I experimented a little more and found that I could actually set the offending table row’s height to 2.75em and still have things work as intended. Below that and the paragraph widths doubled.

Then I lowered the line-height of the headers to 1 and found that I could take the overall row’s height as low as 2.33em before triggering the bug. And that’s when it dawned: the bug was triggered by the layout height of the header cell’s content being taller than the content of the cell containing the paragraph, and not explicitly declaring styles that would make the data cell as tall as or taller than the height needed to have the header cell contain its content.

Okay, that’s a little dense. Let me step through the symptoms and two found workarounds to see if that clears it up:

1. The data cell always had a single line of text. The bug was triggered by having the header cell go to two lines of text, whereas it was not if the header cell had a single line of text.
2. If the row’s height is explicitly set to a value equal to or greater than the header cell’s content, the bug is not triggered.
3. Alternatively, if the height of the data cell is set or fored to be equal to or greater than the height of the header cell, the bug is not triggered. This can be done with an explicit height or with added top and bottom padding or by adding top and bottom margins to the paragraphs in the cell.

Some side tests I did indicate that the header cell is not needed to trigger the bug. In other words, the problem could happen even if there are only data cells in the row. Furthermore, I found that the width-scaling was directly affected by the width of the wrapping div, and thus the widths were doubling only because I had the div’s width set to 200%. If I set it to 150% instead of 200%, then the paragraphs only got half again as wide instead of doubling. That seems to make sense until you see it in action. When I say the paragraphs got half again as wide, I mean that instead of being 75% as wide as the div, they were 112.5% as wide as the div. If I set the div’s width to 200%, then they were 150% the width of the div.

So. As I say, this bug does not affect IE8, so that’s good, and it can be worked around in IE6 and IE7, which is even better. The problem would be if you didn’t know how tall your cells might get—in my case, I can be (reasonably) sure that the tallest a cell’s content will ever get is two lines of text, and by setting an explicit line-height on the headers I can know how tall I have to make the rows in order to avoid the bug.

Another day, another workaround!