This page demonstrates the features of Eric Meyer's Diagnostic Cascading Style Sheets.
This page contains examples of the errors that the diagnostic CSS will catch. Each of the mistakes on this page is clearly outlined. Repairs are easily made by referring to the color key. Once all errors are corrected, the debug portion of the diagnostic CSS may be removed and the page is fit for automated validation testing of the (X)HTML and CSS for conformance and accessibility. Most automated validators will fail to alert you to some of the errors that are revealed using the diagnostic CSS.
An example also exists without the errors.
| col one | col three | |
|---|---|---|
| cell one | cell two | cell three |
| cell one | cell three |
Eric Meyer's CSS Tools
Diagnostic CSS (download: http://meyerweb.com/eric/tools/css/diagnostics/index.html)
"A set of styles to call eye-watering attention to bad markup, missing or empty attributes, and so on. In both advanced CSS and iE-friendly versions!" Read a short article about Diagnostic CSS:
http://24ways.org/2007/diagnostic-styling Reset CSS (download: http://meyerweb.com/eric/tools/css/reset/reset.css)
"Smooths out many browser inconsistencies by explicitly assigning values to things like element margins and padding, forcing all elements to have the same font size, and so on. You can find resets in most CSS frameworks, and they're a great starting point for creating your own "baseline" styles." Read a short article about Reset CSS:
http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
List of errors on this page, in order from top to bottom and left to right:
- Empty span.
- Missing href.
- Missing href title.
- No href title.
- Inline text decoration using abbreviations like "b" are depreciated and will not validate in XHTML strict -- move text decoration to the CSS.
- no img alt and no img title.
- Empty CSS class
- Empty paragraph
- Inline table decoration like borders belongs in the CSS.
- Empty scope for a table header.
- Empty table header.
- Empty table cell -- tables are for data, not layout. Use tableless designs.
- Inline fonts and layout prevent the user from over-riding the CSS with one more suited to their needs.
- Empty list item.