My stylesheet and the why

:points: @ title, that was named "reset stylesheet and the why", to the fear of google crawler might picked that up, I changed it.

What is reset stylesheet?

I'll be collecting reset stylesheet, in preparation if I'm going to need them later.

Reset stylesheet is a way to make our site appear the same in all known web browser (not dead ones hopefully).

I know I have to think of html markup as contextual information rather than data caged by some rigid form. I am fine with my page displayed differently across web browser. But for a case where web browser default stylesheet hurt my aesthetic feeling, I need a weapon to fight them back.

I am not just collecting resets, I need to also document why the reset is necessary. This will take time, and luck. XD

So here are the list.

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,nav,section {
  display: block;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
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;
}
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
mark {
  font-style: italic;
  font-weight: bold;
}

There's too much in here, need to scale it down to pieces¹.

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

HTML5 reset¹.

I added margin and padding rule, because we are abusing list as navigational links, the context and behavior which we expected from list is different from how list normally works.

article, aside, dialog, figure, footer, header, hgroup, nav, section {
  display: block;
  zoom: 1;
}

Add zoom: 1 for IE6 might make it easier⁵.

blockquote {
  quotes: '"' '"' "'" "'";
}
blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}

Blockquote doesn’t have quotes by default³.

HTML5 reset set this to none ¹, and footnote 3 said it already is.

Use margin to change indentation. See blockquote html element.

fieldset:disabled,
input:disabled,
button:disabled,
select:disabled,
optgroup:disabled,
option:disabled,
textarea:disabled,
keygen:disabled,
command:disabled {
  cursor: not-allowed;
}

Make disabled controls more obviously disabled.

ins, mark {
  background-color: white;
  color: black;
}

HTML5 reset¹.

A background color should never be set without a text color².

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

Don't specify border-color and just use the text-color⁴.

Don't use cursor: help³.

a, a:focus {
  outline: 0
}

Big accessibility issue because keyboard users can't see the focused element².

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

Feed reader and non-CSS browsers such as Lynx will add quotation characters by default³.

I don't know what list this is.

• The body element has a 8px margin in some browsers, and a 8px padding in some others. If you want to be able to have div or other elements touch the borders of the viewport, you will need a body{margin:0; padding:0;}⁴.
• The ul and ol elements have a 40px space on the left. That space is either a padding-left or margin-left, depending on the browser. When you want to zero out this space, you have to specify margin-left:0; padding-left:0⁴.
• The top and bottom margins of the p and h1-6 elements are 1em in most browsers. But some may be using a pixel value instead (i think IE does, but i can’t guarantee that and i should test it). Setting p {margin: 1em 0;} is enough to avoid most inconsistencies, since for titles you’re very likely to give them precise margins when you end up styling them⁴.
• Default margin and padding for the fieldset element is a bit inconsistent from one browser to another. Setting fieldset {margin: 0; padding: 0;} is enough to fix this problem. Or you may choose to fix it when you end up using a fieldset element (which doesn’t happen that often if you know your HTML)⁴.
• The exact font-size for h1, h2, h3 elements is slightly different between IE and other browsers. Nothing major, but if you rely on the default font-size for your title you may have slight inconsistencies. I tend to style the global font-size and titles font-sizes at the very beginning of a project, avoiding that kind of issues⁴.

Footnotes.

1. An article about HTML5 reset stylesheet in html5doctor, and a link to HTML5 reset stylesheet project page at code.google.
2. From Martin Kliehm's comment in html5doctor.
3. From zcorpan's comment in html5doctor.
4. From Florent V's comment in html5doctor, also on this comment about web browser's default stylesheet.
5. From Paul Irish's comment in html5doctor.

Labels: CSS