Merged pull request redroot#1 from MrNibbles/master.

Added pop-over error description to supported elements
meawwat · Apr 27, 2011 · 60694ae · 60694ae
2 parents 16cdab8 + 6fd5167
commit 60694ae
Show file tree

Hide file tree

Showing 2 changed files with 255 additions and 5 deletions.
diff --git a/README.markdown b/README.markdown
@@ -13,7 +13,7 @@ for flags such as:
 +	__Deprecated and Non-W3C Elements__ - see [http://www.w3.org/TR/html5/obsolete.html#obsolete] (W3C.org's article on obselete tags)
 +	__Non-W3C Attributes__ - as above, just the most important ones since there are MANY
 
-Beyond these three labels you must use some sort of inspector, such as Firebug, to determine the reason that an element has been flagged.
+Hovering over most elements will cause a description to be displayed in the top left, or top right corner of the screen.
 
 ### Why should I use it?
 

diff --git a/holmes.css b/holmes.css
@@ -9,6 +9,7 @@
 *	potentially invalid or erroneous HTML(5) markup
 *
 *	@author 		Luke Williams
+*	@contributors	Anthony Mann (hover based debug info)
 *	@author_url		http://www.red-root.com
 *	@project_url	http://github.com/redroot/holmes/
 *	@version		1.0.1 (25/04/2011)
@@ -42,23 +43,189 @@
 *
 */
 
+/* ================== */
+/* = Warning Style = */
+/* ================== */
+
+/* - LINKS - */
+.holmes-debug a[href="#"]:hover::after,
+.holmes-debug a[href^="javascript"]:hover::after,
+.holmes-debug a:not([title]):hover::after,
+.holmes-debug a[title=""]:hover::after,
+
+/* - EMPTY ELEMENTS - */
+.holmes-debug div:empty:hover::after, 
+.holmes-debug span:empty:hover::after,
+.holmes-debug li:empty:hover::after, 
+.holmes-debug p:empty:hover::after,
+.holmes-debug td:empty:hover::after, 
+.holmes-debug th:empty:hover::after,
+
+/* - MISC ATTRIBUTES - */
+.holmes-debug [style]:hover::after {
+	border-radius: 0.5em;
+	display:block;
+	padding: 1em;
+	margin: 1em;
+	background: #fd0;
+	position: fixed;
+	color: #000;
+	left: 0px;
+	top: 0px;
+	z-index: 9999;
+}
+
+
+/* =============== */
+/* = Error Style = */
+/* =============== */
+
+/* - LINKS - */
+.holmes-debug a:not([href]):hover::after,
+.holmes-debug a[href=""]:hover::after,
+
+/* - IMAGES - */
+.holmes-debug img:not([alt]):hover:after,
+.holmes-debug img[alt=""]:hover::after,
+
+/* MISC ATTRIBUTES */
+.holmes-debug label:not([for]):hover::after,
+.holmes-debug label[for=""]:hover::after,
+
+.holmes-debug input:not([name]):hover::after,
+.holmes-debug input[name=""]:hover::after,
+
+.holmes-debug select:not([name]):hover::after,
+.holmes-debug select[name=""]:hover::after,
+
+.holmes-debug textarea:not([name]):hover::after,
+.holmes-debug textarea[name=""]:hover::after,
+
+.holmes-debug abbr:not([title]):hover::after,
+.holmes-debug abbr[title=""]:hover::after,
+
+.holmes-debug [class=""]:hover::after,
+.holmes-debug [id=""]:hover::after,
+
+.holmes-debug table:not([summary]):hover::after,
+.holmes-debug table[summary=""]:hover::after {
+	border-radius: 0.5em;
+	display:block;
+	padding: 1em;
+	margin: 1em;
+	background: red;
+	position: fixed;
+	color: #000;
+	left: 0px;
+	top: 0px;
+	z-index: 9999;
+}
+
+/* ===================== */
+/* = Deprecated Styles = */
+/* ===================== */
+
+/* - DEPRECATED & NON-W3C CONTENT ELEMENTS - */
+.holmes-debug applet:hover::after, 
+.holmes-debug acronym:hover::after, 
+.holmes-debug center:hover::after, 
+.holmes-debug dir:hover::after, 
+.holmes-debug font:hover::after,   
+.holmes-debug strike:hover::after, 
+.holmes-debug u:hover::after, 
+.holmes-debug big:hover::after,
+.holmes-debug tt:hover::after,
+.holmes-debug marquee:hover::after,
+.holmes-debug plaintext:hover::after,  
+.holmes-debug xmp:hover::after,
+
+.holmes-debug *[bordercolor]:hover::after, 
+.holmes-debug *[bordercolordark]:hover::after, 
+.holmes-debug *[bordercolorlight]:hover::after,
+
+.holmes-debug table[frame]:hover::after {
+	border-radius: 0.5em;
+	display:block;
+	padding: 1em;
+	margin: 1em;
+	background: red;
+	position: fixed;
+	background: darkgrey;
+	color: #000;
+	left: 0px;
+	top: 0px;
+	z-index: 9999;
+}
+
+/* ================================ */
+/* = Deprecated body style Styles = */
+/* ================================ */
+
+body.holmes-debug[bgproperties]:hover::after, 
+body.holmes-debug[topmargin]:hover::after, 
+body.holmes-debug[rightmargin]:hover::after, 
+body.holmes-debug[bottommargin]:hover::after, 
+body.holmes-debug[leftmargin]:hover::after { 
+	border-radius: 0.5em;
+	display:block;
+	padding: 1em;
+	margin: 1em;
+	background: red;
+	position: fixed;
+	background: darkgrey;
+	color: #000;
+	bottom: 0px;
+	right: 0px;
+	z-index: 9999;
+
+	/* Bottom right due to whole body coverage */
+}
+
+/* Fixes the case where a table may contain both errors and warnings - potentially other cases of this elsewhere */
+
+.holmes-debug td:empty:hover::after, 
+.holmes-debug th:empty:hover::after {
+	top: 4em;
+}
 
 /**************
 	LINKS 
 **************/
 
+/* Errors */
+
 .holmes-debug a:not([href]),
 .holmes-debug a[href=""] {
 	outline: 3px solid red;
 }
 
+	.holmes-debug a:not([href]):hover::after,
+	.holmes-debug a[href=""]:hover::after {
+		content:'Missing href attribute';
+	}
+
+
 .holmes-debug a[href="#"],
 .holmes-debug a[href^="javascript"],
 .holmes-debug a:not([title]),
 .holmes-debug a[title=""]{
 	outline: 3px solid #fd0;
 }
 
+	.holmes-debug a[href="#"]:hover:after{
+		content:"href='#'";
+	}
+
+	.holmes-debug a[href^="javascript"]:hover:after{
+		content:'href="javascript"';
+	}
+
+	.holmes-debug a:not([title]):hover::after,
+	.holmes-debug a[title=""]:hover::after {
+		content:'Missing title attribute';
+	}
+
+
 /**************
 	IMAGES 
 **************/
@@ -68,32 +235,68 @@
 	outline: 3px solid red;
 }
 
+	.holmes-debug img:not([alt]):hover::after,
+	.holmes-debug img[alt=""]:hover::after {
+		content:'Missing alt attribute';
+	}
+
 /*************************
 	MISC ATTRIBUTES
 **************************/
 
 .holmes-debug label:not([for]),
 .holmes-debug label[for=""],
+
 .holmes-debug input:not([name]),
 .holmes-debug input[name=""],
+
 .holmes-debug select:not([name]),
 .holmes-debug select[name=""],
+
 .holmes-debug textarea:not([name]),
 .holmes-debug textarea[name=""],
 
 .holmes-debug abbr:not([title]),
 .holmes-debug abbr[title=""],
 
 .holmes-debug [class=""],
-.holmes-debug [id=""] {
-	outline: 3px solid red;
-}
+.holmes-debug [id=""],
 
 .holmes-debug table:not([summary]),
 .holmes-debug table[summary=""]{
-	border: 3px solid red;
+	outline: 3px solid red;
 }
 
+	.holmes-debug label:not([for]):hover::after,
+	.holmes-debug label[for=""]:hover::after{
+		content:'Missing for attribute';
+	}
+
+	.holmes-debug input:not([name]):hover::after,
+	.holmes-debug input[name=""]:hover::after,
+	.holmes-debug select:not([name]):hover::after,
+	.holmes-debug select[name=""]:hover::after,
+	.holmes-debug textarea:not([name]):hover::after,
+	.holmes-debug textarea[name=""]:hover::after {
+		content:'Missing name attribute';
+	}
+
+	.holmes-debug abbr:not([title]):hover::after,
+	.holmes-debug abbr[title=""]:hover::after {
+		content:'Missing title attribute';
+	}
+
+	.holmes-debug [class=""]:hover::after {
+		content:'Blank class attribute';
+	}
+	.holmes-debug [id=""]:hover::after {
+		content:'Blank id attribute';
+	}
+
+	.holmes-debug table:not([summary]):hover::after,
+	.holmes-debug table[summary=""]:hover::after {
+		content:'Missing summary attribute';
+	}
 /* 
 	Warnings here, for inline styles and event calls, 
 	ideally they should be external (CSS) and JS applied by JS scripts,
@@ -110,6 +313,10 @@
  */{ 
 	outline: 3px solid #fd0;
  }
+
+	.holmes-debug [style]:hover::after {
+		content: 'Element has inline styles';
+	}
 
 /*************************************************************************
 	DEPRECATED & NON-W3C CONTENT ELEMENTS (darkgrey)
@@ -133,6 +340,23 @@
 	border: 3px solid darkgrey;
 }
 
+	.holmes-debug applet:hover::after, 
+	.holmes-debug acronym:hover::after, 
+	.holmes-debug center:hover::after, 
+	.holmes-debug dir:hover::after, 
+	.holmes-debug font:hover::after,   
+	.holmes-debug strike:hover::after, 
+	.holmes-debug u:hover::after, 
+	/*.holmes-debug i, apparently not deprecated  
+	.holmes-debug b,  apparently not deprecated  */
+	.holmes-debug big:hover::after,
+	.holmes-debug tt:hover::after,
+	.holmes-debug marquee:hover::after, /* i've left this is because its naff bascially */
+	.holmes-debug plaintext:hover::after,  
+	.holmes-debug xmp:hover::after {
+		content:'Deprecated or Non-W3C element';
+	}
+
 /************************************************************************
 	DEPRECATED NON-W3C ATTRIBUTES (darkgrey)
 	Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
@@ -145,6 +369,16 @@ body.holmes-debug[bottommargin],
 body.holmes-debug[leftmargin] {
 	outline: 3px solid darkgrey;
 }
+	body.holmes-debug[bgproperties]:hover::after {
+		content:'Deprecated or Non-W3C body attribute bgproperties';
+	}
+
+	body.holmes-debug[topmargin]:hover::after,
+	body.holmes-debug[rightmargin]:hover::after, 
+	body.holmes-debug[bottommargin]:hover::after, 
+	body.holmes-debug[leftmargin]:hover::after {
+		content:'Deprecated or Non-W3C body attribute *margin';
+	}	
 
 .holmes-debug *[bordercolor], 
 .holmes-debug *[bordercolordark], 
@@ -153,6 +387,13 @@ body.holmes-debug[leftmargin] {
 	border: 3px solid darkgrey;
 }
 
+	.holmes-debug *[bordercolor]:hover::after, 
+	.holmes-debug *[bordercolordark]:hover::after, 
+	.holmes-debug *[bordercolorlight]:hover::after,
+	.holmes-debug table[frame]:hover::after {
+		content:'Deprecated or Non-W3C body attribute bordercolor';
+	}
+
 /*********************
 	EMPTY ELEMENTS (warning level for now)
 **********************/
@@ -165,3 +406,12 @@ body.holmes-debug[leftmargin] {
 .holmes-debug th:empty {
 	border: 3px solid #fd0;
 }
+
+	.holmes-debug div:empty:hover::after, 
+	.holmes-debug span:empty:hover::after,
+	.holmes-debug li:empty:hover::after, 
+	.holmes-debug p:empty:hover::after,
+	.holmes-debug td:empty:hover::after, 
+	.holmes-debug th:empty:hover::after {
+		content:'Empty element!';
+	}