6 个强大的 CSS 技术，可以替代 JavaScript

2025-05-24

6 个强大的 CSS 技术，可以替代 JavaScript

关于 CSS 与 JavaScript 的讨论很多，而且由于 CSS 添加了许多令人惊叹的功能，并且使得无需 JS 即可更轻松地完成许多事情，因此这场战斗变得越来越激烈。

CSS 和 JavaScript 协同工作功能强大且有其优点，但我相信 CSS 对界面的控制越多，Web 应用程序的弹性和可靠性就越高，因为：

  • CSS 天生具有容错能力。这意味着，当 CSS 解析遇到它无法理解的属性时，它会跳过该属性并继续执行。换句话说，您可以应用样式并期望它们正常工作。

  • JavaScript 不具备容错能力。只需一个 JavaScript 语法错误就能导致整个应用崩溃。也就是说，你控制着样式，并且必须检查它是否正常工作。

还有许多其他点您可以考虑使用 CSS 而不是 JS。

从过渡和自定义属性到动画、过滤器或数学运算，CSS 为我们提供了一种更轻松、更简单的开发奇妙事物的新方法。

在本文中，我将重点介绍一些您可能不知道的 CSS 神奇功能（其中一些非常新颖），例如平滑滚动、粘性导航以及其他以前需要多行 JS 技巧才能实现的功能。让我们开始吧！

1-平滑滚动

以前，我们需要几行 JS 代码才能在页面上实现平滑滚动，而现在我们只需要一行 CSS 代码。是不是很棒？现在，我们可以使用scroll-behaviorCSS 属性来处理网站上的平滑滚动。

让我们看看它是如何工作的！

html {
  scroll-behavior: smooth;
}
Enter fullscreen mode Exit fullscreen mode

在我撰写本文时，scroll-behavior 属性在 Chrome 和 Firefox 上可用，但在 Edge、IE 或 Safari（桌面版或移动版）上尚不可用。请参阅“我可以使用吗”了解更多信息。

2- 粘性导航

粘性导航是我最喜欢的功能之一，它本质上是一个固定的页面元素，用户滚动时它不会消失。所以，现在我们可以在 CSS 中使用，而不用在 JS 中使用offsetTo和！👌window.scrollYposition: sticky

header {
  position: sticky;
  top: 0;
}
Enter fullscreen mode Exit fullscreen mode

但是，一旦HTML结构变得重要，您就必须理解背后的逻辑position: sticky才能正确使用它！（顺便说一句，这就是原因，因为有时此属性不起作用）。

我们来看看下面的 HTML 结构：

<main class="container">
  <nav class="nav">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </nav>
  <div class="main-content">Main Content</div>
  <footer class="footer">Footer</footer>
</main>
Enter fullscreen mode Exit fullscreen mode

菜单只能粘贴在其父级（主菜单）覆盖的区域。因此，position: sticky它包含两个主要部分：

  • 粘性项：是我们用 (nav) 定义的元素position: sticky。当视口位置与位置定义匹配时，该元素将浮动，例如：top: 0px 。
  • 粘性容器：是包裹粘性项目（sticky item）的 HTML 元素。这是粘性项目可以浮动的最大区域。这个“粘性父级”决定了“粘性项目”可以作用的范围。

此功能可以大大增强用户体验，特别是对于有大量滚动的网站。

几乎100% 的浏览器都支持。🎉

3-截断文本

CSS 提供了两个很棒的属性：text-overflow和line-clamp，它们可以实现诸如创建省略号以及优雅地截断单词等功能，而无需 JavaScript 或其他复杂的方法来实现。这两个属性并不新鲜，但却非常有用。

让我们仔细看看。

文本溢出

它控制代码如何处理必须截断文本以免文本超过一行的情况（例如，上面卡片的标题）。你可以将其值设置为省略号，这样就会返回 Unicode 的 ... 字符。

的工作需要和white-space: nowrap属性。overflow: hiddentext-overflow: ellipsis

.card-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
Enter fullscreen mode Exit fullscreen mode

现代浏览器 100% 支持

线夹

当你需要添加多行文本限制（而非单行）时，它就派上用场了（见上文卡片描述）。虽然它是CSS Overflow Module Level 3的一部分，目前处于“工作草案”阶段，但大约 95% 的浏览器已经通过使用前缀 来支持此属性-webkit-。需要注意的是，虽然你无法控制显示的字符数，但它仍然非常实用。

我们需要使用display: -webkit-box和添加旧的 flexbox 实现-webkit-box-orient: vertical。

.card-description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
Enter fullscreen mode Exit fullscreen mode

请参阅我可以使用吗？

4-自定义属性：CSS变量

尽管CSS 预处理器（例如 Sass、Less 和 Stylus）是 Javascript 世界中非常有用且流行的技术，因为它们扩展了 CSS，例如添加了变量和函数等功能，但我们现在有一个强大的功能称为 CSS 自定义属性，也称为 CSS 变量。

CSS 变量帮助我们保持 Web 应用程序的一致性（DRY），并且易于主题开发和维护。此功能是预处理器成功的主要原因之一。点击此处了解更多信息。

使用原生 CSS 语法时：您无需使用任何预处理器来创建变量。它们会级联（就像我们在传统 CSS 中逐渐习惯的许多功能一样😍）。

创建 CSS 变量非常简单，只需使用 设置变量--，然后调用一个名为 的函数，并将var()我们创建的变量作为参数传递即可。这很简单，不是吗？

:root {
  --base: #ffc600;
  --spacing: 10px;
  --blur: 10px;
}

img {
  padding: var(--spacing);
  background: var(--base);
  -webkit-filter: blur(var(--blur));
  filter: blur(var(--blur));
}

.hl {
  color: var(--base);
}
Enter fullscreen mode Exit fullscreen mode

出发啦 :)

除 IE 11 之外，所有主流浏览器都支持 CSS 变量。

5-黑暗模式

自从 Apple 去年在 macOS 中引入了暗黑模式，并且 CSS 为我们提供了一种使用@media查询检测暗黑模式的方法以来，许多大型应用程序（例如 Twitter 和 Google 地图）都已经支持该模式。（暗黑模式应用列表）

黑暗模式不仅仅意味着拥有一个漂亮的网页或 Web 应用程序。它还可以帮助人们：

“有些人确实需要黑暗模式，并将其用作另一种辅助工具，例如视力低下的用户。” - 谷歌德国客户解决方案工程师 Thomas Steiner

莫莉患有 Usher 综合症；这种疾病导致她失聪，一只眼睛视力只有 5 度。(...) 在黑暗模式下阅读内容对莫莉来说还算可以忍受，而且其他人也可能从中受益——它可以提升头痛用户或在光线昏暗的房间里浏览网页的体验。为少数人设计，才能造福大多数人。——英国政府设计师 Charles Reynolds-Talbot

点击此处了解更多详情。

而且它可以节省大量能源，正如 Thomas Steiner 在这篇文章中所说：

“(...) 众所周知，暗黑模式可以在 AMOLED 屏幕上节省大量电量。针对 YouTube 等热门 Google 应用的 Android 案例研究表明，其省电效果最高可达 60%。”

一项新的 CSS 功能允许我们检测用户是否启用了暗模式，prefers-color-scheme并且它已经与 Chrome、Firefox、Safari 和 Opera 兼容。

当与变量结合使用时，它可以让您的访问者比以往更轻松地使用动态明暗模式。

:root {
  --color: #222;
  --background: #eee;
  --text: 'default';
}

body {
  color: var(--color);
  background: var(--background);
}

body:after {
  content: var(--text);
  display: block;
  text-align: center;
  font-size: 3rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --color: #222;
    --background: #eee;
    --text: 'light';
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color: #eee;
    --background: #222;
    --text: 'dark';
  }
}
Enter fullscreen mode Exit fullscreen mode

根据您设备的设置，您将看到深色或浅色的样式。

6-@supports

长期以来，开发者一直在使用第三方 polyfill，例如Modernizr（一种 JS 解决方案），来检测当前浏览器支持哪些 CSS 特性。例如，在设置-webkit-line-clamp元素的 时，你可以检查此属性在浏览器中是否有效，如果无效，你可能需要提供一些回退选项。

然而，CSS 创建了@supports允许我们直接从样式表执行浏览器特性检测的规则。太棒了！

这些指令与@media@supports查询非常相似，您还可以使用 AND、OR 和 NOT 条件进行各种组合：

@supports (-webkit-line-clamp: 2) {
    .el {
        ...
    }
}
Enter fullscreen mode Exit fullscreen mode

上面的示例检查浏览器是否支持该-webkit-line-clamp属性。如果支持，即条件返回 true，则将应用 @supports 块内声明的样式规则。

所有现代浏览器都已支持此功能。

动画 Gif

这是我获得这个新的 CSS 功能后的样子。🤣🤣 你呢？

结论

以上就是一些现代 CSS 特性的简要概述。只要你不用 JS，只用 CSS 就能做出精彩的作品，那就大胆尝试吧。

我们如今所理解的前端世界正在不断变化，每次都有新功能被创造出来，让我们的工作变得更快、更精巧。玩转 CSS 并学习新技巧可以充满乐趣和趣味。快来尝试一下吧！❤

我希望你喜欢这篇文章，如果我错过了你经常使用的 CSS 新功能，请告诉我！

文章来源：https://dev.to/dionarodrigues/6-powerful-css-techniques-you-can-use-instead-of-javascript-2f44
Devto 翻译
PREV
Fetch API，你真的知道如何处理错误吗？
NEXT
SVG 变得简单