lorenzodelijser / lint-html-with-css

Lint HTML with CSS. A collection of CSS snippets from the hashtag #lintHTMLwithCSS on twitter. These CSS snippets intend to warn developers about common mistakes made in HTML.

Product designer & engineer based in Amsterdam

I craft user-friendly digital products. Previously at Yummygum and Woov, currently at Cube.

Website, X / Twitter, Figma, Are.na, Read.cv

lint-html-with-css's Issues

Duplicate tests re: target="_blank"

There are two tests for elements with the target="_blank" attribute but without appropriate rel attributes.

Starting at line 207...

[target$="blank"]:not(
    [rel],
    [rel*="noopener"],
    [rel*="noreferrer"]
) {
    outline: var(--lint);
    content: "Unsecure [target=blank]";
}

And starting at line 302...

a[target='_blank']:not([rel ='noopener']):not([rel='noreferrer']) {
    outline: var(--lint);
    content: "Prevent unsecure [target='_blank'] links";
}

I suggest removing the test that starts at line 302, as it will not select elements with target="_blank" that have a rel ='noopener' attribute but do not have a rel='noreferrer'attribute.

Additionally, both tests use the word unsecure. Although sometimes used, apparently unsecure is not actually a word. Insecure or unsecured should be used instead. References below.

https://grammarhow.com/unsecure-vs-insecure/
https://english.stackexchange.com/questions/19653/insecure-or-unsecure-when-dealing-with-security

Some typos

Line 7 and 13: lebels => labels

Line 21: parhaps => perhaps

Line 150 and 155: webp => WebP

Line 168 and 176: Geoffry => Geoffrey

Error in Mismatched [dir] && [lang] test

LIne 188 currently reads...

:is([lang="ar"], [lang="he"]):noet([dir="rtl"]),

I believe the this should be the :not pseudo-class, instead of :noet.

Error in Only <li>'s allowed here! test

The Only <li>'s allowed here! test, starting at line 58, reads...

:is(ul, ol) *:not(li) {
    outline: var(--lint);
    content: "This selector hunts for lists that have something other than an <li> inside";
}

The first line, :is(ul, ol) *:not(li), selects all child elements of the ul and ol elements. This could include elements that are valid within an li element, such as images, inline SVGs, etc.

I suggest that the selector be changed so that only the immediate children of the ul and ol elements are selected. Therefore...

:is(ul, ol) > :not(li)

Error in attribute name

There is an error in line 97. It currently reads...

:not([arialabelledby],[id]),

It should read...

:not([aria-labelledby],[id]),

Duplicate tests

There are two tests for img elements without width and height attributes.

Starting at line 66...

img:not([width]):not([height]) {
    outline: var(--lint);
    content: "Prevent page load jank and CLS by finding <img>'s missing height and width attributes";
}

And starting at line 262...

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";
}

I suggest removing the test that starts at line 66, as it will not select img elements that have a width attribute but do not have a height attribute.