这个 csslint 错误的目的是什么，我该如何摆脱它？

Question

我添加了以下 CSS 代码以消除单击 link HTML 元素后出现的轮廓。
CSS代码：

.window-leveling-btn:focus {
  outline: 0;
}

之后我收到以下 csslint 错误消息。 我不明白为什么我不应该这样做或者我应该如何正确地做。
错误消息：WARNING: Outlines shouldn't be hidden unless other visual changes are made. Use of outline: none or outline: 0 should be limited to :focus rules. (outline-none)

Answer 1

根据CSSLint page for outline-none：

The focus outline is important for accessibility because it gives a visual indication as to where the focus is on the page. For keyboard-only users, tracking the focus on a web page is impossible without the visual indication given by the focus outline.

基本上，CSSLint 团队认为您不应该这样做，因为这会使用户更难浏览页面。

至于抑制错误，这取决于您编写代码的应用程序（命令行或文本编辑器）。根据 this CSSLint GitHub issue，您可以在评论中关闭规则的 linting，这应该涵盖大多数情况。

Answer 2

由于用户可以通过按 Tab 键在按钮之间切换，因此必须有一些视觉线索获得焦点。这就是警告的内容。

解决方案：更改其他内容，例如聚焦按钮的背景颜色或其他内容。或者，保留焦点轮廓，但在不再需要焦点时使用 JavaScript 删除焦点，以便焦点轮廓消失。

顺便说一句，该警告有双重目的：当违反第一条规则（关于其他视觉变化）或第二条规则（关于 :focus）时，您会收到警告。所以你没有违反第二条，只违反第一条。

这个 csslint 错误的目的是什么，我该如何摆脱它？

What is the purpose of this csslint error and how can I get rid of it?

css

csslint