• Keys to Consistent CSS

  by Frederick Townes on May 1, 2007 101No Commentshttp%3A%2F%2Fwww.w3-edge.com%2Fweblog%2F2007%2F05%2Fkeys-to-consistent-css%2FKeys+to+Consistent+CSS2007-05-02+04%3A40%3A59Frederick+Towneshttp%3A%2F%2Fwww.w3-edge.com%2Fweblog%2Fkeys-to-consistent-css%2F

  Eric Meyer has done it again (yes I’m a cult follower). It was awesome to sit through the live walk through of most of the principles that Eric presented in his final version.

  What Eric has decided to do with the support of many interested participants is create a baseline for many of the HTML elements that behave inconsistently from browser to browser. The result being a fantastic snippet of code that removes the subtleties that often cause anomalies in the render of pages in Internet Explorer 6/7 (and in other browsers too).

  For those that just want to see the code:

  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,
  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-weight: inherit;
  	font-style: inherit;
  	font-size: 100%;
  	font-family: inherit;
  	vertical-align: baseline;
  	background: transparent;
  }
  /* remember to define focus styles! */
  :focus {
  	outline: 0;
  }
  body {
  	line-height: 1;
  	color: black;
  	background: white;
  }
  ol, ul {
  	list-style: none;
  }
  /* tables still need 'cellspacing="0"' in the markup */
  table {
  	border-collapse: collapse;
  	border-spacing: 0;
  }
  caption, th, td {
  	text-align: left;
  	font-weight: normal;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
  	content: "";
  }
  blockquote, q {
  	quotes: "" "";
  }
  

  You can see that nearly every element is considered above and is “reset” to values to provide sure bedrock for styling a document.

  I suppose I should go to mention another great tip from Eric, while on the topic of consistency and this one points to to consistency between the CSS “functionality” of internet explorer 6 and internet explorer 7. Dean Edwards put together great javascript code which enables coders to focus on CSS production for IE 7 and not have to worry support for behavior that doesn’t exist in IE 6 — definitely worth a look.

  Tags:

  • CSS frameworks,
  • production

  • Reddit
  • Stumbleupon
  • Slashdot
  • Digg
  • Yahoo! buzz
  • Del.icio.us
  • Technorati Cosmos
  • Twitter
  • Facebook

This entry was posted on Tuesday, May 1st, 2007 at 11:40 pm and is filed under CSS / Markup / Code. You can follow any responses to this entry through the RSS 2.0 feed.