Control Element Outline Position with outline-offset
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!
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:
.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:
.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.
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.
good tip, i don’t use the outline property at all, i always use the border property, didn’t know that outline property is so common in design, or it isn’t ?
One reason that it may not be used as much may be due to its not being supported in IE8, not sure about IE9 (doesn’t work with my CMS).
Use the Tab button :)
I was just checking this on Chrome 35.0.1916.153 version. The offset doesn’t seem to be working. It only worked on the firefox 29.0.1. Is there any quick hack to fix this on chrome and keep the offset (blue border line) in chrome with a negative value?
thanks.