Code bits: reset / default stylesheet

13th February 2008 by Jason C. Filed under: Code-bits

Browser inconsistencies are something that drives a sane web developer mad. For example, last week, I was trying to shoehorn a fairly simple-looking design into some html/css code, ready to be dynamicised (yes, I did just write dynamicised. Sorry.) Unfortunately, what happened, as always, was that Safari used a different line-height to everyone else, IE used a different heading size, and Firefox was absolutely perfect, because that’s what I was doing most of my testing with.

I come across this problem all the time, as you can probably imaging, and my solution is to have a base css file that I then modify and extend for every project. Doing that largely eliminates inconsistencies, or at least makes inconsistencies consistent project after project.

Eric Meyer’s ‘CSS reset’ stylesheet has been knocking around for some time, and is a useful resource to use or just to look at and understand why he’s done what he’s done. Anyway, he’s now given it a permanent home on his site, so there’s somewhere to check back for updates.

http://meyerweb.com/eric/tools/css/reset/

Here it is in full…

/* v1.0 | 20080212 */

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;
}

WCAG Cheatsheet

2nd July 2007 by Jason C. Filed under: Accessibility

While making accessible websites is accepted practice by any web devloper worth his or her salt, sometimes we need help identifying exactly how to. The W3C‘s WCAG are here to help us, and our clients.

Trouble is, they’re quite in-depth and long-winded. Thankfully now, though I found something on my travels that will help me tick as many of the accessibility boxes as possible. Remembering of course that making websites accessible is much more than just crossing off items from a list.

Here is is: the WCAG cheatsheet