Add more debug CSS selectors for highlighting potential problems

[chrisblakley]

Nebula already implements a handful of CSS selectors that are activated during audit mode. There are a whole ton more that may be useful to add.

A great collection if ideas here: https://github.com/lorenzodelijser/lint-html-with-css/blob/main/linthtmlwithcss.css

This library has a lot of these: https://github.com/Heydon/REVENGE.CSS/blob/master/revenge.css

Great convos on Twitter: https://twitter.com/hashtag/lintHTMLwithCSS

A few that I like:

//Blocking user scaling
:root:has(meta[name="viewport"][content*="user-scalable-no"])::before {
    content: "This site is preventing user scaling!";
}

//Find outbound links that are not using noopener and noopener
[target$="blank"]:not(
    [rel],
    [rel*="noopener"],
    [rel*="noreferrer"]
){
    outline: 2px dotted red;
}

//Inputs and labels without id or for attribute
input:not([id], label:not([for])) {
    outline: var(--lint);
    content: "Debug inputs and labels without id or for attribute";
}

//Empty links
a:is(:not([href]), [href=""]) {
    outline: var(--lint);
    content: "This selector hunts for links that have No href, an empty href and a '#' href";
}

//Non-lazy loading images and iframes
img:not([loading="lazy"]),
iframe:not([loading="lazy"]) {
    outline: var(--lint);
    content: "<img> and <iframe>'s without native lazy loading";
}

//Improper tabindex
[tabindex]:not([tabindex="0"]):not([tabindex="-1"])::after {
    content: 'Do not disrupt the natural tab order.' !important;
}

[chrisblakley]

I wonder if it is possible to highlight unlinked images using :has() and :not() together...?

Ex: This is fine:

<a href="#"><img src="#" /></a>

But this would be highlighted:

<img src="#" />

So it would need to be like img:not(a:has(img)) but I don't think :has() can go down and up and back down like that... Might just stick with JavaScript for this one...