这些特效即将告别JavaScript，迎来CSS时代！

随着CSS和JavaScript的发展，这两种语言之间的界限逐渐变得模糊。

从自定义属性（即变量）到滤镜、动画或数学操做，CSS采用了不少咱们之前在JavaScript（或流行的CSS预处理器）中使用的东西，并为咱们提供了原生支持。

两种语言都有不一样的用途。现代浏览器的每次发布，都带来了新的特性支持，CSS正在成为一种很是强大的语言，可以处理咱们之前依赖JavaScript的功能。

在这篇文章中，咱们将学习一些你可能没有据说过的CSS特性，它们能处理平滑滚动，暗黑模式，表单验证，以及更多之前须要多行JS代码技巧才能完成的功能。

平滑滚动

曾经有一段时间，咱们不得不依靠JavaScript(甚至jQuery)来作到这一点，用的是window.scrollY。多亏了scroll-behavior属性，那些日子已经一去不复返了。咱们如今能够用一行CSS代码就能实现网页的平滑滚动：

html {
  scroll-behavior: smooth;
}

复制代码

浏览器支持率约75%， Edge很快也将推出76版本。看看它是如何工做的： CodePen 示例代码

暗黑模式

自从macOS 发布了暗黑模式功能后，暗黑模式最近变得很是流行。Safari 实现了prefers-color-scheme媒体特性，它容许咱们监测用户是否默认启用了暗黑模式。

你可能认为暗黑模式是一个复杂的特性，它包括CSS变量、每种方案的不一样颜色和一些JavaScript代码来处理必要的单击事件以完成对网站的更改。这么说也没错，它是目前的标准实现方法。

Wei Gao在她的博客上向咱们展现了用 mix-blend-mode: difference(CSS支持的一种混合模式)实现相似效果(更多的是一种“反色模式”)。若是你曾经尝试过Photoshop混合模式，这跟它是同样的，只不过是在浏览器上。

它的一些优势包括没必要指定反转的颜色(混合模式能够为你作到这一点)，而且你能够隔离不想更改的元素。它的一些限制是，你没有一个完整的颜色范围，性能多是一个问题。

目前，浏览器原生支持率77%，带前缀的话再多出 13%(全球91%)，Edge在76版本开始支持。

要更深刻地了解这种混合模式的工做原理，请务必查看 Wei 的文章 。若是想体验下有趣的实验，请看这个CodePen 示例代码

截断文本

这是我我的最喜欢的特性之一，由于这是在开发CMS网站页面会遇到的一个常见问题。可变的文字长度可能会使你设计良好的卡片在不一样的尺寸或分辨率下看起来不一致。

在过去，我老是在不加思索地寻找基于JavaScript 的解决方案，由于实现这个效果的大多数CSS技术都至关“hacky”。可是，最近我发现了一些CSS属性，它们结合在一块儿可能可以提供一个原生的、易于实现的解决方案。这就是text-overflow和line-clamp。

文本溢出

这是一个被普遍采用，而且浏览器彻底支持的原生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代码来截断多行文本，像这样。

惟一的问题是，截断多行文本的规范是CSS Overflow Module Level 3的一部分，而它目前仍是编辑草案，这可能意味着规范可能会有一些变化。另外一个须要考虑的事情是，你没法控制要显示的字符数，这可能会致使一些不太方便(但颇有趣)的截断场景。除了这个问题，愉快地玩耍CSS 截断文本吧！

滚动停顿

CSS 滚动停顿是Chrome用户已经使用了一段时间的另外一个方便的功能，如今 FireFox 最新的68版本也支持了。另外，Edge 76 版本也将支持， 总体支持程度已经覆盖主流浏览器。

你是否注意到一些花哨的网站会建立全屏区域，并在你滚动时锁定特定位置的视口？这里有一个这样的例子。

在此以前，要实现这样的功能仍是挺麻烦的，须要大量的数学计算和 JavaScript 代码。可是如今，CSS 就能原生实现这样的交互效果了。

它的工做原理相似于Flexbox或CSS网格，你须要一个容器元素，给它设置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 说的：不要瞎几把滚动。这项技术可能对滑动幻灯片、图库预览或页面特定部分有用，可是用的时候要克制点，由于它会影响性能和总体的用户体验。

Sticky 导航

以前的一些特性须要大量的JavaScript计算，并且实现性能方面的代价也至关高昂，如今好了，咱们有了 sticky 定位方式。以前咱们须要用 offsetTop和 window.scrollY，如今全都交给神奇的position: sticky ！sticky 定位的元素默认表现为相对定位元素，直到视口达到某个位置时它就会变成 fixed 定位的元素。带上 -webkit 前缀，浏览器支持率高达 92%

所以，只要这样写就能轻松实现：

header {
  position: sticky;
  top: 0;
}

复制代码

要正确地将 header 设置为 sticky 定位，HTML 结构很是重要。所以，假如你的HTML结构像这样：

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

复制代码

header 只会附着在父元素（这里是<main>标签）所在区域。“sticky 父元素”决定了“sticky 子元素”的做用范围。Elad Shechter 的这篇文章 很好地解释了这个问题。另外，这里还有一个利用这个特性的有趣实验。

最后的福利： @supports

正如前面说到的，尽管这些 CSS 特性 已经被普遍采用和支持，你可能仍是想在使用以前检查浏览器是否支持。若是是这样，你能够用@supports 特性查询，这个功能已经被浏览器普遍采用。它能够测试浏览器在应用样式以前是否支持特定的property: value 。语法以下：

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

复制代码

有了这个方便的特性查询，你能够在支持那些特性的浏览器上应用特定样式。它的语法看起来很熟悉，由于媒体查询也是这样写的。这是很棒的一种方式实现所谓的渐进加强，在支持的浏览器上使用这些最新的特性，而避免了不支持的浏览器的行为不一致。

好了，就此结束！但愿这些最新的CSS特性能帮你用更小的JavaScript代码实现有趣又吸引人的界面。另外，能够再看看这些CodePen 示例代码。

原文

交流

欢迎关注微信公众号“1024译站”，为你奉上更多技术干货。