两种语言都有不同的用途随着每一个浏览器版本、特性版本和属性的增加，CSS正成为一种功能强大的语言，能够处理我们以前依赖JavaScript实现的功能。
在这篇文章中，我们将学习一些你可能没有听说过的css golden nuggets，这将是本机的（优雅的！）处理平滑滚动、暗模式、表单验证等以前需要多行js技巧才能工作的功能。
平滑滚动
曾经有一段时间，我们不得不依靠JavaScript（甚至jQuery）实现来执行此操作，并使用window.scrollY复制此行为。 归功于scroll-behavior属性，那些日子现在已经过去。 现在，我们可以使用一行CSS代码来处理网站上的平滑滚动！
html {
scroll-behavior: smooth;
}浏览器支持约为75％，并且很快就会进入Edge 76。 在下面的Codepen中查看其工作原理：
暗模式
在macos发布了其黑暗模式功能和safari实现了prefers color scheme media功能之后，黑暗模式最近成为了热门趋势，它允许我们检测用户是否默认启用了黑暗模式。
您可能会认为暗模式是要实现的复杂功能，涉及CSS变量，每种方案的不同颜色以及一些JavaScript，以连接必要的click事件以定位网站上的更改。 尽管这部分是正确的，并且目前是实现它的标准方法（这就是我在网站上的实现方式），但并不需要这么复杂。
它的一些优点包括不必指定反转的颜色（混合模式可以为您完成此操作），并且您可以隔离不需要更改的元素。 它的一些局限性是您没有全范围的颜色，因此性能可能是一个问题。
要进行有趣的实验，请检查以下Codepen：
截断文本
这是开发依赖CMS填充内容的网站时遇到的一个常见问题。复制文字上的可变长度可能会使您设计精美的卡片在不同尺寸或分辨率下看起来不一致。
过去，我一直都在不考虑基于JavaScript的解决方案，因为大多数CSS技术都很难做到这一点。但是，当我努力在自己的网站上添加博客时，我发现了几个CSS属性，这些属性一起可以提供本机的，易于实现的解决方案。满足text-overflow和line-clamp！
您可以在此处查看Codepen：
文字溢出
这是一个广泛采用、完全支持的纯CSS本地解决方案，用于控制文本溢出其包含元素时的行为您可以将其值设置为省略号，这将为您提供Unicode…字符到目前为止还不错，但它的主要限制是，不管文本的长度如何，总是会得到一行被截断的文本。
因此，这可能是一个完美的适合的标题，但没有那么有用的摘录，评论或长文段。
Line-clamp
line-clamp属性也不是新的。因此，需要使用具有以下显示功能的旧Flexbox实现：-webkit-box和-webkit-box-orient：vertical。
那这里有什么新东西？ Firefox在版本68上实现了它，然后等待它-带有-webkit前缀！ 而且既然Edge基于Chromium，我们还可以使用-webkit前缀将浏览器支持提高到92％。
这意味着我们现在可以结合使用三行CSS行来截断多行文本，例如。
这里唯一要注意的是，线夹的规范是CSS Overflow Module Level 3的一部分，该规范当前在Editor's Draft中，这可能意味着该规范可能会有一些更改。要考虑的另一件事是，您无法控制要显示的字符数。除此之外，还可以进行CSS夹紧！
滚动捕捉
css scroll snapping是chrome用户已经使用了一段时间的另一个方便的功能，现在我们可以在firefox上享受它最新的68版本。我们还将在edge的76版上获得它，从而提高对所有主要浏览器的总体浏览器支持。
您是否曾经注意到某些精美的网站将如何创建全屏部分，并在滚动时将视口锁定在特定位置？
要让它在不久前正常工作是很困难的，需要大量的数学计算和javascript。但是现在，CSS能够在本地创建这样的交互。
从某种意义上说，它与Flexbox或CSS Grid的工作原理类似，即您需要一个容器元素，在该容器元素上设置scrolln-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策略通知，为什么不这样做），滚动填充可能很方便。
对于子对象，我们现在只有滚动捕捉对齐，它将告诉容器要捕捉到哪个点（顶部、中心或底部）。
尽管现在你知道这项技术只需要几行css就可以达到这个效果，而且不需要数学运算，但你可能会觉得在整个网站上随意添加滚动截图很有诱惑力，但记住网页设计的唯一法则，罗宾·伦德尔说：不要乱动滚动。
这种技术可能对幻灯片、图片库或页面上的某些特定部分很有用，但要谨慎使用，因为它会影响性能和用户的整体体验。
您可以在此处查看Codepen：
粘性的导航
跟进以前需要大量JavaScript数学并且在实现性能方面非常昂贵的功能，我们的定位很棘手。 现在，我们以前需要offsetTop和window.scrollY的位置是：愿意为我们完成所有向导！
具有粘性定位的元素将充当相对定位的元素，直到到达视口上的给定点然后变为固定定位的元素为止。 使用-webkit前缀的浏览器支持高达92％。
因此，尽管听起来像执行以下操作一样容易：
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>标签）覆盖的区域。该“粘性父项”确定了“粘性项”可以作用的范围。
您可以在此处查看Codepen：
总结一下:@support media-rule
尽管这些css特性被广泛采用和支持，如前所述，您可能仍然希望在添加它们之前检查浏览器上是否有这些特性。如果是这样，您可以使用@supports特性查询，浏览器广泛采用该查询，并允许您在应用一组样式之前测试浏览器是否支持特定的property:value对。
语法如下：
@supports (initial-letter: 4) {
p::first-letter {
initial-letter: 4;
}
}使用此方便的功能查询，您可以仅在支持样式的那些浏览器上应用一组样式。
语法听起来可能很熟悉，因为这正是我们编写媒体查询的方式，并且是进行渐进式增强的好方法，它可以在拥有它们的浏览器中立即使用这些顶级功能，同时防止不具有此功能的浏览器出现不一致的行为他们。
以上就是用CSS代替JavaScript可以做的几件事的详细内容，更多请关注0133技术站其它相关文章！
