20 / 07 / 03

巧用 CSS 检查 HTML

在 Twitter 中看到了一些使用 CSS 检查 HTML 的例子，用这篇文章整理了一些典型的案例，如果你基于此有更多的灵感，欢迎分享。

同时，我在这里准备了一个 DEMO 页面，可结合文章进行查看。

不安全的 target=_blank

a[target="_blank"]:not([rel~="noopener"]):not([rel~="noreferrer"]) {
  outline: 2px dotted red;
}

关于 window.opener

使用 window.opener 控制在原来的页面上显示一些内容或进行重定向操作，例如重定向到一个高仿页面进行钓鱼，因为是原来网站直接跳转变换，甚至用户没有感知到跳转，所以用户会降低顾虑（因为用户焦点显示在新窗口页面，而重定向发生在原来页面）

注意：关于 :not 选择器，暂时不能使用多选择器，像这样：:not([rel~="noopener"],[rel~="noreferrer"])，这是 css4 的写法，直到它可以被使用为止。

空链接

a:is(:not([href]), [href=""], [href="#"]) {
  outline: 2px dotted red;
}

逆序的标题

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 ~ h5:first-of-type {
  outline: 2px dotted red;
}

前提是标记必须是扁平的，而我们写文章往往又是扁平的结构，故此例子更适用于普通的 HTML 网页的检查

未声明语言的网页

html:not([lang])::before {
  content: '你没有为此文档声明语言';
  display: block;
  color: red;
}

未声明 alt 的图像

img:not([alt]) {
  outline: 2px dotted red;
}

a11y.css

另外，@Gaël Poupard 写了一个 a11y.css 专门来检查 HTML 代码中可能存在的风险和错误，以此来粗略的评估网站质量。同时它还提供了一个 chrome 插件，如果对其感兴趣，不妨一试。