编程从JS到非JS经验的优雅回退

Question

我是一名网络开发人员并创建了一个非JS社交网站，其中一切都适用于不使用JS的设备，包括表单提交（大量页面刷新）。

谁在这个时代使用非JS设备？我的用户中非常重要的一部分。

为什么他们使用非JS设备？因为它们源自删除JavaScript的转发代理。或者，其中一些具有JS不存在的非智能功能手机。

我网站的导航栏目前看起来像这样：

我最近重新设计了这种滚动体验：

是否有可能创建一种体验，使JS支持设备看到最新的导航栏，而所有其他设备继续看到旧的static导航栏？

如果是这样，怎么样？有人能给我一个如何做到这一点的基本例子吗？

注意：我也知道纯CSS解决方案也存在，在这种情况下JS甚至不参与讨论。但是，这样的解决方案仍然可能排除我最原始的设备用户。对我来说最好的解决方案肯定需要某种静态导航栏的“后备”。请相应地告知。

Answer 1

当然，您可以提供两个不同的网站，并使用noscript - 代码告诉用户如果javascript不可用，他/她应该使用其他网页。

我认为更好的方法是在代码中构建交换机，只显示当前用户理想的内容。

实现这一目标的常用方法如下：

1. 将css类no-js添加到html - 标记
2. 添加一个小的javascript脚本部分，删除此css类（或将其替换为js
3. 像往常一样构建你的css，但如果你想提供不同的样式（或隐藏/显示特定元素），请在.no-js或.js
之前添加css声明

在您的情况下，您可以在html标记内进行导航，并仅显示适合当前用户的导航。

这个“技巧”适用于你想要构建的每个开关（对于css规则）。如果您想构建一个很酷的字体效果并将颜色设置为背景颜色并添加一个阴影，那么如果阴影不可见则真的很糟糕，因为用户浏览器无法理解text-shadow css规则。所以你可以用这样的后备来构建它：

.cool-font-effect {
  color:black;
}
.textshadow .cool-font-effect {
  color:white;
  text-shadow: 2px 2px silver;
}

并使用js来检测用户浏览器是否可以使用text-shadow：

var isTextShadowSupported = ()=>document.createElement("detect").style.textShadow==="";
if(isTextShadowSupported())
  document.querySelector('html').classList.add('textshadow');

BTW：这是Modernizr的工作方式。如果您喜欢它并且不想自己构建所有测试，请查看它。测试很快，您可以测试html，css和javascript中的几乎所有功能。