debugCSS : (X)HTML debugging tool built with CSS

debugCSS is meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML.

Not all "errors" are created equally, so they are color coded to highlight severity. Green is "probably not a big problem", yellow is "worth looking at" and red is "you really should fix this."

Click and drag the link below to your bookmark toolbar to install - or right click "Bookmark This Link".

debugCSS

Get the source code on GitHub : imbrianj/debugCSS

• input:not([id])

  example

• select:not([id])

  Test 1 example

• textarea:not([id])

  No ID example

• *[role="slider"]:not([aria-valuemin])

• *[role="slider"]:not([aria-valuemax])

• *[role="slider"]:not([aria-valuenow])

• *[role="slider"]:not([aria-valuenow])

• input[type="number"]:not([min])

  example

• input[type="number"]:not([max])

  example

• div:empty

• span:empty

• p:empty

• ul:empty

• ol:empty

• dl:empty

• li:empty

• dt:empty

• dd:empty

  Test

• a:empty

• *[title]:empty

• img:not([alt])

  Some tag

• img[alt=""]

  Some tag
• 

  spacer.gif used

• button:empty

• a:not([href])

  Link with no href

• a[href="#"]

  Link with # href

• a[href=""]

  Link with no href value

• a[href*=javascript\:]

  Link with javascript href

• a[onclick]

  Link with onclick attribute

• a[onmouseover]

  Link with onmouseover attribute

• a[onmouseout]

  Link with onmouseout attribute

• label:not([for])

  Label without for attribute

• div[role="img"]:not([aria-label])

  Div with img role and no aria-label

• form > *:not(fieldset)

  Form has no fieldset

• fieldset *:not(legend):first-child

  First child of a fieldset is not a legend

• iframe:not([title])

  Some tag