Description: With judicious use of CSS, you can visually call out problems in your markup, as well as wipe out a great deal of browser inconsistency. This exploration of how (and why) will illuminate some of the dustier, darker corners of CSS in the service of gaining a deeper understanding of CSS and browser behavior.
About Eric Meyer:
Debugging = using CSS in a diagnostic way to find problems in your layout.
Why use CSS when we have validators?
Validators are a way to see if you have obvious mistakes. Everyone should use link checkers, make sure your links works.
You can set up a debug style sheet that will highlight things with problems, links with no href for example.
Pull up the debug style sheet by adding a user style sheet in your browser.
Debug style sheet uses new and interesting selectors and obviously won't work in IE6 but you're not developing in IE right?
The debug style sheet:
Find things that are empty: div:empty {background: yellow;}
This can make it very obvious if your CMS is screwing up and spitting out empty elements.
Find things that aren't supposed to be there: *[style], font, center {outline: 5px solid red;}
Empty classes and ids: *[class=""], *[id=""] {outline: 5px solid red;}
|
Empty classes and ids: *[class=""], *[id=""] {outline: 5px solid| red;}
Find empty alt attributes, missing alts, empty title and missing title:
img[alt=""] {border: 3px dotted red;}
img:not([alt]) {border: 5px solid red;}
Outline v. Border: Border affects layout, outline doesn't. Outline goes around the border. Makes it possible to have 2 borders... but not in IE.
Find tables with no summary or an empty summary.
You can turn on red borders for everything and then turn it off if it meets criteria so only the ones that don't meet your criteria stand out.
Look up scope on th tags: Specifies if this cell provides header information for the rest of the row that contains it (row), or for the rest of the column (col), or for the rest of the row group that contains it (rowgroup), or for the rest of the column group that contains it
Find anchors with no title, empty title, href="#" and empty href.
What about IE? There's a version that works in IE7 and up.
Switch outline with borders, outline doesn't work in IE.
For IE give everything a border and then alter it based on criteria.
Personal opinion: Don't use IE to develop.
IE don;t do the "not" selector.
Another aspect of debugging: Making sure you set a body background colour, finding tables, finding too many levels of divs (div div div div div div div {}), find forms without action or method, finding form elements not properly marked up (form > input {} - use a fieldset in between), blockquotes also need block level elements in them (<blockquote><p>).
Find the style sheet your browser uses. It's easy on a PC, search html.css.
Reset style sheets: Can't reset forms because styling forms is all over the place. Unpredictable.
Reboot: How to develop with a reset style sheet. Things he had to consider when building the reset style sheet.
Eric's blog post about diagnostic CSS:
Eric's blog post about reset.css:
His reset.css is meant as a starting place. You should alter it for your needs.
Alter it until it's YOUR reset, YOUR default.
Question: Can you use regular expressions in your attribute selectors?
Answer: No. But you can do "starts with" (^=) and "ends with" ($=). Both work in IE7.
Question: Should you use captions on tables?
Answer: If it makes sense. Every table should have a summary.
End
Matt
Copyright 2012 Scribble Technologies Inc. All Rights Reserved.
