🐣 👵🏼 💅🏼 6种强大的CSS功能可避免JavaScript 👩🏻‍🔧 🐍 👩🏿‍🤝‍👨🏾

最近，经常将CSS和JavaScript进行比较，争论这些技术在解决某些问题上的应用。随着强大的CSS新功能的出现，争议变得愈发激烈，这些新功能使解决很多问题变得容易，同时又将JavaScript抛在了后面。

CSS和JavaScript可以很好地协同工作，每种都有自己的优势，但是我认为，使用CSS来控制界面的外观和感觉的方式越多，容错性和可靠性就越强。这里的要点如下：

CSS本质上是一种抗故障技术。这意味着，当CSS解析器遇到无法理解的属性时，它只会忽略该属性并继续前进。换句话说，程序员使用CSS来应用样式并期望它们能够工作。
JavaScript不是容错技术。JS代码中的单个语法错误可能会破坏整个应用程序。也就是说，在使用JS管理网站样式时，绝对有必要检查相应结构的功能。

在回答何时在JS上使用CSS的问题时，还有许多其他注意事项需要考虑。

CSS提供了新的方法来设计出色的解决方案，这些解决方案比相应的JS解决方案容易得多，并且易于创建。这涉及CSS的许多功能：过渡，自定义属性，动画，过滤器，数学。

在这篇文章中，我将介绍您可能尚不了解的CSS的一些很酷的功能（其中一些是最近的）。即，我们将讨论平滑滚动，一个属性position: sticky以及其他可能性，以前需要编写许多行精美的JS代码来实现这种平滑滚动。

1.平滑滚动

过去，为页面提供流畅的滚动需要几行JS代码。现在，可以仅通过CSS解决此任务。好吧，那不是很棒吗？现在，您可以通过使用CSS属性利用平滑滚动scroll-behavior。

看起来是这样的：

html {
  scroll-behavior: smooth;
}

实现平滑滚动

→这是CodePen上的示例在

撰写本文时，scroll-behavior仅Chrome和Firefox支持此属性。Edge，IE和Safari（台式机和移动设备）尚不支持此功能。有关此属性支持的详细信息，请参见“我可以使用”。

2.固定元素

固定元素是我最喜欢的CSS功能之一。重点是，滚动页面时，相应的元素不会从视口中消失。现在修复页面上的元素并不需要求助于offsetTo并window.scrollY在JS。这些天，您可以只使用CSS属性position: sticky：

header {
  position: sticky;
  top: 0;
}

导航块“停留”在视口的上边界，并且在滚动页面时不会消失

→这是一个CodePen项目，其中显示了使用该属性的示例。position: sticky

为了正确使用此属性，您需要考虑其对元素的影响的特殊性。应用后，HTML页面的结构将发挥作用。顺便说一句，恰恰是事实上没有考虑这些功能，原因是该属性有时不起作用。

让我们看一下以下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>

菜单（nav此示例中的项目）只能固定在与其父项目（main在我们的示例中）重叠的区域中。结果，使用property时position: sticky，可以区分出两个主要的元素类：

可停靠元素：这是我们应用属性的元素position: sticky（nav在我们的例子中）。该元素将在父元素内移动，直到到达给定位置。例如-可以top: 0px。
可停靠元素容器：这是包含可停靠元素的HTML元素。这是停靠的项目可以在其中移动的区域。该“容器”定义了可停靠物品可以存在的边界。

使用此功能可以大大提高站点的可用性。对于那些用户不得不频繁滚动页面的项目来说尤其如此。

此功能几乎100％支持浏览器。

3.裁剪文字

CSS为我们提供了两个出色的属性：text-overflow和line-clamp。它们使您可以修剪文本，仔细处理单词，同时使我们免于使用JavaScript或其他复杂方法来解决此类问题的需要。这两个属性都不是新的，但是非常有用。

裁剪文本

→这是CodePen上的示例

让我们进一步讨论属性text-overflow和line-clamp。

▍文本溢出属性

此属性控制文本在一行不适合的情况下应被截断的情况下如何显示文本。上图在卡的标题中显示了这种情况的示例。在这里，您可以使用构造text-overflow: ellipsis，这将导致Unicode字符（…）将添加到修剪的文本的末尾的事实。

为了使财产text-overflow: ellipsis完成其工作，有必要使用相同的属性white-space: nowrap和overflow: hidden。

.card-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

所有现代浏览器都几乎完全支持此功能。

line线夹特性

在我们不需要使用单行而是使用多行文本的情况下，此属性将为我们提供帮助（此类文本的一个示例是上图中的卡片内容）。尽管这是CSS Overflow Module Level 3标准的一部分，该标准现在处于“工作草案”状态，但是大约95％的浏览器已经支持此属性，尽管带有prefix -webkit-。在使用它之前，必须考虑到它不提供控制显示的字符数的能力，这一点很重要。但是无论如何它都是非常有用的。

要使用它，我们需要使用旧的flexbox实现，并使用display: -webkit-box和属性-webkit-box-orient: vertical。它是这样的：

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

4.自定义CSS属性：CSS变量

在JavaScript世界中，CSS预处理器（如Sass，Less和Stylus）是非常有用且流行的技术。预处理器扩展了CSS的功能，使您可以使用例如变量和函数。但是，现代的网页设计师可以使用强大的标准CSS功能，这些功能称为自定义CSS属性或CSS变量。

CSS变量有助于保持应用程序的一致性，并有助于实现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);
}

可以从JavaScript操作CSS变量。

使用CSS变量

→这是CodePen上的示例，该示例显示CSS变量的使用和JS代码的管理

5.为黑暗主题提供支持

自从Apple去年为macOS引入深色主题以来，由于CSS使我们能够使用媒体查询来检测该主题的使用，许多大型Web项目（例如Twitter和Google Maps）都获得了这种主题。（这是支持深色主题的项目的列表）。

黑暗主题不仅是装饰网页的一种方式。它确实可以帮助某些人浏览Internet。

这是一些报价。

然后出于客观原因，有些人需要黑暗模式。他们使用此模式作为残疾人的工具之一。例如，我们在谈论视力低下的人。

Thomas Steiner，德国Google客户解决方案工程师。

莫莉患有亚瑟综合症。因此，她什么也听不到，而且一只眼睛的视野限制为5度。（…）在黑暗模式下查看页面将在她的能力范围内。此模式对其他人也很有用，为头疼的人或必须坐在光线昏暗的房间中的计算机上的人提供了使用Internet的可能性。如果在开发某些东西时只专注于某些特殊用户，则不仅对他们有用。英国政府设计师

Charles Reynolds。

也由材料制成您可以从Thomas Steiner那里学习如何使用暗模式来节省能源：“（…），您知道，在AMOLED显示器上使用暗模式可以节省很多能量。针对YouTube等流行Google应用的Android研究表明，在某些情况下，节能高达60％。”

一项新的CSS功能可以通过媒体功能来表示用户是否启用了深色主题prefers-color-scheme。它已经与Chrome，Firefox，Safari和Opera兼容。

与CSS变量结合使用时，Web开发人员可以很轻松地使访问者轻松利用动态的亮和暗模式。

: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';
  }
}

自动检测设备使用的主题

→在此CodePen项目中，页面设计取决于查看器使用的主题

6.指令支持

长期以来，Web开发人员不得不依靠第三方解决方案（例如Modernizr JS工具）来确定当前浏览器是否支持某些CSS功能。例如，通过配置element属性-webkit-line-clamp，可以检查浏览器是否支持该属性，如果不支持，则可以使用一些后备。

指令在CSS中出现后@supports，就可以直接从CSS代码检查浏览器的功能。

该指令@supports与媒体查询非常相似。它支持使用条件语句构造的各种组合表达式AND，OR以及NOT：

@supports (-webkit-line-clamp: 2) {
    .el {
        ...
    }
}

这将检查浏览器是否支持该属性-webkit-line-clamp。如果是这样，也就是说，如果条件变为true，则将应用在指令内部声明的样式@supports。所有现代浏览器都支持

此功能。

结果

在本文中，我介绍了CSS的一些有用功能。如果您可以不使用JS而仅使用CSS来执行某些操作，则可以这样做。

前端的现代世界正在快速变化，我们不断拥有新的机会来帮助我们更快更好地开展业务。试用CSS和学习新事物不仅非常有意义，而且非常有趣。我建议您尝试一些您今天学到的新知识。

您是否知道最近有任何CSS功能可以解决以前仅使用JavaScript即可解决的相同问题？

6种强大的CSS功能可避免JavaScript