HTML和CSS技术可以减少JavaScript

Anthony Ricaud（@anthony_ricaud）是一名Web工程师，帮助队伍以可持续的步伐发货。通过广泛了解Web协议和浏览器，他喜欢设计简单但快速的Web架构。

越来越多的网站依赖于他们提供的交互的JavaScript。它可以实现令人愉快的经历，但也具有不良影响：

页面是无法使用，直到JavaScript加载，如果没有任何错误

如果没有团队的手段和资源，可以缺乏可用性，反应性和可访问性，以应对这些。

鉴于这些缺点，依靠浏览器本地提供的解决方案使您可以从社区的专业知识从创建Web标准的专业知识中受益。这些解决方案通常具有使用更小的代码的优点，从而减少开发团队的维护工作（例如，无需更新使用的库）。

在本文中，我们将探索大多数用户可用的本机解决方案中的一些。我们会看到一些例子，但我们不会进入所有的微妙之处，因为其他资源很好。相反，目标是通知您存在这些技术的存在。

在进行每个技术之前，快速提醒关于使用JavaScript的大缺点：浏览器只有一个线程来控制页面的渲染。当JavaScript运行时，浏览器会延迟用户交互事件和界面更新。这可能是非常烦人的，因为你得到了这个页面没有响应你的行为或动画是janky的印象。菲利普沃尔顿详细介绍了这个问题，并包括一个演示。

开发团队倾向于每天使用强大的设备。这通常隐藏了我们的JavaScript的负面影响。别忘了定期在更多有限的设备上进行测试。

（可以通过Web Worker在另一个线程中运行JavaScript，但它很少适用于接口代码。）

限制显示的字符数。这非常脆弱，因为除了单座字体外，字符的宽度是可变的。你可能最终比你想要的更多行，或者用文字截断太早。

通过试验和错误截断元素的内容，直到元素占用所需的行数。这非常昂贵，因为每次尝试时，您都必须要求浏览器呈现呈现所需的大小。如果在使用所需字体之后使用此技术，则该技术只能准确，这可能导致大的布局换档。

在包含大量文本的页面中截断，这会延迟正确的显示。此外，这两个解决方案完全截断了文本，这可能会对搜索引擎或辅助技术进行恢复后果。元素的大小或元素的宽度也可以在页面的生命周期内（用户自愿，通过改变设备的方向而不由自主地改变）。考虑所有这些案件是非常烦人的。

-webkit-line-clamp是一个本身的CSS属性。十年前推出的Safari，这家酒店已被广泛使用，其他浏览器还采用了兼容性原因，它已成为标准。 （是的，使用前缀。）您需要几个其他前缀属性来实现所需的行为。必须使用前缀属性有点刺激，但前缀已经详细说明标准，因此我们没有任何风险。

除Internet Explorer和Firefox外，版本68之前，所有浏览器都支持此属性。以下示例用作后退解决方案。

此解决方案没有表现或恼人的内容换档问题，并且不会影响搜索引擎或辅助技术。但是，它不适用于多个孩子的物品。

您可能希望为页面一部分可见标题，工具栏或购物车。我经常遇到这种行为，但它很少有正确的实现。

从历史上看，要这样做，有必要倾听经常火灾的滚动事件。因此，大多数解决方案丢弃了具有限制或脱嘴技术的大多数事件。如今，我们可以使用InterSextoBserver在元素进入或离开视口时接收事件。这更有效率。

一旦我们检测到输入或离开视口的元素，我们需要从位置切换：相对于位置：固定。这要求浏览器重新计算大量元素的大小和位置（我们将其称为布局或回流）昂贵。并且重要的是要确保周围元素不会移动并导致内容跳跃。 “Le Monde遭受了这种不完美的实施。

如果当元素进入或退出视口时被阻止渲染（这很可能具有与滚动协调的动画的当前趋势），则切换将在稍后进行。

CSS现在有位置：粘性以实现这种行为。没有表现，响应性或内容跳跃问题：只要浏览器可以滚动，它将保留物品在您声明它的位置确切地定位。选择其定位，使用顶部，底部，左侧或右侧。

除Internet Explorer之外的所有浏览器和旧版本的Chrome或Firefox支持粘性。对于这些较旧的浏览器，元素位于位置：静态，这是默认值，不会考虑顶部，底部，左右的值。如果您需要支持这些浏览器，请记住这一点。旧版本的Safari需要-webkit-sticky prefix。

然而，有一个限制：与伪类别表示，不可能改变元素的外观，无论是伪类：卡住。这是CSS的一般限制。在这种情况下，我建议将位置的好处结合起来：粘性以保持内容粘附的元素差距改变它的外观（在注意不要改变其维度，以防止内容跳跃）。

要在JavaScript中实现这一点，您需要定期执行将更改滚动位置的JavaScript。对于动画顺利运行，没有其他JavaScript应该在整个动画期间阻止渲染。

您还需要选择一个定时功能。要看起来很自然，每个操作系统可能需要不同，以满足其约定。

谢谢滚动行为：在CSS和{行为中平滑：＆＃39; shoft＆＃39;}作为扫描，滚动托和滚轮在javascript中的选项，您可以委派所有定时函数决策。这为您提供了更多的行为与所使用的设备相同。

Safari并不支持这一点（除非您启用隐藏的偏好）但大多数时候，它都不是一个大不了的问题：这是逐步增强的经典典范。

通过JavaScript版本和本机版本，有两个可访问性方面要注意：尊重拼接动画和移动的偏好，并确保焦点适当移动。

这使您可以创建幻灯片，扫描到占用所有视口的每个项目或部分的水平列表。

对所有类型的指针（鼠标或手指）处理这孔，当指针离开该区域时非常棘手。一旦正确处理了这些事件，我们根据运动移动元素。每个移动都可以触发昂贵的回流，创建jank并打破用户的错觉。

对于占用所有视口或水平列表的部分，我们必须收听所有滚动事件，取消它们并用我们想要的滚动移动替换它们。获得一个愉快的行为非常困难：当我们遇到劫持本机滚动的网站时，我们都在我们的屏幕上尖叫。

对于那些使用情况，您需要根据原始移动的速度和距离来决定何时进入下一个项目。如果您的选择与系统行为不匹配，则会让您的用户混淆。

CSS具有滚动扫描以处理此操作。在滚动容器上，我们定义滚动扫描型以指示我们想要捕捉的方向，以及它们是否是强制性的，也是仅在捕捉点的接近时。然后在容器的子节点上，我们将定义滚动符合按钮以指示捕捉点。

以下演示完全没有JavaScript工作。它还使用滚动行为来提示用户可以使用常规滚动机制。

通过勾选复选框，您将激活一点interscleceObserver以突出显示当前可见图像的缩略图。

所有现代浏览器都支持此行为。有一个备用语法，但我建议使用它。它只会增加测试场景，您可以依赖优雅的退化。在没有支持的浏览器中，它将是一个常规滚动。

由于此功能使用浏览器的滚动，与JavaScript解决方案相比，我们得到令人难以置信的流动性，无论使用的指针类型如何。如果您尝试提高第一个输入延迟，则滚动不计为输入，因此此交互不会是第一个输入。

要使用JavaScript实现这一目标，我们通常使用诸如＆lt; img data-src =＆＃34; ...＆＃34; data-srcset =＆＃34; ...＆＃34; Alt =＆＃34; ...＆＃34;＆gt ;.当图像接近视口时，JavaScript将更改要获取的属性并显示它们。

这种技术的主要缺点是，直到相关的JavaScript踢出，那些图像都不可见。它比你想象的要更多。搜索引擎也会有更多的难度找到您的图像，因为它们并不真正存在，并且机器人无法滚动。

选择触发下载时的何时非常微妙。如果您根据可用的带宽触发它，请远离视口远远？您应该考虑滚动速度吗？

在去年，所有浏览器但Safari都实施了属性加载=＆＃34;懒惰＆＃34;在＆lt; img＆gt;元素。如果您的网站目前加载所有图像，则可以添加此属性。您将获得一个打火机的网站，以便大多数努力很少有努力。

如果您已经使用了懒惰加载解决方案，直到Safari支持此属性，您必须根据您的细节作出决策。是否值得在Safari中加载所有图像以进行简化的代码？

现在，触发下载的规则特定于每个浏览器，可能不是理想的。虽然有一件事是肯定的，启发式会随着时间的推移而变得越来越好，你不必改变一系列代码！

我没有为此做准备一个演示，因为它有点不可见，但你可以阅读谷歌对它的解释。 如果您想在野外看到这些示例，我已经在我以前的项目中使用了所有这些技术（但是网站虽然是法语）： 在产品详细页面（懒惰加载的图像，平滑滚动和滚动拍摄图像库） 在篮筐上（如果您在篮子里有产品，则订单按钮是粘性的）。 我邀请您连续测试狭窄宽阔的观点。 我希望这个小概述激励你更新你维护的网站。 下次您正在寻找一个用于某种行为的JavaScript库，请记住这几种技术。 还要问自己，如果可能还有其他HTML或CSS技术，我没有覆盖（可能是＆lt;细节＆gt;＆lt;概要＆gt;或＆lt; dataList＆gt;）。 浏览器不断改进，您可能会惊喜。 而您的用户会高兴！