Debug HTML using a modified version of holmes.css

debug.css

/**
*  This file was taken from  http://www.red-root.com/sandbox/holmes/
*  and adapted to remove some annoying warnings that I really don't care about.
*  Also removed .holmes-debug namespace, so I can just include stylesheet as following.
*
*    <%= stylesheet_link_tag "debug" if Rails.env.development? %>
*
*  ------------------------
*
*  Debug colours and what they mean
*
*  - RED          denotes an error, invalid markup or a missing attribute
*  - YELLOW       denotes a warning, so potentionally erroneous markup or bad practice
*  - DARK GREY    denotes a deprecated element or element with deprecated or Non-W3C attributes
*  - PURPLE       denotes missing translation
*
*  -------------------------
*
*  Notes
*
*  -   I have chosen to keep all separate types of diagnostis separate, despite sharing
*    common CSS styles, to maintain readability
*
*/


/**************
  LINKS
**************/

a:not([href]),
a[href=""] {
  outline: 3px solid red;
}

a[href="#"],
a[href^="javascript"] {
  outline: 3px solid #fd0;
}

/**************
  IMAGES
**************/

img:not([alt]),
img[alt=""] {
  outline: 3px solid red;
}

/*************************
  MISC ATTRIBUTES
**************************/

label:not([for]),
label[for=""],
input:not([name]),
input[name=""],
select:not([name]),
select[name=""],
textarea:not([name]),
textarea[name=""],

abbr:not([title]),
abbr[title=""],

[class=""],
[id=""] {
  outline: 3px solid red;
}

/*
  Warnings here, for inline styles and event calls,
  ideally they should be external (CSS) and JS applied by JS scripts,
  keep markup purely presentational!
  (not sure about the js yet)
*/
[style]/*,
[onclick],
[onblur],
[onfocus],
[onselect],
[onload],
[onunload]
 */{
  outline: 3px solid #fd0;
 }

/*************************************************************************
  DEPRECATED & NON-W3C CONTENT ELEMENTS (darkgrey)
  Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
*************************************************************************/

applet,
acronym,
center,
dir,
font,
strike,
u,
/*i, apparently not deprecated
b,  apparently not deprecated  */
big,
tt,
marquee, /* i've left this is because its naff bascially */
plaintext,
xmp {
  outline: 3px solid darkgrey;
}

/************************************************************************
  DEPRECATED NON-W3C ATTRIBUTES (darkgrey)
  Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
************************************************************************/

body[bgproperties],
body[topmargin],
body[rightmargin],
body[bottommargin],
body[leftmargin] {
  outline: 3px solid darkgrey;
}

*[bordercolor],
*[bordercolordark],
*[bordercolorlight],
table[frame] {
  outline: 3px solid darkgrey;
}

/*********************
  EMPTY ELEMENTS (warning level for now)
**********************/

div:empty,
span:empty,
li:empty,
p:empty,
td:empty,
th:empty {
  outline: 3px solid #fd0;
}

/*********************
  MISSING TRANSLATIONS
**********************/
.translation_missing {
  outline: 3px solid #B516A9;
}