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.