轮廓偏移 算法_具有轮廓偏移的控制元素轮廓位置

轮廓偏移 算法

I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug where the element outline forced a horizontal scrollbar within its parent, causing the table to look....gross. After a bit of research, I discovered the outline-offset CSS property. Let me show you what it is and how it fixed the outline bug!

我最近正在从事一个项目，该项目具有可通过键盘导航的表格，因此显然可以通过传统的tabIndex=0使用单元格概述来进行操作，而元素轮廓是允许用户快速而智能地导航的重要组成部分。 不幸的是，我遇到了Firefox 3.6错误，其中元素轮廓在其父级中强制使用了水平滚动条，从而导致表格看起来.... gross。 经过一些研究，我发现了outline-offset CSS属性 。 让我向您展示它是什么以及它如何修复大纲错误！

View Demo 观看演示

CSS (The CSS)

Assuming you have an element that's focusable (usually via tabIndex), the CSS to adjust the outline is as simple as you would expect it to be:

假设您有一个可聚焦的元素(通常通过tabIndex ) ，则用于调整轮廓CSS就像您期望的那样简单：

.tableWidget td {
	outline-offset: 2px;
}

A positive outline-offset moves the offset further outside the element, whereas you can create an inner outline using negative outline-offset:

正outline-offset将偏移量进一步移到元素外部，而您可以使用负outline-offset来创建内部轮廓：

.tableWidget td {
	outline-offset: -1px;
}

In the case of the bug I mentioned above, using a negative outline-offset fixed the problem because the outline stays within element.

对于我上面提到的错误，使用负outline-offset解决问题，因为轮廓保留在元素内。

View Demo 观看演示

I wasn't aware of the outline-offset property before coming across this issue and I'm certainly glad I know about it now. Removing the outline property is never a good idea because usability and accessibility, so the ability to control its placement relative to the element border is very valuable.

在碰到此问题之前，我并不知道outline-offset属性，我现在很高兴知道这一点，对此我感到很高兴。 由于可用性和可访问性，删除大纲属性绝不是一个好主意，因此控制其相对于元素边框的位置的能力非常有价值。

翻译自: https://davidwalsh.name/outline-offset

轮廓偏移 算法