linthtmlwithcss.min.css

:root {--lint: 2px dashed red;}input:not([id], label:not([for])) {outline: var(--lint);content: "Debug inputs and labels without id or for attribute";}a:is(:not([href]), [href=""], [href="#"]) {outline: var(--lint);content: "This selector hunts for links that have No href, an empty href and a '#' href";}img:not([alt]) {outline: var(--lint);content: "Debug images without alt attribute with CSS.";}:not(figure) > figcaption, :not(fieldset) > legend, :not(dl) > :is(dt, dd), :not(tr) > :is(td, th), :not(select) > :is(option, optgroup), :not(table) > :is(thead, tfoot, tbody, tr, colgroup, caption) {outline: var(--lint);content: "This selector hunts for forbidden nesting";}:is(ul, ol) > :not(li) {outline: var(--lint);content: "This selector hunts for lists that have something other than an <li> inside";}[tabindex]:not([tabindex="0"], [tabindex="-1"]) {outline: var(--lint);content: "This selector hunts for elements with a tabindex other than 0 or -1";}button:not([type]) {outline: var(--lint);content: "Debugs buttons without type attribute";}input:not([type="button"]) :not([type="reset"]) :not([type="submit"]) :not([aria-labelledby],[id]), textarea:not([aria-labelledby],[id]) label:not([for]) {outline: var(--lint);content: "Find all the input fields without any labelling";}input[type=button]:not([aria-label]), input[type=reset]:not([aria-label]), input[type=submit]:not([aria-label]), button:not([aria-label]) {outline: var(--lint);content: "Find all the buttons without any label";}table > *:first-child:not(caption) {outline: var(--lint);content: "Tables should have a caption";}h2 ~ h1, h3 ~ h1, h4 ~ h1, h5 ~ h1, h6 ~ h1, h3 ~ h2:first-of-type, h4 ~ h2:first-of-type, h5 ~ h2:first-of-type, h6 ~ h2:first-of-type, h4 ~ h3:first-of-type, h5 ~ h3:first-of-type, h6 ~ h3:first-of-type, h5 ~ h4:first-of-type, h6 ~ h4:first-of-type, h6 ~ h5:first-of-type {outline: var(--lint);content: "Headers out of order (i.e. h2 before h1, etc.)";}picture > source:first-child:not([type="image/webp"]):before {outline: var(--lint);content: "Find <picture> elements that don't contain a WebP <source>";}img:not([loading="lazy"]), iframe:not([loading="lazy"]) {outline: var(--lint);content: "<img> and <iframe>'s without native lazy loading";}html:not([lang])::before {outline: var(--lint);content: "Prevents the absence of lang attribute";}svg:is([role="presentation"], [aria-label], [aria-labelledby], [aria-hidden="true"]):not([focusable="false"]) {outline: var(--lint);content: "SVG without focusable=false when decorative or hidden";}[dir="rtl"]:not([lang="ar"], [lang="he"]), :is([lang="ar"], [lang="he"]):not([dir="rtl"]), :is([lang="ar"], [lang="he"]) [lang]:not([dir="ltr"]) {outline: var(--lint);content: "Mismatched [dir] && [lang]";}svg:not([role="presentation"]):not([aria-label]):not([aria-labelledby]) > :first-child:not(title) {outline: var(--lint);content: "SVG without title or aria-label and not considered as decorative";}[target$="blank"]:not( [rel], [rel*="noopener"], [rel*="noreferrer"] ) {outline: var(--lint);content: "Insecure [target=blank]";}details > summary:not(:first-child), details > *:first-child:not(summary) {outline: var(--lint);content: "Summary must be the first child";}fieldset > :first-child:not(legend)::before {outline: var(--lint);content: 'add a <legend> first, please';}:is(b,i,q,em,abbr,cite,code,span,small,label,strong) > div {outline: var(--lint);content: "No divs inside inline elements";}a h1, a h2, a h3, a h4, a h5, a h6 {outline: var(--lint);content: "No headings inside inline <a> tag";}img:not([width]), img:not([height]) {outline: var(--lint);content: "<img> without height and width that will cause cumulative layout shift. See: https://web.dev/optimize-cls/#images-without-dimensions";}embed:not([width]), iframe:not([height]) {outline: var(--lint);content: "<embeds> or <iframes> without height and width that will cause cumulative layout shift. See: https://web.dev/optimize-cls/#ads-embeds-and-iframes-without-dimensions";}img:not([srcset]) {outline: var(--lint);content: "Not utilizing srcset for responsive images. See: https://html.com/attributes/img-srcset/";}:is(button, a):empty:not([aria-label]):not([aria-labelledby]), :is(button, a):not([aria-label]):not([aria-labelledby]) img:only-child:is(:not([alt]),[alt=""]), :is(button, a):not([aria-label]):not([aria-labelledby]) i:only-child:not([aria-label]):not([aria-labelledby]) {outline: var(--lint);content: "Empty buttons or links without any kind of labelling";}