Last active
December 19, 2015 15:48
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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