Skip to content

Commit 58a350b

Browse files
imbrianjimbrianj
committed
Void element messages, table changes
Void elements now try to display the error messages before the next non-void sibling element. If none are found, the message is not displayed (but the node is still highlighted). Thank you to thierryk@ for his suggestions on table accessibility: removing summary, requiring caption.
1 parent 5f9a79b commit 58a350b

1 file changed

Lines changed: 32 additions & 25 deletions

File tree

‎debugCSS.css‎

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,15 @@
3131
/******************/
3232

3333
/* All errors should try to post a message explaining the problem. */
34-
table:not([summary]):after,
34+
table[summary]:after,
35+
table > *:first-child:not(caption):after,
3536
table > tr:after,
3637
table th:not([scope]):after,
3738
table thead td:after,
3839
table > colgroup ~ caption:after,
39-
table > thead ~ colgroup:after,
40-
table > tfoot ~ colgroup:after,
41-
table > tbody ~ colgroup:after,
40+
table > thead ~ colgroup + *:before,
41+
table > tfoot ~ colgroup + *:before,
42+
table > tbody ~ colgroup + *:before,
4243
table > thead ~ caption:after,
4344
table > tfoot ~ caption:after,
4445
table > tbody ~ caption:after,
@@ -69,10 +70,10 @@ dt:empty:after,
6970
dd:empty:after,
7071
a:empty:after,
7172
a a:after,
72-
img:not([alt]) + *:not(br):not(img):not(input):before,
73-
img:not([src]) + *:not(br):not(img):not(input):before,
74-
img[src=""] + *:not(br):not(img):not(input):before,
75-
img[src="#"] + *:not(br):not(img):not(input):before,
73+
img:not([alt]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before,
74+
img:not([src]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before,
75+
img[src=""] ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before,
76+
img[src="#"] ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before,
7677
a:not([href]):after,
7778
a[href="#"]:after,
7879
a[href*=javascript\:]:after,
@@ -101,13 +102,13 @@ ul > *:not(li):after,
101102
dl > *:not(dt):not(dd):after,
102103
form > *:not(fieldset):after,
103104
fieldset > *:not(legend):first-child:after,
104-
iframe:not([title]):after,
105+
iframe:not([title]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before,
105106
center:after,
106107
u:after,
107108
font:after,
108109
map:after,
109-
br + *:not(br):not(img):not(input):before,
110-
br + br + *:not(br):not(img):not(input):before,
110+
br ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before,
111+
br + br ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before,
111112
b:after,
112113
i:after,
113114
blink:after,
@@ -263,9 +264,14 @@ marquee:after,
263264
element.
264265
*/
265266

266-
table:not([summary]):after {
267+
table[summary]:after {
267268
background: #88FF88;
268-
content: 'Should you have a SUMMARY attribute on your TABLE?';
269+
content: 'SUMMARY attribute is obsolete';
270+
}
271+
272+
table > *:first-child:not(caption):after {
273+
background: #88FF88;
274+
content: 'Should you have a CAPTION on your TABLE?';
269275
}
270276

271277
table > tr:after {
@@ -288,9 +294,9 @@ table > colgroup ~ caption:after {
288294
content: 'CAPTION must come before COLGROUP';
289295
}
290296

291-
table > thead ~ colgroup:after,
292-
table > tfoot ~ colgroup:after,
293-
table > tbody ~ colgroup:after {
297+
table > thead ~ colgroup + *:before,
298+
table > tfoot ~ colgroup + *:before,
299+
table > tbody ~ colgroup + *:before {
294300
background: #FFFF88;
295301
content: 'COLGROUP must come before THEAD, TFOOT and TBODY';
296302
}
@@ -369,14 +375,14 @@ a a:after {
369375
content: 'A tag within another A tag - this looks like a bug';
370376
}
371377

372-
img:not([alt]) + *:not(br):not(img):not(input):before {
378+
img:not([alt]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before {
373379
background: #FFFF88;
374380
content: 'Image does not have an ALT attribute';
375381
}
376382

377-
img:not([src]) + *:not(br):not(img):not(input):before,
378-
img[src=""] + *:not(br):not(img):not(input):before,
379-
img[src="#"] + *:not(br):not(img):not(input):before, {
383+
img:not([src]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before,
384+
img[src=""] ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before,
385+
img[src="#"] ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before {
380386
background: #FF8888;
381387
content: 'IMG without proper SRC attribute. Serious implications for some browsers';
382388
}
@@ -449,8 +455,8 @@ fieldset > *:not(legend):first-child:after {
449455
content: 'Should your FIELDSET be using a LEGEND?';
450456
}
451457

452-
iframe:not([title]):after {
453-
background: #88FF88;
458+
iframe:not([title]) ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before {
459+
background: #FFFF88;
454460
content: 'IFRAME lacks TITLE attribute';
455461
}
456462

@@ -631,12 +637,12 @@ map:after {
631637
content: 'Is MAP appropriate here?';
632638
}
633639

634-
br + *:not(br):not(img):not(input):before {
640+
br ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(img):not(input):first-of-type:before {
635641
background: #88FF88;
636642
content: 'Is BR appropriate here?';
637643
}
638644

639-
br + br + *:not(br):not(img):not(input):before {
645+
br + br ~ *:not(area):not(base):not(br):not(col):not(embed):not(hr):not(iframe):not(img):not(input):first-of-type:before {
640646
background: #88FF88;
641647
content: 'Should you be using a P tag?';
642648
}
@@ -811,7 +817,8 @@ marquee {
811817
outline: 5px solid #FFFF88;
812818
}
813819

814-
table:not([summary]),
820+
table[summary],
821+
table > *:first-child:not(caption),
815822
table th:not([scope]),
816823
table thead td,
817824
table > tr:first-child:last-child,

0 commit comments

Comments
 (0)