Skip to content

Instantly share code, notes, and snippets.

@TravisMullen

TravisMullen/debug-element-structure.css

Created December 25, 2020 23:43
Show Gist options
  • Save TravisMullen/7145aa1d089a70bc75e0ea117fee9c19 to your computer and use it in GitHub Desktop.
Save TravisMullen/7145aa1d089a70bc75e0ea117fee9c19 to your computer and use it in GitHub Desktop.
Download ZIP
CSS Visual Cues for potential HTML issues.
Raw
debug-element-structure.css
/* no LANG attributes in HTML document */
html:([lang])::before {
content: "No lang declared in HTML element.";
display: block;
color: white;
background-color: red;
}
/* prevent unsecure links */
a[target="_blank"]:not([rel="noopener"]):not([rel="noreferrer"]),
/* no divs inside inline elements */
abbr div, b div, i div, span div, em div, strong div, small div, cite div, q div, code div, label div,
/* input or labek without id or for attributes */
input:not([id]),
label:not([for]),
/* images without ALT attributes. */
img:not([alt]) {
outline: 3px dashed red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment