Modern Web Guidance 现已稳定！利用专家审核的 Web 开发最佳实践，升级您的编码智能体。阅读公告。

Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

构建“设置”组件

关于如何构建滑块和复选框设置组件的基础概览。

Adam Argyle

在本文中，我想分享有关为 Web 构建设置组件的想法，该组件具有自适应性，支持多种设备输入，并且可跨浏览器运行。试用演示版。

演示

如果您更喜欢视频，或者想预览我们要构建的内容的界面/用户体验，请观看 YouTube 上的简短演示：

概览

我已将此组件的各个方面分为以下几个部分：

布局
颜色
自定义范围输入
自定义复选框输入
无障碍注意事项
JavaScript

布局

这是第一个完全使用 CSS 网格的 GUI 挑战演示！以下是使用适用于网格的 Chrome 开发者工具突出显示的每个网格：

彩色轮廓和间距叠加层，有助于显示构成设置布局的所有框

注意： 如需突出显示网格布局，请执行以下操作：1. 使用 cmd+opt+i 或 ctrl+alt+i 打开 Chrome 开发者工具。1. 选择“样式”标签页旁边的“布局”标签页。1. 在“网格布局”部分下，查看所有布局。1. 更改所有布局的颜色。

仅用于间隙

最常见的布局：

foo {
  display: grid;
  gap: var(--something);
}

我将此布局称为“仅用于间距”，因为它仅使用网格在块之间添加间距。

有五种布局使用此策略，以下是所有这些布局：

垂直网格布局，其中突出显示了轮廓并填充了间隙

fieldset 元素包含每个输入组 (.fieldset-item)，它使用 gap: 1px 在元素之间创建细线边框。无需复杂的边框解决方案！

填补了空白

.grid {
  display: grid;
  gap: 1px;
  background: var(--bg-surface-1);

  & > .fieldset-item {
    background: var(--bg-surface-2);
  }
}

边框技巧

.grid {
  display: grid;

  & > .fieldset-item {
    background: var(--bg-surface-2);

    &:not(:last-child) {
      border-bottom: 1px solid var(--bg-surface-1);
    }
  }
}

自然网格换行

最复杂的布局最终是宏布局，即 <main> 和 <form> 之间的逻辑布局系统。

居中封装内容

Flexbox 和网格都提供了 align-items 或 align-content 的功能，在处理换行元素时，content 布局对齐方式会将空间分配给子元素作为一个组。

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
}

主元素使用 place-content: center 对齐简写，以便在单列和双列布局中，子元素在垂直和水平方向上都居中。

观看上面的视频，了解“内容”如何保持居中，即使发生了换行。

重复自动调整 minmax

<form> 为每个部分使用自适应网格布局。此布局会根据可用空间从一列切换为两列。

form {
  display: grid;
  gap: var(--space-xl) var(--space-xxl);
  grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));
  align-items: flex-start;
  max-width: 89vw;
}

此网格的 row-gap (--space-xl) 值与 column-gap (--space-xxl) 值不同，以便为自适应布局增添个性化特色。当列堆叠时，我们希望有一个较大的间隙，但不要像在宽屏上那样大。

grid-template-columns 属性使用 3 个 CSS 函数：repeat()、minmax() 和 min()。Una Kravets 就此撰写了一篇精彩的布局博文，称之为 RAM。

与 Una 的布局相比，我们的布局有 3 个特别之处：

我们传递了一个额外的 min() 函数。
我们指定 align-items: flex-start。
风格为max-width: 89vw。

Evan Minto 在其博客文章使用 minmax() 和 min() 的本质上自适应的 CSS 网格中对额外的 min() 函数进行了详细说明。建议您阅读一下。flex-start 对齐校正是为了消除默认的拉伸效果，这样此布局的子级就不需要具有相同的高度，而是可以具有自然的固有高度。YouTube 视频简要介绍了这一新增的对齐方式。

max-width: 89vw 值得在这篇博文中进行简要分析。下面我们来看看应用样式和不应用样式的布局：

发生了什么？指定 max-width 后，它会为 auto-fit 布局算法提供上下文、明确的大小或确定的大小，以便算法知道该空间可以容纳多少个重复项。虽然该空间显然是“全宽”，但根据 CSS 网格规范，必须提供确切的大小或最大大小。我已提供大小上限。

那么，为什么选择 89vw？因为“它对我的布局有效”。我和其他几位 Chrome 团队成员正在调查为什么更合理的值（例如 100vw）不够，以及这是否实际上是一个 bug。

间距

此布局的和谐感主要来自有限的间距调色板，确切地说是 7 个。

:root {
  --space-xxs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 6rem;
}

这些流程与网格、CSS @nest 和 @media 的第 5 级语法完美契合。以下是一个示例，即完整的 <main> 布局样式集。

main {
  display: grid;
  gap: var(--space-xl);
  place-content: center;
  padding: var(--space-sm);

  @media (width >= 540px) {
    & {
      padding: var(--space-lg);
    }
  }

  @media (width >= 800px) {
    & {
      padding: var(--space-xl);
    }
  }
}

内容居中的网格，默认情况下具有适度的内边距（如在移动设备上）。但随着视口空间变大，它会通过增加内边距来展开。2021 年的 CSS 看起来很不错！

还记得之前的“仅用于间隙”布局吗？以下是它们在此组件中的更完整版本：

header {
  display: grid;
  gap: var(--space-xxs);
}

section {
  display: grid;
  gap: var(--space-md);
}

颜色

对色彩的克制使用，让这款设计既富有表现力，又极简。我的做法如下：

:root {
  --surface1: lch(10 0 0);
  --surface2: lch(15 0 0);
  --surface3: lch(20 0 0);
  --surface4: lch(25 0 0);

  --text1: lch(95 0 0);
  --text2: lch(75 0 0);
}

关键术语： PostCSS lab() 和 lch() 插件是 PostCSS Preset Env 的一部分，将输出 rgb() 颜色。

我使用数字来命名表面和文本颜色，而不是使用 surface-dark 和 surface-darker 等名称，因为在媒体查询中，我会翻转它们，而浅色和深色将没有意义。

我会在偏好媒体查询中像这样翻转它们：

:root {
  ...

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --surface2: lch(100 0 0);
      --surface3: lch(98 0 0);
      --surface4: lch(85 0 0);

      --text1: lch(20 0 0);
      --text2: lch(40 0 0);
    }
  }
}

在深入了解颜色语法细节之前，先快速了解一下整体情况和策略非常重要。不过，我好像讲得太快了，让我先退回去一点。

LCH？

在不深入探讨色彩理论的情况下，LCH 是一种面向人类的语法，它迎合了我们感知色彩的方式，而不是我们用数学方法（例如 255）测量色彩的方式。这使其具有明显的优势，因为人类可以更轻松地编写它，并且其他人类也会适应这些调整。

pod.link/csspodcast 网页的屏幕截图，其中显示了“Color 2: Perception”剧集 — 在 CSS 播客中了解感知颜色（以及更多内容！）

今天，在这个演示中，我们重点关注语法以及我为实现浅色和深色模式而切换的值。我们来看 1 种 Surface 颜色和 1 种文本颜色：

:root {
  --surface1: lch(10 0 0);
  --text1:    lch(95 0 0);

  @media (prefers-color-scheme: light) {
    & {
      --surface1: lch(90 0 0);
      --text1:    lch(40 0 0);
    }
  }
}

--surface1: lch(10 0 0) 转换为 10% 亮度、0 色度和 0 色相：一种非常深的无色灰色。然后，在浅色模式的媒体查询中，亮度会通过 --surface1: lch(90 0 0); 翻转为 90%。这就是该策略的要点。首先，只需更改两个主题之间的亮度，保持设计所需的对比度或可保持无障碍功能的对比度。

lch() 的额外好处在于，亮度是以人为本的，我们可以放心地对其进行 % 更改，因为在感知上，它会始终如一地呈现出 % 的差异。例如，hsl() 不太可靠。

如果您有兴趣，可以详细了解色彩空间和 lch()。它来了！

CSS 目前根本无法访问这些颜色。我再重复一遍：在大多数现代显示器中，我们无法访问三分之一的颜色。这些并不是普通的颜色，而是屏幕可以显示的最生动的颜色。我们的网站之所以色彩失真，是因为显示器硬件的发展速度超过了 CSS 规范和浏览器实现。
Lea Verou

具有配色方案的自适应表单控件

许多浏览器都提供深色主题控件（目前有 Safari 和 Chromium），但您必须在 CSS 或 HTML 中指定您的设计使用这些控件。

以上演示了 DevTools 的“样式”面板中该属性的效果。演示中使用的是 HTML 标记，我认为这通常是更好的位置：

<meta name="color-scheme" content="dark light">

如需了解详情，请参阅 Thomas Steiner 撰写的这篇color-scheme文章。除了深色复选框输入还有更多收获！

CSS `accent-color`

最近，表单元素上的 accent-color 出现了一些活动，这是一种可以更改浏览器输入元素中使用的色调颜色的单一 CSS 样式。如需了解详情，请参阅 GitHub 上的相关内容。我已将其添加到此组件的样式中。随着浏览器支持该属性，我的复选框将更符合主题，呈现出粉色和紫色的局部彩色效果。

input[type="checkbox"] {
  accent-color: var(--brand);
}

Linux 上的 Chromium 中粉色复选框的屏幕截图

具有固定渐变和 focus-within 的局部彩色

色彩在少量使用时最能凸显效果，而我喜欢通过色彩丰富的界面互动来实现这一点。

上述视频中包含多个层级的界面反馈和互动，这些反馈和互动通过以下方式为互动赋予个性：

突出显示上下文。
提供有关值在范围内的“满度”的界面反馈。
提供界面反馈，表明某个字段正在接受输入。

为了在元素被互动时提供反馈，CSS 使用 :focus-within 伪类来更改各种元素的外观，让我们来分析一下 .fieldset-item，它非常有趣：

.fieldset-item {
  ...

  &:focus-within {
    background: var(--surface2);

    & svg {
      fill: white;
    }

    & picture {
      clip-path: circle(50%);
      background: var(--brand-bg-gradient) fixed;
    }
  }
}

当此元素的某个子元素具有 focus-within 时：

.fieldset-item 背景被分配了对比度更高的表面颜色。
嵌套的 svg 填充为白色，以提高对比度。
嵌套的 <picture> clip-path 会展开为一个完整的圆圈，背景会填充明亮的固定渐变。

自定义范围

以下面的 HTML 输入元素为例，我将向您展示如何自定义其外观：

<input type="range">

我们需要自定义此元素的 3 个部分：

范围元素/容器
跟踪
Thumb

范围元素样式

input[type="range"] {
  /* style setting variables */
  --track-height: .5ex;
  --track-fill: 0%;
  --thumb-size: 3ex;
  --thumb-offset: -1.25ex;
  --thumb-highlight-size: 0px;

  appearance: none;         /* clear styles, make way for mine */
  display: block;
  inline-size: 100%;        /* fill container */
  margin: 1ex 0;            /* ensure thumb isn't colliding with sibling content */
  background: transparent;  /* bg is in the track */
  outline-offset: 5px;      /* focus styles have space */
}

CSS 的前几行是样式的自定义部分，我希望清楚地标记它们会有所帮助。其余样式大多是重置样式，旨在为构建组件的棘手部分提供一致的基础。

跟踪样式

input[type="range"]::-webkit-slider-runnable-track {
  appearance: none; /* clear styles, make way for mine */
  block-size: var(--track-height);
  border-radius: 5ex;
  background:
    /* hard stop gradient:
        - half transparent (where colorful fill we be)
        - half dark track fill
        - 1st background image is on top
    */
    linear-gradient(
      to right,
      transparent var(--track-fill),
      var(--surface1) 0%
    ),
    /* colorful fill effect, behind track surface fill */
    var(--brand-bg-gradient) fixed;
}

诀窍在于“显露”鲜艳的填充颜色。这是通过在顶部使用硬停渐变来实现的。渐变在达到填充百分比之前是透明的，之后使用未填充的轨道表面颜色。在未填充的表面后面，是全宽颜色，等待透明度来揭示它。

轨道填充样式

我的设计确实需要 JavaScript 才能保持填充样式。有一些仅限 CSS 的策略，但它们要求滑块元素与滑轨的高度相同，而我无法在这些限制内找到和谐。

/* grab sliders on page */
const sliders = document.querySelectorAll('input[type="range"]')

/* take a slider element, return a percentage string for use in CSS */
const rangeToPercent = slider => {
  const max = slider.getAttribute('max') || 10;
  const percent = slider.value / max * 100;

  return `${parseInt(percent)}%`;
};

/* on page load, set the fill amount */
sliders.forEach(slider => {
  slider.style.setProperty('--track-fill', rangeToPercent(slider));

  /* when a slider changes, update the fill prop */
  slider.addEventListener('input', e => {
    e.target.style.setProperty('--track-fill', rangeToPercent(e.target));
  })
})

我认为这能带来不错的视觉升级。即使没有 JavaScript，滑块也能正常工作，--track-fill 属性不是必需的，如果不存在，它只是没有填充样式。如果 JavaScript 可用，请填充自定义属性，同时观察任何用户更改，将自定义属性与值同步。

Ana Tudor 在 CSS-Tricks 上发表了一篇精彩博文，其中演示了仅使用 CSS 的轨道填充解决方案。我还发现这个 range 元素非常鼓舞人心。

缩略图样式

input[type="range"]::-webkit-slider-thumb {
  appearance: none; /* clear styles, make way for mine */
  cursor: ew-resize; /* cursor style to support drag direction */
  border: 3px solid var(--surface3);
  block-size: var(--thumb-size);
  inline-size: var(--thumb-size);
  margin-top: var(--thumb-offset);
  border-radius: 50%;
  background: var(--brand-bg-gradient) fixed;
}

这些样式大多是为了制作一个漂亮的圆圈。您会再次看到固定的背景渐变，它统一了滑块、滑轨和相关 SVG 元素的动态颜色。我将互动样式分离开来，以便隔离用于悬停突出显示的 box-shadow 技术：

@custom-media --motionOK (prefers-reduced-motion: no-preference);

::-webkit-slider-thumb {
  …

  /* shadow spread is initally 0 */
  box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);

  /* if motion is OK, transition the box-shadow change */
  @media (--motionOK) {
    & {
      transition: box-shadow .1s ease;
    }
  }

  /* on hover/active state of parent, increase size prop */
  @nest input[type="range"]:is(:hover,:active) & {
    --thumb-highlight-size: 10px;
  }
}

目标是打造一个易于管理且具有动画效果的视觉亮点，用于展示用户反馈。通过使用 box-shadow，我可以避免使用该效果触发布局。为此，我创建了一个不模糊且与滑块元素的圆形形状相匹配的阴影。然后，我更改并过渡了悬停时的扩散大小。

如果复选框的高亮效果也这么简单就好了…

跨浏览器选择器

我发现，我需要这些 -webkit- 和 -moz- 选择器来实现跨浏览器一致性：

input[type="range"] {
  &::-webkit-slider-runnable-track {}
  &::-moz-range-track {}
  &::-webkit-slider-thumb {}
  &::-moz-range-thumb {}
}

自定义复选框

以下面的 HTML 输入元素为例，我将向您展示如何自定义其外观：

<input type="checkbox">

我们需要自定义此元素的 3 个部分：

复选框元素
关联的标签
突出显示效果

复选框元素

input[type="checkbox"] {
  inline-size: var(--space-sm);   /* increase width */
  block-size: var(--space-sm);    /* increase height */
  outline-offset: 5px;            /* focus style enhancement */
  accent-color: var(--brand);     /* tint the input */
  position: relative;             /* prepare for an absolute pseudo element */
  transform-style: preserve-3d;   /* create a 3d z-space stacking context */
  margin: 0;
  cursor: pointer;
}

transform-style 和 position 样式为我们稍后将引入的伪元素做好准备，以便为突出显示设置样式。否则，大部分都是我个人的一些主观风格。我希望光标是指针，我喜欢轮廓偏移，默认复选框太小，如果accent-color受支持，请将这些复选框纳入品牌配色方案。

复选框标签

为复选框提供标签非常重要，原因有两点。第一个是表示复选框值的用途，回答“什么功能是开启还是关闭？”其次，从用户体验的角度来看，Web 用户已经习惯于通过关联的标签与复选框进行互动。

输入

<input
  type="checkbox"
  id="text-notifications"
  name="text-notifications"
>

标签

<label for="text-notifications">
  <h3>Text Messages</h3>
  <small>Get notified about all text messages sent to your device</small>
</label>

在标签上，添加一个 for 属性，该属性通过 ID 指向复选框：<label for="text-notifications">。在复选框中，同时使用 name 和 id，以确保使用不同的工具和技术（例如鼠标或屏幕阅读器）都能找到它：<input type="checkbox" id="text-notifications" name="text-notifications">。:hover、:active等功能均可免费连接，从而增加表单的互动方式。

复选框突出显示

我希望保持界面一致，而滑块元素具有一个不错的缩略图突出显示效果，我想将其与复选框一起使用。缩略图能够使用 box-shadow 及其 spread 属性来放大和缩小阴影。不过，该效果在这里不起作用，因为我们的复选框是方形的，而且应该是方形的。

我能够使用伪元素和大量棘手的 CSS 实现相同的视觉效果：

@custom-media --motionOK (prefers-reduced-motion: no-preference);

input[type="checkbox"]::before {
  --thumb-scale: .01;                        /* initial scale of highlight */
  --thumb-highlight-size: var(--space-xl);

  content: "";
  inline-size: var(--thumb-highlight-size);
  block-size: var(--thumb-highlight-size);
  clip-path: circle(50%);                     /* circle shape */
  position: absolute;                         /* this is why position relative on parent */
  top: 50%;                                   /* pop and plop technique (https://web.dev/centering-in-css#5-pop-and-plop) */
  left: 50%;
  background: var(--thumb-highlight-color);
  transform-origin: center center;            /* goal is a centered scaling circle */
  transform:                                  /* order here matters!! */
    translateX(-50%)                          /* counter balances left: 50% */
    translateY(-50%)                          /* counter balances top: 50% */
    translateZ(-1px)                          /* PUTS IT BEHIND THE CHECKBOX */
    scale(var(--thumb-scale))                 /* value we toggle for animation */
  ;
  will-change: transform;

  @media (--motionOK) {                       /* transition only if motion is OK */
    & {
      transition: transform .2s ease;
    }
  }
}

/* on hover, set scale custom property to "in" state */
input[type="checkbox"]:hover::before {
  --thumb-scale: 1;
}

创建圆形伪元素是一项简单的工作，但将其放置在它所附加的元素后面则更难。这是我修复前后的对比：

这绝对是一种微交互，但对我来说，保持视觉一致性很重要。动画缩放技术与我们在其他地方使用的技术相同。我们将自定义属性设置为新值，并让 CSS 根据动画偏好设置对其进行过渡。这里的关键功能是 translateZ(-1px)。父级创建了一个 3D 空间，而这个伪元素子级通过将自身稍微向后放置在 z 空间中来利用该空间。

无障碍

YouTube 视频很好地演示了此设置组件的鼠标、键盘和屏幕阅读器互动。我将在这里详细说明一些细节。

HTML 元素选项

<form>
<header>
<fieldset>
<picture>
<label>
<input>

每个文件都包含用户浏览工具的提示和技巧。有些元素提供互动提示，有些元素连接互动，还有些元素有助于构建屏幕阅读器浏览的无障碍树。

HTML 属性

我们可以隐藏屏幕阅读器不需要的元素，在本例中，就是滑块旁边的图标：

<picture aria-hidden="true">

上述视频演示了 Mac OS 上的屏幕阅读器流程。请注意，输入焦点是如何直接从一个滑块移到下一个滑块的。这是因为我们隐藏了可能在前往下一个滑块的途中停留的图标。如果没有此属性，用户就需要停下来，听完描述，然后跳过他们可能看不到的图片。

确保对屏幕阅读器互动进行跨浏览器测试。原始演示在具有 aria-hidden="true" 的元素列表中包含 <label>，但在 Twitter 对话揭示了跨浏览器差异后，该元素已被移除。

SVG 是一堆数学公式，我们来添加一个 <title> 元素，以便在鼠标悬停时显示标题，并添加一个人类可读的注释，说明这些数学公式创建的内容：

<svg viewBox="0 0 24 24">
  <title>A note icon</title>
  <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>

除此之外，我们还使用了足够多标记清晰的 HTML，因此该表单在鼠标、键盘、游戏控制器和屏幕阅读器上都能很好地运行。

JavaScript

我已经介绍过如何通过 JavaScript 管理轨道填充颜色，现在我们来看看与 <form> 相关的 JavaScript：

const form = document.querySelector('form');

form.addEventListener('input', event => {
  const formData = Object.fromEntries(new FormData(form));
  console.table(formData);
})

每次与表单互动并更改表单时，控制台都会将表单作为对象记录到表格中，以便在提交到服务器之前轻松查看。

console.table() 结果的屏幕截图，其中表单数据以表格形式显示

总结

现在，您已经知道我是如何做到的，那么您会怎么做呢？！这会带来一些有趣的组件架构！谁会率先在自己喜欢的框架中推出支持插槽的版本？🙂

让我们采用多样化的方法，学习在 Web 上构建应用的所有方式。创建演示，在 Twitter 上向我发送链接，我会将其添加到下面的社区改编部分！

社区混剪

@tomayac，感谢他们为复选框标签的悬停区域提供的样式！此版本在元素之间没有悬停间隙：演示和源代码。

构建“设置”组件 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

概览

布局

仅用于间隙

自然网格换行

居中封装内容

重复自动调整 minmax

间距

颜色

LCH？

具有配色方案的自适应表单控件

CSS accent-color

具有固定渐变和 focus-within 的局部彩色

自定义范围

范围元素样式

跟踪样式

轨道填充样式

缩略图样式

跨浏览器选择器

自定义复选框

复选框元素

复选框标签

复选框突出显示

无障碍

HTML 元素选项

HTML 属性

JavaScript

总结

社区混剪

构建“设置”组件

CSS `accent-color`