forked from redroot/holmes
-
Notifications
You must be signed in to change notification settings - Fork 0
/
holmes.css
167 lines (148 loc) · 3.98 KB
/
holmes.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
@charset "UTF-8";
/**
* O
* \ HOLMES
*
* ------------------------
*
* Holmes is stand-alone diagnostic CSS stylesheet that will highlight
* potentially invalid or erroneous HTML(5) markup
*
* @author Luke Williams
* @author_url http://www.red-root.com
* @project_url http://github.com/redroot/holmes/
* @version 1.0.1 (25/04/2011)
*
* @copyright Copyright Luke Williams 2011-
*
* ------------------------
*
* How does it work?
*
* Adding the class 'holmes-debug' to any element, ideally the body or html tag,
* will set debug styles for any elements within that element.
*
* e.g.:
* <body class="holmes-debug">
*
* ------------------------
*
* 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
*
* -------------------------
*
* Notes
*
* - I have chosen to keep all separate types of diagnostis separate, despite sharing
* common CSS styles, to maintain readability
*
*/
/**************
LINKS
**************/
.holmes-debug a:not([href]),
.holmes-debug a[href=""] {
outline: 3px solid red;
}
.holmes-debug a[href="#"],
.holmes-debug a[href^="javascript"],
.holmes-debug a:not([title]),
.holmes-debug a[title=""]{
outline: 3px solid #fd0;
}
/**************
IMAGES
**************/
.holmes-debug img:not([alt]),
.holmes-debug img[alt=""] {
outline: 3px solid red;
}
/*************************
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 table:not([summary]),
.holmes-debug table[summary=""]{
border: 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)
*/
.holmes-debug [style]/*,
.holmes-debug [onclick],
.holmes-debug [onblur],
.holmes-debug [onfocus],
.holmes-debug [onselect],
.holmes-debug [onload],
.holmes-debug [onunload]
*/{
outline: 3px solid #fd0;
}
/*************************************************************************
DEPRECATED & NON-W3C CONTENT ELEMENTS (darkgrey)
Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
*************************************************************************/
.holmes-debug applet,
.holmes-debug acronym,
.holmes-debug center,
.holmes-debug dir,
.holmes-debug font,
.holmes-debug strike,
.holmes-debug u,
/*.holmes-debug i, apparently not deprecated
.holmes-debug b, apparently not deprecated */
.holmes-debug big,
.holmes-debug tt,
.holmes-debug marquee, /* i've left this is because its naff bascially */
.holmes-debug plaintext,
.holmes-debug xmp {
border: 3px solid darkgrey;
}
/************************************************************************
DEPRECATED NON-W3C ATTRIBUTES (darkgrey)
Based largely on http://www.w3.org/TR/html5/obsolete.html#obsolete
************************************************************************/
body.holmes-debug[bgproperties],
body.holmes-debug[topmargin],
body.holmes-debug[rightmargin],
body.holmes-debug[bottommargin],
body.holmes-debug[leftmargin] {
outline: 3px solid darkgrey;
}
.holmes-debug *[bordercolor],
.holmes-debug *[bordercolordark],
.holmes-debug *[bordercolorlight],
.holmes-debug table[frame] {
border: 3px solid darkgrey;
}
/*********************
EMPTY ELEMENTS (warning level for now)
**********************/
.holmes-debug div:empty,
.holmes-debug span:empty,
.holmes-debug li:empty,
.holmes-debug p:empty,
.holmes-debug td:empty,
.holmes-debug th:empty {
border: 3px solid #fd0;
}