Skip to content

Instantly share code, notes, and snippets.

@joaodubas
Last active December 19, 2015 15:48
Show Gist options
  • Save joaodubas/5978632 to your computer and use it in GitHub Desktop.
Save joaodubas/5978632 to your computer and use it in GitHub Desktop.
Take the idea from http://diagnosticss.github.io/ and add a warning message when hovering the element, so it became easier to understand what is the error.
/* inline styles */
[style] {
outline: 5px solid red;
}
[style]:hover::after {
content: "Inline style";
}
/* links */
a:not([href]), a[href=""] {
outline: 5px solid red;
}
a:not([href]):hover::after,
a[href]:hover::after {
content: "Link with no href or empty href.";
}
a[href="#"], a[href^="javascript"] {
outline: 5px solid yellow;
}
a[href="#"]:hover::after,
a[href^="javascript"]:hover::after {
content: "Link with href equal to hash or inline javascript call.";
}
a[target] {
outline: 5px solid yellow;
}
a[target]:hover::after {
content: "Link with target attr, this is bad.";
}
/* empty elements */
li:empty, p:empty, td:empty, th:empty {
outline: 5px solid yellow;
}
li:empty:hover::after,
p:empty:hover::after,
td:empty:hover::after,
th:empty:hover::after {
content: "Empty element.";
}
/* images */
img:not([alt]) {
outline: 5px solid red;
}
img:not([alt]):hover::after {
content: "Image without alt attr.";
}
img:not([width]):not([height]) {
outline: 5px solid red;
}
img:not([width]):not([height]) {
content: "Image without dimensions.";
}
/* forms */
form:not([action]) {
outline: 5px solid red;
}
form:not([action]):hover::after {
content: "Form without an action.";
}
input:not([type]), textarea:not([rows]):not([cols]) {
outline: 5px solid red;
}
input:not([type]):hover::after {
content: "Input without type.";
}
textarea:not([rows]):not([cols]) {
content: "Textarea without dimensions.";
}
input:not([name]), input[name=""],
select:not([name]), select[name=""],
textarea:not([name]), textarea[name=""] {
outline: 5px solid red;
}
input:not([name]):hover::after,
input[name=""]:hover::after,
select:not([name]):hover::after,
select[name=""]:hover::after,
textarea:not([name]):hover::after,
textarea[name=""]:hover::after {
content: "Field without name.";
}
input[type="submit"]:not([name]) {
outline: none;
}
input[type="submit"]:not([value]) {
outline: 5px solid red;
}
input[type="submit"]:not([value]):hover::after {
content: "Submit button without value.";
}
label:not([for]), label[for=""] {
outline: 5px solid yellow;
}
label:not([for]):hover::after,
label[for=""]:hover::after {
content: "Label without a related field.";
}
/* deprecated elements */
acronym, applet, basefont, bgsound, big, center, dir, font,
frame, frameset, isindex, listing, multicol, nextid, nobr,
noembed, noframes, plaintext, rb, s, spacer, strike, tt, u,
xmp, marquee, blink {
outline: 5px solid red;
}
acronym:hover::after,
applet:hover::after,
basefont:hover::after,
bgsound:hover::after,
big:hover::after,
center:hover::after,
dir:hover::after,
font:hover::after,
frame:hover::after,
frameset:hover::after,
isindex:hover::after,
listing:hover::after,
multicol:hover::after,
nextid:hover::after,
nobr:hover::after,
noembed:hover::after,
noframes:hover::after,
plaintext:hover::after,
rb:hover::after,
s:hover::after,
spacer:hover::after,
strike:hover::after,
tt:hover::after,
u:hover::after,
xmp:hover::after,
marquee:hover::after,
blink:hover::after {
content: "Deprecated elements.";
}
/* warn on hover */
/* inline style */
[style]:hover::after,
/* links */
a:not([href]):hover::after,
a[href=""]:hover::after,
a[href="#"]:hover::after,
a[href^="javascript"]:hover::after,
a[target]:hover::after,
/* empty elements */
li:empty:hover::after,
p:empty:hover::after,
td:empty:hover::after,
th:empty:hover::after,
/* images */
img:not([alt]):hover::after,
img:not([width]):not([height]):hover::after,
/* forms */
form:not([action]):hover::after,
input:not([type]):hover::after,
textarea:not([rows]):not([cols]):hover::after,
input:not([name]):hover::after,
input[name=""]:hover::after,
select:not([name]):hover::after,
select[name=""]:hover::after,
textarea:not([name]):hover::after,
textarea[name=""]:hover::after,
input[type="submit"]:not([name]):hover::after,
input[type="submit"]:not([value]):hover::after,
label:not([for]):hover::after,
label[for=""]:hover::after,
/* deprecated elements */
acronym:hover::after,
applet:hover::after,
basefont:hover::after,
bgsound:hover::after,
big:hover::after,
center:hover::after,
dir:hover::after,
font:hover::after,
frame:hover::after,
frameset:hover::after,
isindex:hover::after,
listing:hover::after,
multicol:hover::after,
nextid:hover::after,
nobr:hover::after,
noembed:hover::after,
noframes:hover::after,
plaintext:hover::after,
rb:hover::after,
s:hover::after,
spacer:hover::after,
strike:hover::after,
tt:hover::after,
u:hover::after,
xmp:hover::after,
marquee:hover::after,
blink:hover::after {
background: rgb(75, 75, 75);
background: rgba(75, 75, 75, 0.25);
border: 5px solid #999;
margin: -25%; padding: 10px;
width: 75%;
position: fixed; left: 50%; top: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
/* print styles only */
@media print {
form {
outline: 5px solid red;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment