这个csslint错误的目的是什么，我怎么能摆脱它？

Question

我添加了以下CSS代码，以摆脱单击链接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：

  

焦点轮廓对于辅助功能很重要，因为它可以直观地显示焦点在页面上的位置。对于仅限键盘的用户，如果没有焦点轮廓给出的视觉指示，则无法在网页上跟踪焦点。

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

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

Answer 2

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

解决方案：改变别的东西，比如聚焦按钮或其他东西的背景颜色。或者，保持焦点轮廓，但使用JavaScript在不再需要时移除焦点，以便焦点轮廓消失。

顺便说一下，警告是双重目的：当第一个规则（关于其他视觉变化）或第二个规则（关于：焦点）被违反时，你会得到它。所以你没有违反第二个，只有第一个。