2

我添加了以下 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)

4

2 回答 2

2

根据outline-none 的 CSSLint 页面：

焦点轮廓对于可访问性很重要，因为它可以直观地指示焦点在页面上的位置。对于仅使用键盘的用户，如果没有焦点轮廓给出的视觉指示，就不可能跟踪网页上的焦点。

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

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

于 2015-07-07T18:19:14.787 回答
0

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

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

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

于 2015-07-07T18:19:43.183 回答