CSS大纲最佳实践

为晚，出现了在执行下列操作实践一些伟大的文章（和大惊小怪）：CSS大纲最佳实践

a, input, textarea, button { 
    outline: none; 
}

大多数似乎都与可访问性问题。

这不是我的意图完全删除此功能（如上面的代码所示）... 但是，此功能很好地混淆了我的原始设计，在不受欢迎的区域中添加了非预期的边框（erm，轮廓？）。

与此的主要问题是，这些轮廓，被错误命名，因为他们，实际上勾勒出元件周围的矩形区域，而不是它的轮廓（例如，它忽略了边界半径等）。

让我们看一个例子好吗？

http://jsfiddle.net/x5Mex/

唯一的解决方案是有上面的代码运行和使用我自己的系统。就像我们总是与Web浏览器反正没有...

来源

2012-02-14 Christian

确实。轮廓位于边界外部的矩形区域周围。它不考虑圆角。

没有什么错禁用的轮廓，只要确保你添加一些其他的辅助功能对于使用键盘，例如人，改变你的背景颜色上的焦点

Example

来源

2012-02-14 10:04:57

嗯应该想到的是自己！谢谢。 – Christian 2012-02-14 10:06:41

+1 - 但一个警告;确保您的替换物足够明显。用稍暗的边框代替浅灰色的边框对于一些人来说很难分辨出来。虽然您可以看到颜色变化，但一旦控件具有焦点（在本例中），它不会“看起来很专注”。因此，您需要考虑整体页面设计，以便在整个页面/网站中提供一致的焦点风格突出显示，并且当前关注的项目视觉上很明显，并且从非重点项目中突出显示。 – BrendanMcK 2012-02-15 00:10:20

的确，这仅仅是一个例子，但是，你应该让变化显而易见@ChristianSciberras。 – 2012-02-15 07:16:48

由于许多表单元素，按钮元素在浏览器中具有不同的效果，并且需要尽可能多的修复...

http://fvsch.com/code/button-css/来自F. Verschelde should let你围绕整个元素轮廓按钮，而不围绕其内容。

来源

2012-02-16 19:10:15 FelipeAls

CSS大纲最佳实践

回答

相关问题