苹果、维基百科和MDN在他们的生产站点上使用CSS大纲是有原因的(苹果的圆形按钮除外)。欧宝体育在线首页但是当你将CSS大纲应用到某些东西上时,它会在该元素周围创建一个大纲。所以。轮廓只是边框或框阴影的另一种说法吗?绝对的。一点也不。
在这节课中,我们将涵盖所有内容。它有何不同,我们如何使用聚焦(键盘)状态使其完美工作,我们如何为链接添加大纲。我们将介绍一些关于我们网站上的样式大纲的最佳实践(以及苹果在Safari上使用的一个变通方法)。最后,我们将修复Tiffany.com上的选项卡行为。
第1部分。为什么了?换句话说,为什么不使用边框或框阴影呢?边框(这是web上的标准CSS)——边框可以影响元素的大小,并把东西推来推去。在许多高对比度模式下的系统中,框阴影甚至都不会显示出来。就像在Windows中,另一个默认的大纲会显示出来(我们稍后会讲到)。这就是这两个性质不像轮廓的原因。
轮廓是独一无二的。因为大纲围绕着元素。不像边界,它们不影响大小。与盒子阴影不同的是,它们在高对比度模式下不会被忽略(除了轮廓色,这是在高对比度模式设置中设置的)。但是,在什么时候使用提纲,什么时候不使用提纲,有一些非常具体的考虑。作为奖励,你还可以添加偏移轮廓。而且抵消是没有限制的。一直增加,不断增加,直到它远远超过了这个显示器,最后出现在格里默的显示器上。他今天没来,因为他去冰岛看家人了。
现在是12点48分。
但大纲比这更重要。因为没有自定义大纲(这只是一个没有应用大纲样式的普通网站)。没有大纲,如果我们用键盘导航来选择标签,在页面中移动焦点?不同的浏览器几乎总是产生不一致的结果。
这是谷歌Chrome的选项卡重点。这是在Safari上。这是Firefox上的。这是在互联网微软边缘。当然,当你在拍摄前不忘记给Arch卡充电时,它和麦当劳的不一样。
因此,关于CSS大纲的主要注意事项是,我们可以在所有浏览器上覆盖并真正标准化大纲行为——因此它是易读的和一致的。它在聚焦键盘状态下这样做。
如果我们在None状态上应用大纲会发生什么?(换句话说,如果我们只是添加这个属性,因为我们想让东西的默认外观有一个这样的轮廓?)非常高的风险。这是为什么。将CSS大纲设置为默认(None)状态?这是如果我们现在通过这个页面会发生什么。(它甚至可以让一些浏览器的默认大纲行为完全不清楚选择了什么。)
所以让我们撤销它,坦白说,我们应该把它点着。如果我们在拍摄前不忘记给Arch卡上的电池充电,我们就会这么做。
这导致我们使用Focused(键盘)状态。
需要明确的是:我们不会在None状态下应用轮廓,我们会转到这个下拉菜单,并确保我们在Focused(键盘)状态下进行样式化。
现在。为什么是聚焦(键盘)状态?我们知道焦点状态是当用户点击(或点击)或用键盘点击标签时显示的,但很多时候,设计师和开发者不希望每次点击或点击都能看到这个轮廓。在这里,当我们点击时,你可以看到在它到达目的地之前,我们甚至在点击时看到了轮廓,这并不总是理想的。
这就是focus(键盘)的作用(或者在CSS中这是focus-visible)。这里的样式让你在用键盘导航时控制东西的样子。(但这不会影响你用鼠标点击或用手指轻敲时的外观。)
在这里,我们可以很清楚地将大纲添加到链接中。
在这个链接按钮(我们在样式化这个按钮类)上,如果我们进入并选择聚焦(键盘)状态,我们可以向下开始配置我们想要的轮廓的样子。(我们可以调整这些值,使它们达到我们想要的效果——不仅要考虑到与按钮其余部分的对比,还要考虑到与按钮后面的内容的对比。)
如果我们点击预览?我们可以点击进去,然后开始在我们的链接中选择标签。(这也适用于完全发布的网站,对于选项卡导航-但在Webflow预览模式,我们要确保我们已经点击到画布。)
我们从顶部开始(显然我们还没有在导航链接上设置CSS大纲样式)。但是当我们在按钮中滑动时,我们可以看到每个应用了那个类的按钮(它有…)
好的。看来电脑要重启了,因为我们更新了macOS。
但是,如果它不进行更新,你会看到的是,当我们在每个按钮上按tab(移动焦点)时,每个按钮(带有那个类)——它们都显示我们刚刚设计的轮廓。
不仅仅是这里。Chrome、Firefox、Microsoft Edge、Safari——你能想到的都有。
但如果我们点击按钮(或在iPad上点击)呢?没有可见的轮廓样式。事实上,什么都没有。因为macOS还在更新。
但幸运的是,macOS有一个键盘快捷键,可以完全绕过安装,所以我们可以直接回到浏览器。指挥,换挡,科洛弗。
好了。如果我们点击按钮呢?(或者如果我们敲击触控设备呢?)没有可见的轮廓样式。这是因为我们使用的是聚焦(键盘)状态,而不是常规的聚焦状态。
这让我们想到了最佳实践和这个大问题:
这是否意味着我们不应该在常规的聚焦状态下使用CSS大纲?换句话说,我们是否应该在应用CSS大纲时只使用聚焦(键盘)状态?答案是:这取决于你的设计偏好。例如,维基百科的大纲使用焦点状态,但MDN使用聚焦(键盘)(或CSS中的焦点可见)。正确的方法是什么?怎么走错了?时间旅行可能吗?这并不总是一个明确的答案。这没关系。
不管你的设计偏好如何,这个过程都很简单:如果你想让你的轮廓在任何点击、任何点击或任何标签上都可见?使用Focused状态。但是,如果你确实希望你的大纲可以被键盘导航访问,但你更喜欢你的链接不显示大纲在点击或点击?使用聚焦(键盘)状态。
这里要介绍的另一个最佳实践是关于对比的。这就是轮廓的亮点。因为默认的大纲样式(浏览器默认)不理想的另一个原因?在不同背景下的行为(实际上是可见性)(例如,这是Safari中的默认轮廓)并不总是完全可读的,特别是当轮廓与背景混合在一起时。
所以。我们如何解决这个问题,让它更统一呢?换句话说,我们是否可以将所有链接设置为相同的CSS大纲样式,然后忘掉它?我们绝对可以。但我们鼓励测试的原因是我们经常有不同的外观。也许我们需要像苹果那样的蓝色轮廓。它在亮或暗的背景下都很有效。但是如果我们的背景是蓝色的呢?效果不太好。在这种情况下,我们可能想样式类或组合类的按钮在蓝色部分和在聚焦(键盘)状态,我们可以设置它为非蓝色。 Maybe something like white. And that way, it's much more visible. Much more contrast against the background.
现在。这里有一个有趣的观察。药丸形状的链接(它只是一个带有边界半径的按钮,以使其角圆角)。在Safari(至少在15.1上,我们在这里测试)中呢?如果我们翻过去,90度的边。发生什么事情了?有些浏览器(比如Safari)在显示轮廓时可能会忽略边界半径。
所以在Apple.com上,他们添加了一个单独的样式。圆角的药丸形盒子根本不用轮廓;他们使用盒子阴影来达到这种效果。但我们之前了解到,当使用高对比度时,窗口中的框阴影会被忽略。那么,这是否意味着苹果是错的呢?谷歌是什么?例如,在Windows上,如果你开始输入谷歌Docs,并打开高对比度,光标在哪里?高对比度并不总是完美的。所以我们要做到最好。
这就是为什么它可以是在所有用户可导航的东西上使用CSS大纲真是个好主意。链接,按钮——任何可点击或可点击的东西。这里有一个警告。Windows将允许用户选择轮廓显示为哪种颜色。因此,即使它会尊重您的CSS大纲值,它也可以覆盖颜色本身。
所以大纲对于明确定义当前关注的元素非常有效。
同样,这些都不是绝对的规则。这就是CSS的优点(灵活性)。我们可以做适合自己设计的事情,其他人也可以做适合自己设计的事情。这意味着将会有不同的意见,不同的对话和辩论——这是好事。只要我们在设计和开发时考虑到可见性和可访问性,我们就会获得比不考虑这些东西更好的用户体验。当我们的生活处于两者之间时(或者当生活有点不正常时),梅格总是会出现。
[梅格]亲爱的蒂凡尼:
又是梅格。两件事。首先,您的站点在使用选项卡时使用边框。CSS大纲将使这变得不那么繁琐。其次,蒂凡尼蓝根本就不是蓝色;它是蓝绿色的。
真诚,梅格
[McGuire]那么这是怎么回事呢?在这一页上,就像Meg说的,当内容集中时,他们实际上使用了边框。随着我们的浏览,图片的大小有所调整。因此,如果我们检查代码,我们不仅可以验证这一点(我们不仅可以看到他们在聚焦时使用了边框-我们可以切换它的开启和关闭),而且可以完全关闭它。我们还可以添加自己的样式:“CSS大纲”不是属性的名称。轮廓:2px solid #00a4b7。为了确保它得到优先处理,!现在,如果我们切换它,我们可以看到不像边框,它不会影响大小。一切都完好无损。
所以。我们讲了很多。我们讨论了什么是CSS大纲:边界之间的差异——这可能会影响大小,就像我们在Tiffany.com上看到的那样;盒子阴影,可能在高对比度的设备上显示不出来;还有围绕元素边界的轮廓线。我们讨论了聚焦(键盘)状态,它只在使用键盘导航时显示其样式。我们讨论了将大纲添加到LINK中。我们讨论了最佳实践——如何在特定类上设置特定的高对比度大纲。我们修改了Tiffany.com,所以它使用轮廓而不是边框。
这是Webflow设计器中的CSS大纲。