实用CSS自定义属性的模式使用

CSS 自定义属性（CSS Variables）的浏览器支持度已达到可用于生产环境的程度，我一直在探索其强大的功能。我已经尝试了多种使用方法，并且希望您也能像我一样对它们感到兴奋。它们非常实用且功能强大！

我发现CSS 变量的使用往往可以归纳为几个类别。当然，您可以随意使用 CSS 变量，但从这些不同类别来思考它们，或许有助于您理解它们的不同使用方法。

• 变量: 基础用法，例如设置品牌颜色并在需要的地方使用。
• 默认值: 例如，设置一个默认的 border-radius，之后可以覆盖。
• 级联值: 基于特异性使用线索，例如用户偏好。
• 作用域规则集: 对单个元素（如链接和按钮）进行有意的样式变体。
• Mixin: 旨在将其值应用于新上下文的规则集。
• 内联属性: 从 HTML 的内联样式中传入的值。

我们将看到的示例是从我创建和维护的 CSS 框架 Cutestrap 中简化和浓缩的模式。

关于浏览器支持的简短说明

当提到自定义属性时，我经常听到两种常见的问题。第一个是关于浏览器支持的问题。哪些浏览器支持它们？在不支持它们的浏览器中，我们需要使用哪些后备方案？

支持本文中介绍内容的全球市场份额为 85%。尽管如此，仍然值得根据您的用户群，交叉参考 caniuse 来确定渐进增强在您的项目中有多大意义以及在何处使用。

第二个问题总是关于如何使用自定义属性。因此，让我们深入了解其用法！

模式 1：变量

首先，我们将为品牌颜色设置一个自定义属性变量，并在 SVG 元素上使用它。我们还将使用后备方案来覆盖旧版浏览器的用户。

html {
  --brand-color: hsl(230, 80%, 60%);
}

.logo {
  fill: pink; /* 后备方案 */
  fill: var(--brand-color);
}

在这里，我们在 html 规则集中声明了一个名为 --brand-color 的变量。该变量在始终存在的元素上定义，因此它将级联到使用它的每个元素。简而言之，我们可以在 .logo 规则集中使用该变量。

我们为旧版浏览器声明了一个粉红色的后备值。在第二个 fill 声明中，我们将 --brand-color 传递到 var() 函数中，该函数将返回我们为该自定义属性设置的值。

模式大致就是这样：定义变量（--variable-name），然后在元素上使用它（var(--variable-name)）。

模式 2：默认值

我们在第一个示例中使用的 var() 函数还可以提供默认值，以防它尝试访问的自定义属性未设置。

例如，假设我们为按钮提供圆角边框。我们可以创建一个变量——我们将其称为 --roundness——但我们不会像以前那样定义它。相反，我们在使用变量时将分配一个默认值。

.button {
  /* --roundness: 2px; */
  border-radius: var(--roundness, 10px);
}

在未定义自定义属性的情况下使用默认值的一个用例是，您的项目仍在设计中，但您的功能今天到期。如果设计发生变化，这使得以后更新值变得容易得多。

因此，您可以为按钮提供一个不错的默认值，满足您的截止日期，当 --roundness 最终被设置为全局自定义属性时，您的按钮将免费获得该更新，而无需返回到它。

您可以在 CodePen 上编辑并取消上面代码的注释，以查看设置 --roundness 后按钮的外观！

模式 3：级联值

现在我们已经掌握了基础知识，让我们开始构建我们应得的未来。我真的很怀念 AIM 和 MySpace 通过允许用户在个人资料上使用自定义文本和背景颜色来表达自我的个性。

让我们把它带回来，并创建一个学校留言板，让每个学生都可以为他们发布的消息设置自己的字体、背景颜色和文本颜色。

基于用户的主题

我们基本上是在让学生创建自定义主题。我们将在 data-attribute 规则集中设置主题配置，以便任何使用这些主题的子元素（在这种情况下为 .message 元素）都可以访问这些自定义属性。

.message {
  background-color: var(--student-background, https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bfff);
  color: var(--student-color, https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000);
  font-family: var(--student-font, "Times New Roman", serif);
  margin-bottom: 10px;
  padding: 10px;
}

[data-student-theme="rachel"] {
  --student-background: rgb(43, 25, 61);
  --student-color: rgb(252, 249, 249);
  --student-font: Arial, sans-serif;
}

[data-student-theme="jen"] {
  --student-background: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bd55349;
  --student-color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  --student-font: Avenir, Helvetica, sans-serif;
}

[data-student-theme="tyler"] {
  --student-background: blue;
  --student-color: yellow;
  --student-font: "Comic Sans MS", "Comic Sans", cursive;
}

这是标记：

<div data-student-theme="chris">
    <p>Chris: I've spoken at events and given workshops all over the world at conferences.</p>
  </div>
  <div data-student-theme="rachel">
    <p>Rachel: I prefer email over other forms of communication.</p>
  </div>
  <div data-student-theme="jen">
    <p>Jen: This is why I immediately set up my new team with Slack for real-time chat.</p>
  </div>
  <div data-student-theme="tyler">
    <p>Tyler: I miss AIM and MySpace, but this message board is okay.</p>
  </div>

我们使用 [data-student-theme] 选择器为我们的学生主题规则集设置了所有学生主题。如果为该学生设置了背景、颜色和字体的自定义属性，则这些自定义属性将应用于我们的 .message 规则集，因为 .message 是包含 data-attribute 的 div 的子元素，而该 div 又包含要使用的自定义属性值。否则，将使用我们提供的默认值。

可读性主题覆盖

尽管用户控制自定义样式很有趣也很酷，但用户选择的样式并不总是具有可访问性，需要考虑对比度、色觉缺陷或任何喜欢在阅读时眼睛不流血的人。还记得 GeoCities 时代吗？

让我们添加一个提供更清晰外观和感觉的类，并将其设置在父元素上，以便在存在该类时覆盖任何学生主题。

.readable-theme [data-student-theme] {
  --student-background: hsl(50, 50%, 90%);
  --student-color: hsl(200, 50%, 10%);
  --student-font: Verdana, Geneva, sans-serif;
}

  ...

我们利用级联通过设置更高的特异性来覆盖学生主题，以便背景、颜色和字体在范围内，并将应用于每个 .message 规则集。

模式 4：作用域规则集

说到作用域，我们可以对自定义属性进行作用域限定，并使用它们来简化原本是样板 CSS 的内容。例如，我们可以为不同的链接状态定义变量。

a {
  --link: hsl(230, 60%, 50%);
  --link-visited: hsl(290, 60%, 50%);
  --link-hover: hsl(230, 80%, 60%);
  --link-active: hsl(350, 60%, 50%);
}

a:link {
  color: var(--link);
}

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

a:hover {
  color: var(--link-hover);
}

a:active {
  color: var(--link-active);
}

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Example</a>

现在我们已经在 <a></a> 元素上全局编写了自定义属性，并在我们的链接状态上使用了它们，我们不需要再次编写它们。这些属性的作用域限定在我们 <a></a> 元素的规则集中，因此它们仅设置在锚点标签及其子元素上。这使我们不必污染全局命名空间。

示例：灰度链接

展望未来，我们可以通过更改不同用例的自定义属性来控制我们刚刚创建的链接。例如，让我们创建一个灰色的链接。

.grayscale {
  --link: LightSlateGrey;
  --link-visited: Silver;
  --link-hover: DimGray;
  --link-active: LightSteelBlue;
}

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Example</a>

我们声明了一个 .grayscale 规则集，其中包含不同链接状态的颜色。由于此规则集的选择器比默认值具有更高的特异性，因此将使用这些变量值，然后将其应用于链接状态的伪类规则集，而不是在 <a></a> 元素上定义的内容。

示例：自定义链接

如果设置四个自定义属性感觉工作量太大，如果我们只设置一个色相值呢？这可能会使管理变得容易得多。

.custom-link {
  --hue: 30;
  --link: hsl(var(--hue), 60%, 50%);
  --link-visited: hsl(calc(var(--hue)   60), 60%, 50%);
  --link-hover: hsl(var(--hue), 80%, 60%);
  --link-active: hsl(calc(var(--hue)   120), 60%, 50%);
}

.danger {
  --hue: 350;
}

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Example</a>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Link Example</a>

通过引入色相值的变量并将其应用于其他变量中的 HSL 颜色值，我们只需更改一个值即可更新所有四个链接状态。

计算与自定义属性结合使用非常强大，因为它们可以让您的样式更具表现力，而无需付出更多努力。查看 Josh Bader 的这项技术，他使用类似的方法来强制执行按钮的可访问颜色对比度。

模式 5：Mixin

关于自定义属性，Mixin 是声明为自定义属性值的函数。Mixin 的参数是其他自定义属性，当这些属性更改时，它们将重新计算 Mixin，这反过来又会更新样式。

我们刚刚看到的自定义链接示例实际上是一个 Mixin。我们可以设置 --hue 的值，然后所有四个链接状态将相应地重新计算。

示例：基线网格基础

让我们通过创建一个基线网格来帮助垂直节奏来了解更多关于 Mixin 的知识。这样，我们的内容通过使用一致的间距来获得令人愉悦的节奏。

.baseline,
.baseline * {
  --rhythm: 2rem;
  --line-height: var(--sub-rhythm, var(--rhythm));
  --line-height-ratio: 1.4;
  --font-size: calc(var(--line-height) / var(--line-height-ratio));
}

.baseline {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

我们将基线网格的规则集应用于 .baseline 类及其任何后代。

• --rhythm：这是我们基线的基石。更新它将影响所有其他属性。
• --line-height：默认情况下设置为 --rhythm，因为这里没有设置 --sub-rhythm。
• --sub-rhythm：这允许我们覆盖 --line-height——随后是 --font-size——同时保持整体基线网格。
• --line-height-ratio：这有助于在文本行之间强制执行适当的间距。
• --font-size：这是通过将 --line-height 除以 --line-height-ratio 计算得出的。

我们还在 .baseline 规则集中设置了 font-size 和 line-height 以使用基线网格中的 --font-size 和 --line-height。简而言之，每当节奏发生变化时，行高和字体大小都会相应地变化，同时保持易读的体验。

好的，让我们使用基线。

让我们创建一个小型网页。我们将使用我们的 --rhythm 自定义属性来设置所有元素之间的间距。

.baseline h2,
.baseline p,
.baseline ul {
  padding: 0 var(--rhythm);
  margin: 0 0 var(--rhythm);
}

.baseline p {
  --line-height-ratio: 1.2;
}

.baseline h2 {
  --sub-rhythm: calc(3 * var(--rhythm));
  --line-height-ratio: 1;
}

.baseline p,
.baseline h2 {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

.baseline ul {
  margin-left: var(--rhythm);
}

<h2 id="A-Tiny-Webpage">A Tiny Webpage</h2>
  <p>This is the tiniest webpage. It has three noteworthy features:</p>
  

• Tiny
• Exemplary
• Identifies as Hufflepuff

我们在这里基本上使用了两个 Mixin：--line-height 和 --font-size。我们需要将属性 font-size 和 line-height 设置为它们的自定义属性对应项才能设置标题和段落。Mixin 在这些规则集中已被重新计算，但需要在更新的样式应用于它们之前设置它们。

需要注意的是：当使用通配符选择器应用 Mixin 时，您可能不希望在规则集中本身使用自定义属性值。它使这些样式比级联带来的任何其他继承具有更高的特异性，使得在不使用 !important 的情况下很难覆盖它们。

模式 6：内联属性

我们也可以内联声明自定义属性。让我们构建一个轻量级网格系统来演示。

.grid {
  --columns: auto-fit;

  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}

<div>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Bill Murray"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468445958706.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Nic Cage"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468446478697.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Nic Cage gray"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Bill Murray gray"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468446644293.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Nic Cage crazy"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174468446996811.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Nic Cage gif">
</div>

默认情况下，网格具有大小相等的列，这些列将自动排列成单行。

为了控制列数，我们可以在网格元素上内联设置 --columns 自定义属性。

<div style="--columns: 3;">
  ...
</div>

我们刚刚查看了六种不同的自定义属性用例——至少是我常用的用例。即使您已经了解并一直在使用自定义属性，希望看到这些使用方法也能让您更好地了解何时何地有效地使用它们。

您是否使用自定义属性使用了不同类型的模式？请在评论中分享它们并链接一些演示——我很想看到它们！

如果您不熟悉自定义属性并且正在寻求提升，请尝试使用我们在此处介绍的示例，但添加媒体查询。您将看到这些属性的适应性有多强，以及当您拥有随时更改值的强大功能时，有多少有趣的机会出现。

此外，CSS-Tricks 上还有大量其他优秀的资源，可以在自定义属性指南中提升您的自定义属性技能。

以上是实用CSS自定义属性的模式使用的详细内容。更多信息请关注PHP中文网其他相关文章！