用CSS代替JavaScript可以做的5件事
由Juan MartinGarcía✏️撰写
我不是第一个指出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，以连接必要的click事件以定位网站上的更改。尽管这部分是正确的，并且目前是实现它的标准方法（这就是我在网站上的实现方式），但并不需要这么复杂。
高巍在她的博客上向我们展示了一种达到类似结果的巧妙方法（更多 reversed mode）使用 mix-blend-mode: difference，是CSS支持的一种混合模式。如果您曾经玩过Photoshop混合模式，那是一样的事情，但是直接在浏览器上。
它的一些优点包括不必指定反转的颜色（混合模式可以为您完成此操作），并且您可以隔离不需要更改的元素。它的一些局限性是您没有全范围的颜色，因此性能可能是一个问题。
当前，本机浏览器的支持率为77％，外加13％的前缀（全局为91％），而Edge支持从版本76开始。
有关此混合模式如何工作的更深入的说明，请确保查看其中有关Wei的精彩文章。要进行有趣的实验，请检查以下Codepen：
截断文字
这是我个人的最爱之一，因为这是在开发依靠CMS填充内容的网站时遇到的一个常见问题。复制文字上的可变长度可能会使您设计精美的卡片在不同尺寸或分辨率下看起来不一致。戴夫·鲁珀特（Dave Rupert）在这方面有一篇很棒的文章。
过去，我一直都在不考虑基于JavaScript的解决方案，因为大多数实现此结果的CSS技术都是“骇人的”。但是，当我努力在自己的网站上添加博客时，我发现了一些CSS属性，这些属性结合在一起，可能能够提供本机且易于实现的解决方案。遇见 text-overflow 和 line-clamp
文字溢出
这是一种广泛采用的，完全受支持的纯CSS本机解决方案，用于控制文本在其包含元素溢出时的行为方式。您可以将其值设置为 ellipsis 这会给你Unicode … 字符。到目前为止，效果很好，但是它的主要局限性在于，无论文本的长度如何，您总是会得到一行被截断的文本。因此，这可能是标题的理想选择，但对摘录，评测或长篇文章却没那么有用。参见以下示例：
那边 line-clamp 发挥作用。
线夹
的 line-clamp 属性也不是新事物。DaveDeSandro大约在十年前向我们展示了此技术（因此，需要使用旧的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”>
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 contentsection>
</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。另外，请随时再次检查这些Codepen。
编者注：这篇文章有什么问题吗？您可以在此处找到正确的版本。
插件：LogRocket，用于Web应用程序的DVR
LogRocket是一个前端日志记录工具，可让您像在您自己的浏览器中一样重播问题。 LogRocket无需猜测错误发生的原因，也不要求用户提供屏幕截图和日志暴跌，而是让您重播会话以快速了解出了什么问题。无论框架如何，它都能与任何应用完美配合，并具有用于记录来自Redux，Vuex和@ ngrx / store的其他上下文的插件。
除了记录Redux动作和状态外，LogRocket还记录控制台日志，JavaScript错误，堆栈跟踪，带有标头+正文，浏览器元数据和自定义日志的网络请求/响应。它还使用DOM来记录页面上的HTML和CSS，甚至可以为最复杂的单页面应用程序重新创建像素完美的视频。
免费试用。
您可以使用CSS而不是JavaScript来完成的5件事首先出现在LogRocket博客上。