Javascript 从JS到非JS体验的优雅回归编程

我是一名web开发人员，创建了一个非JS社交网站，其中所有内容都能完美地应用于不使用JS的设备，包括表单提交（大量页面刷新）

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

他们为什么使用非JS设备？因为它们源于删除JavaScript的前向代理。或者，他们中的一些人有没有JS的非智能功能手机

---

我的网站的导航栏当前如下所示：

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

我最近将其重新设计为这种滚动体验：

有没有可能创造一种体验，让支持JS的设备看到最新的导航栏，而所有其他设备继续看到旧的

static

navbar

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

---

---

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

确保您可以提供两个不同的站点，并使用

noscript

-标记告知用户，如果javascript不可用，他或她应该使用另一个页面

在我看来，更好的方法是在代码内部构建开关，只显示适合当前用户的内容

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

将css类

no js

添加到

html

-标记中

添加一个小的javascript脚本部分，删除这个css类（或用

js

像往常一样构建css，但如果您想提供不同的样式（或隐藏/显示特定元素），请在css声明前面加上

。no js

或

。js

在您的例子中，您可以在html标记中包含两个导航，并且只显示适合当前用户的导航

顺便说一句，这个“技巧”适用于您想要构建的每个交换机（用于css规则）。如果您想创建一个很酷的字体效果，并将颜色设置为背景色，然后添加一个阴影，那么如果由于用户浏览器无法理解文本阴影css规则，因此阴影不可见，这将是非常糟糕的。因此，您可以使用如下回退方式进行构建：

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

并使用js检测用户浏览器是否可以使用文本阴影：

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

---

顺便说一句：这是一种工作方式。如果你喜欢这种方式，并且不想自己构建所有的测试，请看一看。测试速度很快，你可以针对html、css和javascript中的几乎所有功能进行测试。

例如，你可以使用。

你的浏览器不支持显示此页面所需的javascript。不过，你可以访问e

CSS可以非常优雅、非常容易地降级，这似乎是一个很好的选择。您是针对根本不支持CSS的浏览器吗？还是使用JavaScript添加菜单以获得动态内容。@RomanCortes:不，我不认为存在一种完全不支持CSS的设备（或者可能存在，我不知道）我更担心的是，这款设备不支持最新的CSS3/HTML5，就像大多数现代浏览器一样。