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

从自定义属性（也称为变量）到过滤器，动画或者数学运算，CSS采用了做很多过去我们在JavaScript（或流行的CSS预处理器）使用的操作，并使其在本地可用。

两种语言有不同的用途。随着每个浏览器版本、功能发布和属性的增加，CSS正逐渐成为一种非常强大的语言，能够处理我们以前依赖于JavaScript的功能。

在这篇文章中，我们将会学习一些你可能没有听过的CSS金块，它们将会自然（及优雅地）处理例如平滑滚动，暗黑模式，表单验证以及更多在以前需要用多行Js技巧才能实现的功能。

曾经有一段时间，我们不得不依靠JavaScript（甚至jQuery）实现来完成此操作，并使用window.scrollY复制此行为。多亏scroll-behavior属性，那些日子已经过去了。现在，我们可以用一行CSS代码处理网站上的平滑滚动！

平滑滚动

曾经有一段时间，我们不得不依靠JavaScript（甚至jQuery）实现来完成此操作，并使用window.scrollY复制此行为。多亏scroll-behavior属性，那些日子已经过去了。现在，我们可以用一行CSS代码处理网站上的平滑滚动！

  1. html {
  2.   scroll-behavior: smooth;
  3. }

浏览器支持率大约为75％，并且很快就会进入到Edge 76。在下面的Codepen中看看它是如何工作的：

  1. <main class="sky" id="top">
  2.   <!-- buttons to scroll to bottom and top -->
  3.   <a href="#bottom">Click to scroll 👇</a>
  4.   <a href="#top" class="top">Back to top 👆</a>
  5.   <!-- balloons are generated randomly via javascript 🧙🏻‍♂️ -->
  6. </main>
  7. <!-- Hidden div to allow bottom scrolling -->
  8. <div id="bottom"></div>
/* This is all you need to create the smooth scrolling effect */
html {
  scroll-behavior: smooth;
}

暗黑模式

在macOS发布了它的暗黑模式功能和Safari实现了preferences-color-scheme媒体特性之后，暗黑模式已经成为最近的热门趋势，它允许我们检测用户是否默认开启了暗黑模式。

你可能认为暗黑模式是一个实现起来非常复杂的功能，包括CSS变量，每个主题对应不同颜色，以及一些JavaScript来连接必要的点击事件来针对网站上的更改。它是部分正确的，并且目前是实现它的标准方法（在我的网站上就是这么做的），它不需要这么复杂。

Wei Gao在她的博客上向我们展示了一种巧妙的方法，使用mix-blend-mode: difference(CSS支持的混合模式之一)来实现类似的结果(更多的是一种反向模式)。如果你曾经尝试过Photoshop的混合模式，这是一样的，不同的是它直接在浏览器上。

它的一些优点包括不必指定反转的颜色（混合模式将为你完成此操作），并且可以隔离不需要更改的元素。它的一些局限性是你没有完整的颜色范围，因此性能可能是一个问题。

目前，本地浏览器支持率为77% + 13%带有前缀(全部91%)，而Edge支持的版本是76。

要想更深入地了解这种混合模式的工作原理，请查看Wei关于它的精彩文章。要进行有趣的实验，请查看以下Codepen。

文字截断

这是我个人的最爱之一，因为这是我在开发依赖CMS来填充内容的网站时遇到的一个常见问题。可变的文字长度可能会使你可爱的卡片在不同的尺寸或分辨率下看起来不一致。戴夫·鲁珀特有一篇关于这个问题的好文章。

在过去，我总是在不加思索的情况下考虑基于javascript的解决方案，因为实现这个结果的大多数CSS技术都相当“旁门左道”。但是，当我在我的网站上添加一个博客时，我发现了一些CSS属性，它们结合在一起，可能能提供一个本地的、易于实现的解决方案。结合text-overflow和line-clamp!

你可以在这查看这个Codepen：传送门

Text-overflow

这是一种广泛采用的，完全受支持的纯CSS本机解决方案，用于控制文本在其包含元素溢出时的行为方式。你可以将其值设置为ellipsis，从而得到Unicode…字符。到目前为止都很好，但是它的主要局限性在于，无论文本的长度如何，你总会得到一行被截断的文本。因此，这可能是标题的理想选择，但对摘录，评论或长篇文章却没那么有用。参见以下示例：

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

Line-clamp

line-clamp也不是什么新特性。Dave DeSandro大约在十年前就向我们展示了这种技术(因此需要使用老的flexbox用display:-webkit-box和-webkit-box-orient: vertical实现)。

那这里有什么新东西？ Firefox在版本68上实现了它，然后等待它-带有-webkit前缀！而且既然Edge基于Chromium，我们还可以使用-webkit前缀将浏览器支持提高到92％。

这意味着我们现在可以结合使用三行CSS行来截断多行文本，就像这样。这里唯一要注意的是，line clamps规范是目前在编辑的草案CSS Overflow Module Level 3中的一部分，这可能意味着该规范可能会有所更改。要考虑的另一件事是，你无法控制要显示的字符数，这可能会导致某些不太方便（但很有趣）的截断方案。除此之外，可以愉快地进行CSS clamping！

滚动捕捉

CSS scroll snapping是另一个Chrome用户已经使用了一段时间的方便功能，现在我们可以在Firefox最新的68版上使用它。我们还将在第76版的Edge上获得它，使所有主要浏览器的总体浏览器支持更高。

你是否曾经注意到某些精美的网站会创建全屏部分，并在滚动时将视口锁定在特定位置？这是这种行为的一个例子。

在一段时间内让它正常工作是很棘手的，需要大量的数学计算和JavaScript。但是现在，CSS能够在本地创建这样的交互。

从某种意义上说，它与Flexbox或CSS Grid的工作方式相似，因为你需要一个容器元素，在该容器元素上设置scroll-snap-type和多个为其设置了scroll-snap-align的子元素，如下所示：

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

.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所说的：不要乱动滚动条。这种技术可能对滑块、图片库或页面上的某些特定部分有用，但是要谨慎使用，因为它会影响整体性能和用户体验。

你可以在这查看这个Codepen：传送门

粘性导航

跟随功能在之前实现起来需要大量的JavaScript计算，并且在实现性能方面的代价也相当昂贵，现在我们有了 sticky positioning。以前我们需要offsetTop和window.scrollY，现在我们有position: sticky为我们完成所有魔法。具有粘性定位的元素将表现为一个相对定位的元素，直到到达视口上的一个给定点，然后成为一个固定定位的元素。使用-webkit前缀的浏览器支持高达92%。

因此，尽管听起来像执行以下操作一样容易：

header {
  position: sticky;
  top: 0;
}

为了很好地设置标题为sticky，一定要知道HTML的结构，这很重要！例如，如果你的HTML结构是这样的：

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

header将只能粘贴到它的父元素(在本例中是<main>标签)覆盖的区域。这个“sticky parent”决定了“sticky item”可以作用的范围。在Elad Shechter的这篇文章中更好地解释了这个问题，这里有一个使用了这种技术的有趣的小实验。

你可以在这查看这个Codepen：传送门

结束：@supports media-rule

正如上面所讨论的，即使这些CSS特性被广泛采用和支持，在添加它们之前，你可能仍然希望检查它们在浏览器上是否可用。如果是这种情况，你可以使用@supports特性查询，它被浏览器广泛采用，并允许你在应用一组样式之前测试浏览器是否支持特定的属性property: value。语法如下:

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

有了这个方便的特性查询，你可以仅在支持它们的浏览器上应用一组样式。这种语法听起来可能很熟悉，因为这正是我们编写媒体查询的方式，而且这是一种很棒的渐进式增强方法，在有这些顶级特性的浏览器上使用这些特性，同时防止在没有这些特性的浏览器上出现不一致的行为。Jen Simmons在她的弹性CSS视频中对此做了更好的解释。

这就是它！希望这些最先进的CSS特性将帮助你交付一个更小的JavaScript包，同时仍然创建有趣和引人注目的ui。同样，你也可以随意再次查看这些代码。

原文链接：https://blog.logrocket.com/5-things-you-can-do-with-css-instead-of-javascript/