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