An Event Apart: Debug/Reboot

Day two....and begin!

One way to do debugging is to bring in a user stylesheet, For example, the following will highlight empty elements:

div: empty, span: empty,
li: empty, p: empty,
td: empty, th: empty {
padding: 0.5 em;
background: yellow;
}

Find any element that has a style attribute and any element that has an empty class or id and highlight it:

*[style], font, center {
outline: 5px solid red;
}
*[class=""], *[id=""] {outline: 5px dotted red;
}

Find images with no or empty alt/title

img[alt=""] {
border: 3px dotted red;
}
img: not ([alt]) {
border: 5px solid red;
}
img [title=""] {
outline: 3px dotted fuchsia;
}
img: not([title]) {
outline: 5px solid fuchsia;
}

Outlines are just like borders, but they don't participate in the layout - don't force things to move around.

Any table that doesn't have a summary, give me an outline:

table: not([summary]) {
outline: 5px solid red;
}
table {summary="" {
outline: 3px dotted red;
}
th {border: 2px solid red;
}
td[scope="col"], th[scope="row"] {
border: none;
}

Scope associates the content of a th with the cells in its column or row.

Find any "a" that has an href but doesn't have a title.

a[href]: not ([title]) {
border: 5px solid red;
}
a[title=""] {
outline: 3px dotted red;
}
a[href="#"] {
background: lime;
}
a[href=""] {
background: fuchsia;
}

You have to modify this to get it to work in IE.

Trying to catch things you might have missed that validators aren't going to help with:

html {
background: cyan;
} you'll see if you set a background color

table {
border: 5px solid red;
} find me layout tables in site i inherited so i can get rid of them

div div div div div {
outline: 1px dotted #CCC;
} warn me when i have excessively nested divs

form: not ([action]),
form: not ([method]) {
outline: 5px solid lime;
} I want to know about forms that don't have an action or method

blockquote {
color: #Foo;
font-weight: bold;
}

blockquote > * {
color: #000;
font-weight: normal;
} warn me if my blockquote has just text in it and no element


Resetting: set elements to a common baseline.

(Ok, I'm not retyping all the reset stuff....if you need it, then get your butt to one of these events ;-) )