CSS `Input Modality` (`focus-ring-color` 提案) 与用户输入方式相关的样式

各位观众老爷们，早上好！今天咱们来聊点新鲜的，关于CSS里那些能让你的网站更智能、更贴心的“小秘密”——跟用户输入方式相关的样式。特别是那个还在提案阶段，但已经让人翘首以盼的focus-ring-color。

开场白：你摸鼠标，我知冷暖

想想看，你辛辛苦苦写出来的网页，在不同的人手里，感受可能完全不一样。有的人喜欢用鼠标点点点，有的人是键盘侠，还有人是触摸屏爱好者。如果你的网页能“察言观色”，根据用户的输入方式，给出不同的反馈，那是不是就显得特别懂用户的心？

这就是CSS Input Modality 想要解决的问题。它允许你根据用户当前的输入方式（鼠标、键盘、触摸等），应用不同的样式。虽然现在还没有一个官方的、统一的CSS模块叫做“Input Modality”，但相关的特性已经逐渐落地，比如 :focus-visible，以及我们今天要重点讨论的 focus-ring-color 提案。

第一幕：:focus 的爱恨情仇

在深入 focus-ring-color 之前，咱们先回顾一下老朋友 :focus。这个伪类相信大家都不陌生，它用来表示一个元素获得了焦点时的样式。

input:focus {
  border: 2px solid blue;
  outline: none; /* 记得去掉默认的outline，不然会显得很丑 */
}

这段代码的意思是，当 input 元素获得焦点时，它的边框会变成蓝色，并且去掉浏览器默认的 outline。

问题来了：对于键盘用户来说，这个蓝色边框是个好东西，因为它能清晰地告诉他们当前焦点在哪里。但对于鼠标用户来说，这个边框就显得有点多余了，甚至会破坏页面的美观。

这就是 :focus 的尴尬之处：它无法区分用户的输入方式。

第二幕：:focus-visible 横空出世

为了解决 :focus 的窘境，W3C推出了 :focus-visible 伪类。这个伪类只有在浏览器判断用户需要明确的焦点指示器时才会生效。换句话说，它更智能，知道什么时候该出现，什么时候该隐藏。

input:focus-visible {
  border: 2px solid blue;
  outline: none;
}

这段代码和上面的 :focus 版本看起来很像，但实际上它的行为完全不同。只有当用户通过键盘或其他非鼠标方式获得焦点时，这个蓝色边框才会出现。

举个栗子：

用户行为	`:focus` 是否生效	`:focus-visible` 是否生效
鼠标点击 input	生效	不生效
Tab键切换到 input	生效	生效

:focus-visible 的出现，让我们可以更精细地控制焦点样式，让网页更贴合用户的需求。

第三幕：focus-ring-color 闪亮登场 (提案阶段)

虽然 :focus-visible 已经很棒了，但它仍然有一些局限性。比如，它只能控制整个元素的样式，而不能单独控制焦点指示器的颜色。有时候，我们只想改变焦点指示器的颜色，而不想改变其他样式。

这时候，focus-ring-color 就派上用场了。这个属性允许你单独设置焦点指示器的颜色，而不用担心影响其他样式。

语法：

element {
  focus-ring-color: <color>;
}

<color> 可以是任何有效的 CSS 颜色值，比如 red、#00ff00、rgba(0, 0, 255, 0.5) 等等。

例子：

button:focus-visible {
  focus-ring-color: orange;
}

这段代码的意思是，当 button 元素通过键盘获得焦点时，它的焦点指示器（通常是 outline 或 box-shadow）会变成橙色。

进阶用法：配合 focus-ring-width 和 focus-ring-style

focus-ring-color 还可以和 focus-ring-width 和 focus-ring-style 配合使用，进一步定制焦点指示器的外观。

focus-ring-width: 设置焦点指示器的宽度。
focus-ring-style: 设置焦点指示器的样式，比如 solid、dashed、dotted 等等。

例子：

a:focus-visible {
  focus-ring-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
  focus-ring-width: 3px;
  focus-ring-style: dashed;
}

这段代码会给 a 元素添加一个半透明红色、3像素宽、虚线的焦点指示器。

注意： 由于 focus-ring-color 还在提案阶段，所以目前还没有被所有浏览器完全支持。你可能需要使用一些 polyfill 或者 CSS Houdini 技术来实现类似的效果。

第四幕：实战演练，代码说话

光说不练假把式，咱们来写几个实际的例子，让大家感受一下 focus-ring-color 的魅力。

例子 1: 简单的按钮焦点样式

<!DOCTYPE html>
<html>
<head>
<title>Focus Ring Color Example</title>
<style>
button {
  padding: 10px 20px;
  border: none;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 5px;
}

button:focus-visible {
  /* 模拟 focus-ring-color 的效果，因为浏览器支持有限 */
  outline: 2px solid orange; /* 使用 outline 作为焦点指示器 */
  outline-offset: 2px; /* 让 outline 和按钮之间有一点距离 */
}

/* 如果浏览器支持 focus-ring-color, 可以这样写 */
/* button:focus-visible {
  focus-ring-color: orange;
  focus-ring-width: 2px;
  focus-ring-style: solid;
} */
</style>
</head>
<body>

<button>Click me</button>
<a href="#">Link</a>

</body>
</html>

在这个例子中，我们给按钮添加了一个橙色的焦点指示器。由于 focus-ring-color 的支持度有限，我们使用了 outline 来模拟它的效果。outline-offset 用来调整 outline 和按钮之间的距离，让它看起来更美观。

例子 2: 链接的焦点样式

<!DOCTYPE html>
<html>
<head>
<title>Focus Ring Color Example</title>
<style>
a {
  color: blue;
  text-decoration: none;
}

a:focus-visible {
  /* 模拟 focus-ring-color 的效果 */
  outline: 2px dashed rgba(0, 123, 255, 0.5); /* 蓝色虚线 */
  outline-offset: 2px;
}

/* 如果浏览器支持 focus-ring-color, 可以这样写 */
/* a:focus-visible {
  focus-ring-color: rgba(0, 123, 255, 0.5);
  focus-ring-width: 2px;
  focus-ring-style: dashed;
} */
</style>
</head>
<body>

<a href="#">This is a link</a>

</body>
</html>

在这个例子中，我们给链接添加了一个蓝色虚线的焦点指示器。同样，我们使用了 outline 来模拟 focus-ring-color 的效果。

例子 3: 输入框的焦点样式

<!DOCTYPE html>
<html>
<head>
<title>Focus Ring Color Example</title>
<style>
input[type="text"] {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="text"]:focus-visible {
  /* 模拟 focus-ring-color 的效果 */
  outline: 2px auto Highlight; /* 使用浏览器默认的焦点颜色 */
  outline-offset: 0px;
}

/* 如果浏览器支持 focus-ring-color, 可以这样写 */
/* input[type="text"]:focus-visible {
  focus-ring-color: Highlight; /* 使用浏览器默认的焦点颜色 */
  focus-ring-width: 2px;
  focus-ring-style: auto;
} */
</style>
</head>
<body>

<input type="text" placeholder="Enter text">

</body>
</html>

在这个例子中，我们给输入框添加了一个浏览器默认的焦点颜色的焦点指示器。我们使用了 Highlight 关键字，它表示浏览器默认的焦点颜色。

第五幕：兼容性处理，未雨绸缪

既然 focus-ring-color 还在提案阶段，那我们就要做好兼容性处理。

1. 使用 outline 或 box-shadow 作为备选方案

就像我们在上面的例子中做的那样，可以使用 outline 或 box-shadow 来模拟 focus-ring-color 的效果。

2. 使用 polyfill

有一些 JavaScript 库可以用来 polyfill focus-ring-color，让它在不支持的浏览器中也能正常工作。

3. 使用 CSS Houdini

CSS Houdini 是一组底层 API，允许开发者扩展 CSS 的功能。你可以使用 Houdini 来实现自定义的焦点指示器，从而模拟 focus-ring-color 的效果。

4. 特性查询 (@supports)

使用 @supports 规则可以检测浏览器是否支持 focus-ring-color，然后根据情况应用不同的样式。

@supports (focus-ring-color: red) {
  button:focus-visible {
    focus-ring-color: red;
  }
}

@supports not (focus-ring-color: red) {
  button:focus-visible {
    outline: 2px solid red;
  }
}

这段代码的意思是，如果浏览器支持 focus-ring-color，就使用 focus-ring-color 来设置焦点颜色；否则，就使用 outline 来模拟。

第六幕：未来的展望

focus-ring-color 的出现，标志着 CSS 在用户体验方面的又一次进步。它让我们能够更精细地控制焦点样式，让网页更智能、更贴心。

虽然现在 focus-ring-color 还在提案阶段，但相信在不久的将来，它会被所有浏览器广泛支持。到时候，我们就可以更加方便地创建出符合用户需求的焦点样式，提升用户体验。

总结陈词：

今天的讲座就到这里。希望大家通过今天的学习，能够对 CSS Input Modality 有更深入的了解，并且能够在实际项目中灵活运用 :focus-visible 和 focus-ring-color（或者它们的替代方案）。

记住，好的用户体验是网页成功的关键。让我们一起努力，用技术让世界更美好！

散会！

发表回复 取消回复

发表回复取消回复