清远网站开发：建设社会——渐进增强的个案研究

2019.08.13 mf_web

158

我们谈论了渐进增强以及它如何改善向后兼容性。但是，将渐进增强概念应用于现实生活中的项目有多简单明了？在设计丰富的交互式体验时，很难确定纯粹使用HTML和CSS实现哪些内容以及绝对需要JavaScript的内容。

通过重新设计Building Social网站的案例研究，我们将分享一些简单但经常被忽视的前端技术，尽可能地推迟使用JavaScript，同时提供一些简洁的JavaScript增强功能。清远网站开发

Building Social是一个仅限受邀者使用的应用程序，它将共享办公楼的人（可能永远不会遇到的人）连接到特定于建筑的社交媒体平台。人们可以访问建筑事件，对话，喜欢，回复，琐事竞赛，市场，以及来自建筑物管理层的一键报告，以及接收紧急和一般信息通知。

建筑社交网站最初的单页设计概念是Patrick Riley和Paul Stanton在纽约办公室执导的艺术。我们获得了设计概念的静态模型，以及各种元素应如何移动的视频模型。我们的工作是进一步尝试设计，更重要的是，在浏览器中实现它。

考虑到项目规模相对较小，没有必要制定具体的设计或开发策略 - 例如，与SGS项目不同。这意味着我们能够主要关注实施和一些具体的渐进增强挑战，包括：

自动与同步字符串交换;
静态与动态混合部分背景;
手动与基于滚动位置的动画切换;
使用JavaScript增强的纯CSS模态框形式。

HTML以外的所有内容都是可选的额外内容

我们的第一个任务是通过将适当的结构化和语义HTML应用于所有设计元素来设置基线体验。考虑到Patrick和Paul想要使用视频内容，我们还必须确保视频内容的后备。

挑战1：自动化比赛同步字符串交换

乍一看，标题似乎只是纯粹的装饰。但是，它实际上包含有用的内容，促进了建筑社交服务的几个关键功能。帕特里克和保罗也希望在标题中包含视频功能，每个视频场景都与特定的服务功能相关联。

渐进增强摘要：

在HTML无序列表中标记关键服务功能，以便在视频，JavaScript和/或CSS无法加载时提供基线体验。
通过CSS关键帧动画制作服务功能。
加载视频后，在每次后续场景更改后更换每个服务功能，同时保持与视频播放头同步。

建立了基线HTML体验之后，我们尝试使用CSS关键帧动画简单地为与视频无关的服务功能列表设置动画，因为每个场景持续3秒（总共21秒）。以下是我们原来的CSS代码段：

.list-options li { animation: animate_options 21s linear infinite; }.list-options li:nth-child(1) { animation-delay: 0s; }.list-options li:nth-child(2) { animation-delay: 3s; }/* … and so on. We actually used a Sass 
snippet that specifies the animation delay 
value for each item:

@for $i from 1 through 7 {
  .list-options li:nth-child(#{$i}) { 
    animation-delay: #{($i*3)-3}s;
  }
}
*/

复制

* /

@keyframes animate_options {
    /* 0s   */  0%      { opacity: 0; bottom: -10vw; }
    /* 0.3s */  1.4%    { opacity: 1; bottom: 0; }
    /* 1.5s */  7.1%    { opacity: 1; bottom: 0; }
    /* 2.7s */  12.6%   { opacity: 1; bottom: 0; }
    /* 3s   */  14%     { opacity: 0; bottom: -10vw; }
    /* 21s  */  100%    { opacity: 0; bottom: -10vw; }}

复制

也许不是你见过的最优雅的CSS片段，但它肯定能完成这项工作。但是，我们完全清楚有时候视频无法完全加载或者JavaScript无法正常启动。在这种情况下，会显示每个服务功能的静态背景图像，并根据上面CSS代码段中显示的关键帧时序进行换出。

虽然我们可以简单地依赖CSS关键帧动画，但风险是如果视频在其他资产之后完成加载，动画列表将很快失去同步。解决方案：同步字符串交换和一小段JavaScript来跟踪播放头位置。

当JavaScript加载时，它开始跟踪视频的播放头位置，并根据检索到的值交换服务功能字符串。这是通过timeupdate在JavaScript（使用jQuery）中监听事件并在视频currentTime匹配条件时切换相应元素的类名来完成的：

$('video').on('timeupdate', function() {
  var ct = $('video')[0].currentTime;
    var j = Math.floor(ct + 0.9);
    var k = Math.floor(ct / 3);
    if (j > 0 && j % 3 == 0) {
        $('.list-options li').removeClass('current');
    } else {
        $('.list-options li').eq(k).addClass('current');
    }});

复制

您可能还注意到我们在实际场景更改之前使用因子0.9来切换类？这允许动画有足够的时间正确执行，而动画本身仍然通过CSS控制：

.list-options li { bottom: -10vw; opacity: 0; transition: all .3s ease; }.list-options li.current { bottom: 0; opacity: 1; }

复制

挑战2：静态比动态混合部分背景

默认情况下，每个页面部分都有指定的背景颜色，以及一个或多个背景图像。没有什么太奢侈了，除了纽约团队真的希望部分背景在用户向下滚动页面时平滑地融合在一起。

渐进增强摘要：

默认情况下为每个页面部分设置静态背景颜色。
通过JavaScript应用增强的背景混合。

混合背景不是你每天看到或工作的东西。然而，一些有趣的例子已经存在; 例如，设计机构ustwo的网站。要在用户滚动时始终如一地创建此效果，我们必须使用JavaScript，但仅作为渐进增强。在研究和测试了许多有前途的基于JavaScript的库之后，我们选择Scroll Magic有两个原因：

它有详细记录，有大量的例子可以应用于我们需要的东西。
它重量轻，重量为8 KB。

我们最初的想法是检测每个连续页面部分的位置，以便应用相关的CSS背景渐变。然而，很快就会发现每当我们停止滚动时都没有应用渐变！因为只有一个纯色背景颜色应用于body元素，所以渐变确实是滚动创建的视错觉。

在意识到我们是那个阶段的视错觉的受害者之后，我们放弃了渐变的想法。相反，我们决定只要用户向下滚动页面，就可以在相邻页面部分的纯色背景颜色之间创建补间动画：

var bodyBackground = function() {
    // TRANSITION FROM GRAY TO WHITE
    var overviewHeight = parseInt($('#overview').height());
    new ScrollMagic.Scene({
    triggerElement: '#overview',
        offset: overviewHeight,
        duration: overviewHeight / 2
    })
    .setTween('body', { backgroundColor: ‘white' })
    .addTo(controller);
    // TRANSITION FROM WHITE TO BLUE
    var theAppHeight = parseInt($('#the-app').height());
    new ScrollMagic.Scene({
        triggerElement: '#the-app',
        triggerHook: 1,
        offset: theAppHeight,
        duration: theAppHeight / 2
    })
    .setTween('body', { backgroundColor: ‘blue' })
    .addTo(controller);
    // TRANSITION FROM BLUE TO RED
    var audiencesHeight = parseInt($('#providers').height());
    new ScrollMagic.Scene({
        triggerElement: '#audiences',
        offset: audiencesHeight,
        duration: audiencesHeight / 2
    })
    .setTween('body', { backgroundColor: ‘red' })
    .addTo(controller);}

复制

确定此方法有效后，我们再次使用Scroll Magic采用类似的配置来触发与滚动位置相关联的场景动画。但在我们尝试这样做之前，我们必须确保在不必依赖JavaScript的情况下触发这些动画。

挑战3：手动与基于滚动位置的动画切换

每当用户向下滚动页面时，我们真的想要结合移动的想法，但同时确保它不是压倒性的（很多网站都包含视差效果的情况）。

渐进增强摘要：

:hover默认情况下，使用CSS 伪类来切换动画。
使用JavaScript根据滚动位置切换动画。

对于不是内容中心的简单动画，CSS中可用的动画选项绰绰有余。例如，动画长度和计时功能，加上一些可动画的CSS属性，如定位，边距和不透明度，都有很长的路要走。此外，如果单个场景中的任何元素不需要任何特定的独立交互，则只需要一个事件来触发所有动画元素。

使用：hover伪类触发的简单动画 — 使用:hover伪类触发的简单动画（查看大版本）

在我们的例子中，因为这些部分是100％宽，所以我们能够通过使用:hover伪类在每个部分中触发动画。这样做为我们提供了一种快速且不显眼的方式来触发动画而无需使用JavaScript。但是，此方法不适用于支持触摸的设备，并且考虑到动画在大多数情况下是视觉增强，我们决定将它们丢弃用于小视口。

在检测到JavaScript已完全加载后，我们会根据滚动位置触发动画。通过在动画中包括背景元素并通过单独调整每个场景的时间，我们能够更精确地控制每个单独的场景，从而增强整体体验。

考虑到最初的概念是单页设计，有两个不同的号召性用语（即对于业主和“提供者”），我们确实希望确保用户不会被带离页面。此外，由于右侧的浮动文本，在每个行动呼吁下逐步披露任何后续联系表格都不是理想的。因此，模态盒是最好的解决方案。

渐进增强摘要：

默认情况下仅使用语义HTML和CSS切换模态框。
通过引入不需要通过JavaScript重新加载页面的内联验证和表单提交来增强体验。

在编写语义HTML时，打开和关闭元素非常容易，这意味着可以逐步增强元素而不会污染实际代码。例如，通过确保每个切换元素具有语义id属性和锚链接（指向相同的链接id），我们不仅能够提供钩子来支持有趣的交互，而且还能够显着改善无格式的可访问性和可用性。页。

但是如何锚定链接切换模式框呢？CSS :target伪类来救援！每当元素id与浏览器地址栏中的哈希字符串匹配时，:target伪类就会被触发，这意味着该元素的样式也可以不同。此外，CSS非常简单：

/* E.g. URL https://yoursite.com/ */#modal-contact { display: none; }/* E.g. URL https://yoursite.com/#modal-contact */#modal-contact:target { display: block; }

复制

如果你知道:target伪类技术（毕竟它已经存在很长一段时间了），那么你可能已经用它来切换元素而不必依赖JavaScript。

当您还包含引用回初始锚元素（或其父元素）的第二个锚链接时，您就可以将其用作“关闭”链接。这是因为当单击“关闭”链接时:target，与模式框匹配的伪类id不再处于活动状态。这是一个简单的例子：

<div id="section-01">
  <a href="#modal-contact">Contact us</a></div><div id="modal-contact">
  <!-- contact form -->
  <a href="#section-01">Close</a></div>

复制

此外，当您锚定到最初切换模态的元素时，它会在用户激活模态之前将页面精确设置回其位置。

我们可以进一步推动:target伪类的使用。假设模态框包含一个Web表单，我们希望在同一模式框中显示表单提交的结果（例如，作为确认消息）。

为此，我们只需要在生成的URL 中添加一个哈希值id（id与模态框相同id） - 与我们在提交表单后发送给用户的URL相同。这是一个header在PHP中使用重定向的简单示例：

<? header('Location: https://yoursite.com/#modal-contact'); ?>

复制

在非常快速的Internet连接上，它看起来好像浏览器从未重新加载页面。在慢速连接或功能较少的设备上，浏览器将自动跳到确认消息，而不是重新加载页面并将其定位到头部，从而显着改善用户体验。

有了这个基本功能，我们可以通过引入不需要完整页面重新加载的内联验证和表单提交来进一步增强它（使用良好的'XML HTTP请求（XHR），也称为AJAX）。这样做不仅可以减少一些时间，而且如果发生任何输入错误，将使体验更加方便。

最后，为什么不提供使用Escape键关闭模式框的支持？按照切换类和锚定到不同元素的相同原则，执行此操作所需的代码相对简单：

$(document).on('keyup', function(e) {
    // If there is a visible modal, i.e. .md-show…
    if (e.keyCode == 27 && $('.md-show').length) {
        // Store the target from the modal's close link…
        var newTarget = $('.md-show .md-close').attr('href');
        // Hide the modal   
        $('.md-show').removeClass('md-show');
        // Position the page to the stored target
        document.location.hash = newTarget;
    };});

复制

将我们讨论过的所有内容都考虑在内，下面是模式框联系表格的渐进增强选项列表：

使用CSS切换和关闭模型框 - 不需要JavaScript。
使用required属性和正确的输入类型启用基本HTML5验证（例如，type="email"将根据正确的电子邮件地址模式验证条目） - 不需要JavaScript。
完全重新加载表单提交，在模式框中自动打开表单，并返回确认消息或服务器端验证的错误消息 - 不需要JavaScript。
内联验证输入字段 - 在客户端和服务器端都需要JavaScript和重复验证逻辑，这可能很难维护。
通过XHR提交表单并返回确认消息或服务器端验证的错误消息，而无需重新加载页面或关闭模式框。
可以进行其他增强 - 例如，使用Escape键关闭模态框。

如果表单相对简单并使用XHR发送到服务器，则可以跳过步骤4; 否则，根据项目，这将产生不必要的维护开销。但是，正如您可能知道的那样，即使您实现了客户端验证，表单也应始终在服务器端进行验证。

额外提示：随机性的错觉

当您需要在客户端随机化某些内容时，您首先想到的是什么？它是否有Math.random()任何机会涉及JavaScript ？

对于这个项目，我们想要在“提供者”部分（红色部分）中随机化云，以模仿自然界中的真实云运动。云通常坐在不同的高度，但在相同的方向或多或少地移动。此外，从观看者的角度来看，云经常看起来相对于彼此以不同的速度行进。

这导致动画使用相同的行进距离，但设置为不同的持续时间：

.cloud-01 { animation: clouds 7s linear infinite; }.cloud-02 { animation: clouds 5s linear infinite; }.cloud-03 { animation: clouds 10s linear infinite; }@keyframes clouds {
    0%  { opacity: 0; margin-left: 0; }
    50%     { opacity: 1; margin-left: -100px; }
    /* By hiding the cloud at 80%, we provide a break during which the cloud is hidden. */
    80%     { opacity: 0; margin-left: -200px; }
    100%    { opacity: 0; margin-left: -200px; }}

复制

上述技术证明有时不需要使用JavaScript。如果我们退后一步并重新审视问题和目标，我们可以通过使用现成的和广泛支持的技术，但以更智能的方式实现相同的结果。

结论：它可以完成！

一些上述技术也可以容易地应用于其他UI元素，例如标签，表格和下拉列表。通过使用本机HTML功能，结合伪选择器和CSS动画，您可以提供相对简单但引人入胜的交互式体验，您只需要很少的工作量。

虽然使用JavaScript来增强体验肯定没有错，但考虑到基于Javascript的动画可以和仅 CSS动画一样快，在首先进入任何解决方案之前，请先考虑语义，可访问性和性能。语义化的HTML特别是，这已被广泛福音多年，通过标记而不是通过其呈现加强的内容含义。因此，调查多个选项 - 在大多数情况下，您将能够识别最不复杂的解决方案。

最后，通过创造性地使用您可以使用的基本工具，您可以提高性能和可访问性，并简化代码维护。请记住，没有两个项目完全相同，并且每个项目在性能和可访问性方面都可能具有特定用例。因此，指标和数据可能会有所不同。例如，英国政府数字服务部门确定1.1％（或93 ％的用户）错过了JavaScript增强功能。试图表明渐进增强更快杰克阿奇博尔德进行了一系列令人信服的测试，但正如他所指出的那样，“现实生活中的不确定性”会影响任何测试的公平性。但重点是，通过尽快获取屏幕上的内容，您将改善用户体验，并且在此过程中，您将获得一些额外的业力点。大家都赢了！

清远网站开发