在 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 插件,如果对其感兴趣,不妨一试。


延伸阅读:

最后更新于:
2020-08-20