具有自定义属性的颜色的上下文实用课程

CSS 的 currentColor 属性非常实用，但遗憾的是，我们没有类似的 currentBackgroundColor 属性，而且 color-mod() 函数也尚未广泛支持。

因此，许多开发者希望根据上下文样式化链接，并在悬停或聚焦时反转颜色。借助 CSS 自定义属性和一些简单的实用程序类，我们可以利用样式的层叠特性实现强大的效果。

为此，我们需要使用实用程序类（包含自定义属性）来指定文本和背景颜色，然后用这些类定义下划线的颜色，并在悬停时扩展为完整的背景。

首先，来看 HTML 结构：

<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">sed do eiusmod tempor incididunt</a> ut labore et dolore magna aliqua. Aliquam sem fringilla ut morbi tincidunt. Maecenas accumsan lacus vel facilisis. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper.
  </p>

这段代码包含一个段落和一个链接。接下来，我们设置实用程序类。我将在 Color Hunt 上定义四种颜色，分别创建颜色属性类和背景颜色属性类，每个类都包含一个变量来赋值（分别为 --c 和 --bg）。例如，绿色颜色对应的类如下：

.u-color--green {
  --c: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8;
}

.u-bg--green {
  --bg: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8;
  background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8;
}

Sass 用户可以使用映射和循环来自动创建颜色和背景类。这并非必需，只是自动创建许多颜色相关实用程序类的一种方法。这非常有用，但要跟踪使用情况，避免创建未使用的类。以下是生成这些类的 Sass 代码：

$colors: ( // 定义颜色列表
  'green': https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b08ffc8,
  'light': https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff7f7,
  'grey': https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bdadada,
  'dark': https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b204969
);

@each $n, $c in $colors { // $n 为键，$c 为值
  .u-color--https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$n} {
    --c: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$c};
    color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$c};
  }

  .u-bg--https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$n} {
    --bg: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$c};
    background-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b{$c};
  }
}

如果忘记在 HTML 中应用实用程序类，--c 变量将使用 currentColor，--bg 也是如此！为了避免这种情况，我们定义一个顶级默认值：

html {
  --c: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000000;
  --bg: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
}

现在，只需要样式化链接即可。本文中我们将样式化所有 <a></a> 元素，但也可以轻松添加例如 .fancy-link 这样的类。

链接的样式应遵循 “LoVe-HAte” 顺序：:link、:visited、:hover（和 :focus！）以及 :active。我们可以使用 :any-link，但浏览器支持度不如 CSS 自定义属性好。

我们可以先声明链接样式，为旧版浏览器提供可接受的体验，然后检查自定义属性支持：

/* 旧版浏览器的样式 */
a {
  color: inherit;
  text-decoration: underline;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: .0625em solid currentColor;
  outline-offset: .0625em;
}

a:active {
  outline-width: .125em;
}

@supports (--a: b) { /* 检查 CSS 变量支持 */
  /* 默认变量值 */
  html {
    --c: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000000;
    --bg: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  }

  a {
    /* 基本链接样式 */
  }
}

接下来创建基本链接样式。我们将使用自定义属性使样式尽可能 DRY。

首先，我们需要设置变量。我们想要定义一个 --space 变量，用于各种属性，在文本周围添加一些空间。链接颜色也将在 --link-color 变量中定义，默认为 currentColor。虚假下划线将使用背景图像生成，其大小将根据状态使用 --bg-size 变量调整，默认为 --space 值。最后，为了增加趣味性，我们还将在链接处于 :active 状态时模拟一个边框，因此我们将在 --shadow-size 中定义其大小，在非活动状态下设置为 0。这给了我们：

--space: .125em;
--link-color: currentColor;
--bg-size: var(--space);
--shadow-size: 0;

首先，我们需要调整回退样式。我们将设置颜色以使用自定义属性，并删除默认的下划线：

color: var(--link-color);
text-decoration: none;

接下来创建虚假下划线。该图像将是一个线性渐变，具有两个相同的起点和终点：文本颜色 --c。我们确保它只水平重复 background-repeat: repeat-x;，并将其放置在元素底部 background-position: 0 100%;。最后，我们给出它的尺寸，水平为 100%，垂直为 --bg-size 值。最终得到：

background-image: linear-gradient(var(--c, currentColor), var(--c, currentColor));
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 100% var(--bg-size);

为了 :active 状态，我们还定义了 box-shadow，它将不存在，但使用我们的变量，它将能够生效：box-shadow: 0 0 0 var(--shadow-size, 0) var(--c);

这是基本样式的大部分内容。现在，我们需要根据链接状态为变量分配新值。

:link 和 :visited 是用户在链接处于“空闲”状态时看到的。由于我们已经设置好了一切，这是一个简短的规则集。虽然我们可以在 --link-color 的初始赋值中声明 --c 变量，但我在这里赋值是为了使我们样式的每个步骤都清晰明了：

a:link,
a:visited {
  --link-color: var(--c);
}

链接现在看起来很酷，但如果我们与它交互，什么也不会发生……接下来创建这些样式。需要发生两件事：背景必须占据所有可用高度（即 100%），并且文本颜色必须更改为背景的颜色，因为背景是文本颜色（令人困惑，对吧？）。第一个很简单：--bg-size: 100%;。对于文本颜色，我们分配 --bg 变量，如下所示：--link-color: var(--bg);。连同我们的伪类选择器，我们最终得到：

a:hover,
a:focus,
a:active {
    --bg-size: 100%;
    --link-color: var(--bg);
}

看，悬停或聚焦时下划线变成了完整的背景！作为奖励，我们可以通过增加 --shadow-size 来添加点击链接时的模拟边框，我们的 --space 变量将再次派上用场：

a:active {
  --shadow-size: var(--space);
}

我们现在差不多完成了！但是，它看起来有点过于通用，所以让我们添加一个过渡、一些填充和圆角，并确保如果链接跨越多行，它看起来也很不错！

对于过渡，我们只需要动画颜色、背景大小和 box-shadow。持续时间由您决定，但鉴于链接通常约为 20 像素高，我们可以设置一个较短的持续时间。最后，为了使它看起来更流畅，让我们使用 ease-in-out 缓动。这总结为：

transition-property: color, background-size, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
will-change: color, background-size, box-shadow; /* 让浏览器知道哪些属性即将被操作。 */

接下来，我们将 --space 变量分配给 padding 和 border-radius，但不要担心前者——因为我们没有将其定义为内联块，所以 padding 不会弄乱文本块的垂直节奏。（只需确保测试您的值）

padding: var(--space);
border-radius: var(--space);

最后，为了确保样式在多行上正确应用，我们只需要添加 box-decoration-break: clone;（以及前缀，如果您愿意），就是这样。

完成后，我们应该有这些样式：

/* 旧版浏览器的样式 */
a {
  color: inherit;
  text-decoration: underline;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: .0625em solid currentColor;
  outline-offset: .0625em;
}

a:active {
  outline-width: .125em;
}

/* 现代浏览器的基本链接样式 */
@supports (--a: b) {
  /* 默认变量值 */
  html {
    --c: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000000;
    --bg: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  }

  a {
    /* 变量 */
    --space: .125em;
    --link-color: currentColor;
    --bg-size: var(--space);
    --shadow-size: 0;

    /* 布局 */
    padding: var(--space); /* 内联元素不会影响垂直节奏，因此我们不需要指定每个方向 */

    /* 文本样式 */
    color: var(--link-color); /* 使用变量设置颜色 */
    text-decoration: none; /* 删除默认下划线 */

    /* 盒子样式 */
    border-radius: var(--space); /* 使其更漂亮 ✨ */
    background-image: linear-gradient(var(--c, currentColor), var(--c, currentColor));
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 100% var(--bg-size);
    box-shadow: 0 0 0 var(--shadow-size, 0) var(--c, currentColor); /* 在 :active 状态下使用 */
    box-decoration-break: clone; /* 确保样式在跨越多行的链接上重复 */

    /* 过渡声明 */
    transition-property: color, background-size, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
    will-change: color, background-size, box-shadow;
  }

  /* 空闲状态 */
  a:link,
  a:visited {
    --link-color: var(--c, currentColor); /* 使用 --c，或回退到 currentColor */
  }

  /* 交互状态 */
  a:hover,
  a:focus,
  a:active {
    --bg-size: 100%;
    --link-color: var(--bg);
  }

  /* 活动状态 */
  a:active {
    --shadow-size: var(--space); /* 定义 box-shadow 大小 */
  }
}

当然，它比只使用下划线要复杂一些，但与允许您始终访问文本和背景颜色的实用程序类结合使用，它是一个相当不错的渐进式增强。

您可以使用三个变量来增强此功能，每个颜色使用 rgb 或 hsl 格式来调整不透明度等。您还可以添加文本阴影来模拟 text-decoration-skip-ink！

以上是具有自定义属性的颜色的上下文实用课程的详细内容。更多信息请关注PHP中文网其他相关文章！