使用 CSS 代替 JavaScript 可以实现的 5 件事

作者：Juan Martin García✏️

我并不是第一个指出随着两种语言的发展，CSS 和 JavaScript 之间的界限变得越来越模糊的人。

从自定义属性（又名变量）到过滤器、动画或数学运算，CSS 已经将我们过去在 JavaScript（或流行的 CSS 预处理器）中所做的很多事情原生地提供给我们使用。

两种语言的用途不同。随着浏览器的更新、功能的发布以及属性的增加，CSS 正在成为一种非常强大的语言，能够处理我们之前依赖 JavaScript 实现的功能。

在这篇文章中，我们将了解一些您可能没有听说过的 CSS 金块，它们将原生地（优雅地！）处理诸如平滑滚动、暗模式、表单验证等功能，以及以前需要多行 JS 技巧才能实现的更多功能。

平滑滚动

曾经有一段时间，我们必须依赖 JavaScript（甚至是 jQuery）来实现这种行为。现在有了scroll-behaviorwindow.scrollY属性，这些日子一去不复返了。现在，我们只需一行 CSS 代码就能在网站上实现平滑滚动！

html {
  scroll-behavior: smooth;
}

目前浏览器支持率约为 75%，Edge 76 也即将支持。查看下方 Codepen 中的运行代码：

黑暗模式

自从macOS 发布了暗黑模式功能，Safari 实现了媒体功能后，暗黑模式就成了最近的热门趋势prefers-color-scheme，这使我们能够检测用户是否默认启用了暗黑模式。

您可能会认为暗黑模式的实现很复杂，涉及 CSS 变量、每种方案的不同颜色，以及一些 JavaScript 代码来关联必要的点击事件以定位网站上的更改。虽然这部分是正确的，而且这是目前实现它的标准方法（我在我的网站上就是这么做的），但它并不需要这么复杂。

Wei Gao在她的博客上向我们展示了一种巧妙的方法，可以使用 CSS 支持的混合模式之一 来实现类似的效果（更像reversed mode）mix-blend-mode: difference。如果你曾经使用过Photoshop 的混合模式，那么你就会发现这其实是相同的，只不过是直接在浏览器上实现的。

它的优点包括无需指定反转颜色（混合模式会帮你完成），并且可以隔离不想更改的元素。但它的局限性在于颜色范围不够全，性能可能会有点问题。

目前，原生浏览器支持率为 77%，加上前缀的支持率为 13%（全球支持率为 91%），Edge 支持将于 76 版开始。

想要更深入地了解这种混合模式的工作原理，请务必查看Wei 的精彩文章。想要进行一些有趣的实验，请查看这个 Codepen：

截断文本

这是我个人最喜欢的问题之一，因为这是我在开发依赖CMS填充内容的网站时经常遇到的问题。文案长度不一可能会导致你设计精美的卡片在不同尺寸或分辨率下看起来不一致。Dave Rupert有一篇很棒的文章专门讨论这个问题。

过去，我总是不假思索地尝试基于 JavaScript 的解决方案，因为大多数实现此结果的 CSS 技术都相当“hacky”。​​但当我致力于将博客添加到我的网站时，我发现了一些 CSS 属性，将它们结合起来，或许能够提供一个原生的、易于实现的解决方案。text-overflow见见line-clamp！

文本溢出

这是一个广泛采用、完全支持的纯 CSS 原生解决方案，用于控制文本溢出其包含元素时的行为。您可以将其值设置为ellipsis，这样就会返回 Unicode…字符。目前为止一切顺利，但它的主要限制在于，无论文本长度如何，您总会得到一行被截断的文本。因此，这可能非常适合标题，但对于摘录、评论或长篇文本来说，效果可能不太好。请参见下面的示例：

这就是line-clamp发挥作用的地方。

线夹

这个line-clamp属性也不是什么新鲜事。大约十年前，Dave DeSandro就向我们展示了这项技术（因此需要使用 和 来实现旧的 flexbox ）。display: -webkit-box-webkit-box-orient: vertical

那么这里有什么新功能？Firefox在 68 版本中实现了它，等等……用-webkit前缀！现在 Edge 是基于 Chromium 的，我们还可以使用该-webkit前缀将浏览器支持率提高到 92%。

这意味着我们现在可以使用三行 CSS 代码的组合来截断多行文本，就像这样。这里唯一的问题是，行钳位规范是CSS Overflow Module Level 3的一部分，目前处于编辑草案阶段，这可能意味着规范可能会有一些变化。另外需要考虑的是，你无法控制显示的字符数，这可能会导致一些不太方便（但又有点搞笑）的截断场景。不过除此之外，祝你 CSS 代码钳位愉快！

滚动捕捉

CSS 滚动捕捉是 Chrome 用户早已体验过的另一项便捷功能，现在我们也可以在最新的 Firefox 68 版本中体验它了。Edge 76 版本也将支持该功能，从而全面提升对所有主流浏览器的支持。

你有没有注意到，有些花哨的网站会创建全屏部分，并在你滚动时将视口锁定在特定位置？这里有一个这种行为的例子。

以前，要让这个功能正常工作非常棘手，需要大量的数学计算和 JavaScript 代码。但现在，CSS 已经能够原生地创建这样的交互了。

它的工作原理类似于 Flexbox 或 CSS Grid，因为你需要一个容器元素，scroll-snap-type并在其上设置多个子元素scroll-snap-align，如下所示：

HTML：

<main class=”parent”>
  <section class=”child”></section>
  <section class=”child”></section>
  <section class=”child”></section>
</main>

CSS：

.parent {
  scroll-snap-type: x mandatory;
}

.child {
  scroll-snap-align: start;
}

接受scroll-snap-type两个不同的值：mandatory，这将强制捕捉到元素的顶部或底部，或者proximity，这将为您进行计算并在内容足够接近捕捉点时进行捕捉。

我们可以在父容器上设置的另一个属性是scroll-padding，如果布局上有固定元素（比如固定标题，或者 cookie 策略通知😅），这可能会很方便，否则可能会隐藏某些内容。

对于孩子来说，我们现在只有scroll-snap-align，它会告诉容器要捕捉到哪个点（顶部、中心或底部）。

既然您知道这项技术只需几行 CSS 代码，无需任何数学运算，就能实现滚动捕捉效果，您可能会忍不住想在整个网站上随意添加这项功能，但请记住Robin Rendle 提出的网页设计唯一法则：不要乱动滚动条。这项技术可能对滑块、图片库或页面上的某些特定部分有用，但请谨慎使用，因为它会影响整体性能和用户体验。

粘性导航

继之前需要大量 JavaScript 数学运算且性能成本高昂的功能之后，我们推出了粘性定位。之前需要我们手动完成所有操作offsetTop，window.scrollY现在我们得position: sticky自己动手了！具有粘性定位的元素将表现为相对定位元素，直到到达视口上的指定点，然后变为固定定位元素。使用前缀的浏览器支持率高达 92%-webkit。

因此，虽然这听起来很简单，但做法如下：

header {
  position: sticky;
  top: 0;
}

为了巧妙地将标题设置为粘性标题，务必了解 HTML 的结构！例如，如果您的 HTML 结构如下所示：

<main>
  <header>
    <h1>This is my sticky header!</h1>
  </header>
  <section>This is my content</section>
</main>

标题只能粘贴在其父级（在本例中为<main>标签）覆盖的区域。这个“粘贴父级”决定了“粘贴项”可以作用的范围。Elad Shechter 在这篇文章中更好地解释了这个问题，这里有一个使用这种技术的有趣小实验。

总结一下：@supports media-rule

尽管如上所述，这些 CSS 功能已被广泛采用和支持，但在添加它们之前，您可能仍需要检查它们是否在浏览器中可用@supports。如果是这种情况，您可以使用功能查询，它被浏览器广泛采用，并允许您在应用一组样式之前测试浏览器是否支持特定的property: value样式对。语法如下：

@supports (initial-letter: 4) {
  p::first-letter {
    initial-letter: 4;
  }
}

借助这个便捷的功能查询，您可以仅在支持这些样式的浏览器上应用一组样式。这种语法可能听起来很熟悉，因为它正是我们编写媒体查询的方式，并且是实现所谓渐进式增强的绝佳方式，它能够在支持这些顶级功能的浏览器上立即使用这些功能，同时避免在不支持这些功能的浏览器上出现不一致的行为。Jen Simmons 在她的“弹性 CSS”视频中对此进行了更详细的解释。

就这样！希望这些先进的 CSS 功能能帮助你构建更小的 JavaScript 包，同时还能创建有趣且引人入胜的 UI。另外，也欢迎再次查看这些Codepens 。

编者注：觉得这篇文章有什么问题？您可以在这里找到正确版本。

插件：LogRocket，一个用于 Web 应用的 DVR

 

 
LogRocket是一款前端日志工具，可让您重播问题，就像它们发生在您自己的浏览器中一样。无需猜测错误发生的原因，也无需要求用户提供屏幕截图和日志转储，LogRocket 让您重播会话，快速了解问题所在。它可与任何应用程序完美兼容，不受框架限制，并且提供插件来记录来自 Redux、Vuex 和 @ngrx/store 的额外上下文。
 
除了记录 Redux 操作和状态外，LogRocket 还记录控制台日志、JavaScript 错误、堆栈跟踪、带有标头 + 正文的网络请求/响应、浏览器元数据以及自定义日志。它还会对 DOM 进行插桩，以记录页面上的 HTML 和 CSS，即使是最复杂的单页应用程序，也能重现像素完美的视频。
 
免费试用。

文章“使用 CSS 代替 JavaScript 可以做的 5 件事”最先出现在LogRocket 博客上。