jQuery 优雅降级答案

【问题标题】：jQuery Graceful DegradationjQuery 优雅降级
【发布时间】：2008-11-21 06:55:48
【问题描述】：

我想在这里和那里用一些 jQuery 动画来美化我网站的某些区域，并且我希望完全替换我的 AJAX 代码，因为我现有的代码存在一些跨浏览器兼容性问题。但是，由于 jQuery 是一个 JavaScript 库，我担心当 JavaScript 关闭或用户浏览器中不存在 JavaScript 时我的页面无法正常运行。

我举个例子：目前，我使用纯 CSS 工具提示向我的用户（玩家，网站是浏览器游戏）提供有关其他用户的信息。例如，如果游戏中的其他玩家满足一个或多个条件，则在他们的名字旁边显示一个目标图标，并且在将鼠标悬停在该目标图标上时，会显示有关目标背后原因的信息。这是有用的信息，因为它可以帮助我的玩家知道他们应该计划在游戏中接下来攻击谁。

目前，我使用 CSS 制作此类工具提示。我有一个父 div，其中包含类“信息”的目标图标的图像。然后，我在其中有一个带有“工具提示”类的 div，在它包含的“信息”类的悬停状态下显示，但在正常状态下是隐藏的。当我读到它时，我觉得它相当聪明，而且由于没有使用 JavaScript，它可以在任何兼容 CSS 的浏览器上运行。

我想用 jQuery 来达到同样的效果，主要是因为它看起来更干净，但也因为我相信快速而微妙的动画可以让这些“随机出现”的东西对用户更有意义，尤其是在第一次相遇。我只是想知道这两者是否会发生冲突。这只是其中的一个示例，还有许多其他示例表明无法使用 JavaScript 会阻碍网站。

所以我想问的是，如何让 jQuery 网站在不支持 JavaScript 但支持大多数 CSS 的浏览器上优雅地降级？我的目标是让网站为所有用户提供基本的功能，无论浏览器的选择如何。动画是一个很好的例子，但我也担心更动态的位，比如使用 AJAX 自动更新等。有没有关于如何实现这一点的好的资源，或者你对最好的方法有什么建议能达到这样的可降解性吗？

谢谢

PS：完全不相关，但 Firefox 似乎认为“可降解性”不是一个词，而是“生物降解性”（带有“生物”前缀）是。奇怪...

【问题讨论】：

刚刚添加了您的“删除类”解决方案，用 javascript 函数说明

标签： javascript jquery css backwards-compatibility

【解决方案1】：

如果您考虑 css 的“级联顺序”，您是否可以不只是在所有先前 css 定义的最后添加 css 样式以取消您当前对工具提示效果的任何 css 效果？

只有在激活 Javascript 并检测到 JQuery 时才会声明该 css 规则。

这样，您可以确定您的css tooltip effect 不会与您的 JQuery 效果冲突。

类似：

a.info:hover span{ display:none}

使用“js_enabled”类使这个css规则有条件。

您也可以通过adding css rule on the fly：

function createCSSRule(rule,attributes)
{
    //Create the CSS rule
    var newRule = "\n"+rule+"{\n";
    for (var attribute in attributes)
    {
        newRule += "\t" + attribute + ": " + attributes[attribute] + ";\n";
    }
    newRule += "}\n";

    //Inject it in the style element or create a new one if it doesn't exist
    styleTag = $E('style[type="text/css"]') || new Element("style").setProperty('type','text/css').injectInside(document.head);
    if(window.ie)
    {
        styleTag.styleSheet.cssText += newRule;
    }
    else
    {
        styleTag.appendText(newRule);
    }
}

Separation of CSS and Javascrip 最简单的解决方案是删除你的 css 类

function jscss(a,o,c1,c2)
{
  switch (a){
    case 'swap':
      o.className=!jscss('check',o,c1)?o.className.replace(c2,c1): <-
      o.className.replace(c1,c2);
    break;
    case 'add':
      if(!jscss('check',o,c1)){o.className+=o.className?' '+c1:c1;}
    break;
    case 'remove':
      var rep=o.className.match(' '+c1)?' '+c1:c1;
      o.className=o.className.replace(rep,'');
    break;
    case 'check':
      return new RegExp('\\b'+c1+'\\b').test(o.className)
    break;
  }
}

这个示例函数有四个参数：

a
定义您希望函数执行的操作。
o
有问题的对象。
c1
第一堂课的名字
c2
第二类的名字

可能的行动是：

swap
将对象 o 中的 c1 类替换为 c2 类。
add
将类 c1 添加到对象 o。
remove
从对象 o 中删除类 c1。
check
测试类 c1 是否已应用于对象 o 并返回 true 或 false。

【讨论】：

完成同样事情的另一种方法是使用 javascript 向 body 标签添加一个类（如 class="js_enabled" 或其他东西），然后覆盖该类后代的样式规则。跨度>
嗯...我当前的工具提示正在使用 display: none;当其父类未悬停时隐藏工具提示。所以理想情况下，如果 jQuery 正在工作，我需要从类中 remove 那行 CSS，这与本示例相比有点倒退。嗯确实...
哦，当然。第二类覆盖第一类中的规则。为什么我之前没有想到呢？（评论太快了，刚看到评论第一。）
哇，修复其实很简单。在为我的所有工具提示加载页面后，我只是完全替换了该类（使用 removeClass 和 addClass 函数），并且效果很好。非常感谢！

【解决方案2】：

如果某些事情可以完全用 CSS 完成，我会说保持这种方式。如果浏览器中缺少 javascript 是一个问题，那么大多数时候我会显示整个页面不受影响。

例如，当单击复选框时，我将使用 jQuery 来切换元素。在页面加载时，我查看复选框并相应地更新元素。如果未启用 javascript，该元素仍将出现，并且该站点仍将可用。只是没有那么好。

【讨论】：

对，我正在使用网站上的一个控制页面执行此操作，该页面显示“预览”并禁用无法使用的按钮等，并且在页面加载后禁用，我'熟悉这个逻辑。

【解决方案3】：

伙计，你有一个基于浏览器的游戏，对吧？禁用 JS 的用户不到 1%！而那 1% 是世界末日的数字，因为我敢打赌，你拥有的比这还少；)

无论如何，如果您真的对此感到担忧，请在没有任何 JavaScript 的情况下创建该站点。并使其功能 100%。在您的网站完全没有任何 JS 风格的情况下运行后，只需开始使用 jQuery（或任何其他库；jQuery 是最好的 :P）进行改进。但要小心：不要更改任何 HTML。它比看起来更容易;)

是的，如果你有没有 JS 的东西（比如那些工具提示），请保留它！

【讨论】：