An Event Apart: Debug/Reboot

by Luke Wroblewski August 18, 2008

Eric Meyer’s Debug/Reboot presentation at An Event Apart San Francisco discussed the use of cascading style sheets (CSS) for debugging HTML code and resetting defaults across multiple Web browsers.

  • Why debug in the first place? Automated validation tools don’t cover all aspects of development you might want to test.
  • Empty pseudo-class can find elements without content and highlight them.
  • Can use CSS to find FONT and CENTER tags in mark-up or elements that do not have values specified.
  • Images that might have problems can also be found. CSS to locate all images with empty alt attribute.
  • Outlines do not shift columns around. Borders do. Can use both together to create dual strokes.
  • CSS may be used to locate links without title attributes, links without hrefs, etc.
  • Reset style sheet–zero out margins, padding, font-size and baseline for just about every element. Purpose of a reset style sheet is to remove differences between browsers. Default margins and heights differ between browsers.
  • Reset style sheets can remove bullets, quotes in blockquotes, padding around elements, etc. Don’t turn off focus styles in reset style sheet.
  • Tables still need cellspacing set to zero in the HTML markup.
  • Why list all elements in reset style sheet. If use “*” to apply to all elements, form elements will get reset as well –no borders or padding, etc.
  • Reset styles are a foundation to be built on. Variants are needed to make the reset styles work for you.