Skip to content

Commit 5f9a79b

Browse files
committed
Try to display error notes for void elements
Void elements (input, img, br) cannot show CSS content. Instead of relying on a user inspecting an element to find the associated error code hidden in a developer tool - try to surface that message with the next available non-void element. Still not perfect (if an offending img tag has no siblings, for example) - but this should help a bit, especially since the offending image will still be outlined.
1 parent 3a7a042 commit 5f9a79b

1 file changed

Lines changed: 12 additions & 12 deletions

File tree

‎debugCSS.css‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,10 @@ dt:empty:after,
6969
dd:empty:after,
7070
a:empty:after,
7171
a a:after,
72-
img:not([alt]):after,
73-
img:not([src]):after,
74-
img[src=""]:after,
75-
img[src="#"]: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,
7676
a:not([href]):after,
7777
a[href="#"]:after,
7878
a[href*=javascript\:]:after,
@@ -106,8 +106,8 @@ center:after,
106106
u:after,
107107
font:after,
108108
map:after,
109-
br + *:not(br):before,
110-
br + br + *:before,
109+
br + *:not(br):not(img):not(input):before,
110+
br + br + *:not(br):not(img):not(input):before,
111111
b:after,
112112
i:after,
113113
blink:after,
@@ -369,14 +369,14 @@ a a:after {
369369
content: 'A tag within another A tag - this looks like a bug';
370370
}
371371

372-
img:not([alt]):after {
372+
img:not([alt]) + *:not(br):not(img):not(input):before {
373373
background: #FFFF88;
374374
content: 'Image does not have an ALT attribute';
375375
}
376376

377-
img:not([src]):after,
378-
img[src=""]:after,
379-
img[src="#"]:after {
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, {
380380
background: #FF8888;
381381
content: 'IMG without proper SRC attribute. Serious implications for some browsers';
382382
}
@@ -631,12 +631,12 @@ map:after {
631631
content: 'Is MAP appropriate here?';
632632
}
633633

634-
br + *:not(br):before {
634+
br + *:not(br):not(img):not(input):before {
635635
background: #88FF88;
636636
content: 'Is BR appropriate here?';
637637
}
638638

639-
br + br + *:before {
639+
br + br + *:not(br):not(img):not(input):before {
640640
background: #88FF88;
641641
content: 'Should you be using a P tag?';
642642
}

0 commit comments

Comments
 (0)