问题标签 [progressive-enhancement]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

180 问题
Newest
Active
Bountied
318
Unanswered
0 投票
5 回答
89 浏览

html - 为什么 www.domain.com 和 domain.com 的网站宽度会不同？

如果您在两个不同的选项卡中打开我的站点的两个版本，请访问www.compversions.com和compversions.com，并假设您的分辨率至少为 1680 x 1050，您将看到以两种不同大小呈现的站点。

它被设计为逐步增强，但是在域上没有“www”和没有它会使网站在完全相同的分辨率显示器上具有不同大小的区别是什么？

任何帮助将不胜感激。

谢谢。

Edit1：最初的问题出现在 Windows 7、Chrome 最新版本上。我在 Mac 上用最新的 Safari 进行了测试，没有这个问题。但 Twitter 计数器和 Google+ 计数器确实显示了两个不同的数字。

这是 compversions.com 的屏幕截图 - 如您所见，一切都稍大一些 - 尤其是白色的中间部分。

compversions.com 截图

这是 www.compversions.com 的截图——这个略小，尤其是中间的白色部分。

www.compversions.com 截图

0 投票
5 回答
8420 浏览

jquery - 如何淡入整个网页 - 可访问

客户要求他们的主页开始空白（只有徽标和背景图像可见），然后在一两秒后淡入导航和内容。

我可以从通过 CSS 隐藏的内容开始，然后使用 jQuery 将其淡入。不幸的是，这违反了渐进增强：在活动代码运行之前，该站点将完全无法使用，这会给使用屏幕阅读器的视障人士带来问题，等等。

我考虑过的两种解决方法是 Flash 和<noscript>标签。Flash 似乎有点矫枉过正，因为它没有在网站的其他地方使用。此外，主页内容丰富，有一组不断更新的新闻，有点像一个轻博客。该 <noscript>标签对使用屏幕阅读器的视障人士没有帮助，因为他们的浏览器通常启用了脚本。

我错过了解决方案吗？或者这不是一个好主意？

0 投票
1 回答
524 浏览

css - CSS3 多背景图片 - 在移动设备上支持？

我通过媒体查询在移动设备上优化我的网站。在移动优化版本上使用多个背景图像是否安全？移动浏览器通常是最新的，所以我认为这会很好......谢谢

0 投票
2 回答
141 浏览

javascript - 我应该如何解决冗余在渐进增强/优雅降级中的作用？

当我在回答另一个关于 和 中文本的最佳实践的问题时，出现了placeholder这个inputs问题textareas。

使用 HTML5placeholder无疑是最佳选择，但此时似乎仍然需要为旧版浏览器添加一个降级的解决方案（使用 javascript）。

JsFiddle在这里：http: //jsfiddle.net/leifparker/DvqYU/16/

问题是：既然他们都完成了几乎完全相同的事情，为什么还要包括两者呢？为什么不直接使用纯 javascript 解决方案，而放弃 HTML5 实现，直到它（几乎）被普遍接受？

诚然，对于这个特定的示例，添加 HTML5placeholder属性和hasPlaceholderSupport()函数只是添加了相当少的行 (4)，但由于需要降级的支持，是否有任何理由为渐进式冗余而烦恼？

我确信双方都有理由，我很想听听。

提前致谢！

0 投票
1 回答
280 浏览

javascript - HTML5 和占位符：如何逐步进行？

我正在考虑使用 HTML5 的placeholder属性。如果浏览器不支持 HTML5，我可以使用 jQuery 作为后备。但是，如果 JS 关闭了怎么办？我如何使用渐进增强理念来处理这个问题？

0 投票
3 回答
265 浏览

javascript - 内联编辑和渐进增强之间的冲突

我有一个渐进增强的网页 - 一个脚本向页面添加了一些格式和元素。

该页面还允许内联编辑。

现在这是我的问题：在编辑模式下，渐进增强脚本完成了它的工作并添加了标记。一些标记位于可以编辑的区域，因此当用户保存页面时它会被保存，这当然不是想要的行为。

在同一页面上进行内联编辑和渐进增强工作的干净方法是什么？

0 投票
2 回答
5462 浏览

javascript - 如何在没有 javascript 的情况下开发轮播

谁能告诉我如何在没有 jquery 和 javascript 的情况下开发网站。

目前我有一个使用 jquery 循环插件开发的轮播，但是当我们改变想法时，我们应该实现我们的网站，相信“所有人的网络，使用渐进增强”，这对我来说听起来不错，但不知道我将如何修改我的如果禁用 javascript，现有的轮播和手风琴将运行。

我必须在没有 javascript 或最少使用 javascript 的情况下运行那些轮播和手风琴。仅使用 css3 和 html5，因此如果 javascript 关闭，用户仍然可以查看。目前没有javascript，手风琴休息，只是它显示所有内容和轮播只是卡住了！

我只是在寻找一些想法，如何在没有 JS 的情况下运行我现有的轮播、手风琴。

提前致谢。

等待您的答复。

0 投票
1 回答
445 浏览

jquery - 替代 img src... 可能没有 JavaScript？

我jQuery.load用来加载一些内容，但对于 SEO 和禁用 JavaScript 的浏览器，我使用渐进增强来使用<a>标签正常链接到内容，以及当 JavaScript 加载内容时。

我的问题是，如果内容是使用 JavaScript 加载的，那么在其中一个页面/加载的内容上会有一个图像，src="images/picture.png"但如果它使用<a>标签加载，它将是src="../images/picture.png"（注意../）。我知道我可以通过将加载的页面与文件位于同一文件夹级别来更改文件结构来解决此问题，但这意味着我的根目录/或隐藏的主文件中有大量文件，这给我带来了混乱该页面的 URL。

我想知道是否可以为图像指定替代来源（当然我不能使用 JavaScript 来执行此操作；它必须是纯 HTML）。

对...不要以为我说得很清楚..

我需要改变的是：

  • 如果通过<a>链接单击该页面，则图像源应为src="../images/picture.jpg"

  • 如果内容是使用jQuery.load图像源加载的，应该是src="images/picture.jpg"

这无法使用 JavaScript 实现，因为它适用于 JS 不工作或被禁用时。

0 投票
2 回答
221 浏览

jquery - 您如何构建您的 Web 应用程序以使 AJAX 和 DHTML 更容易？

鉴于 websinte 的这种结构

使用普通的网络导航，页面完全呈现在 HTML 中，并遵循渐进增强的方法，最后我寻找一些特定的 id 或类，并使用 javascript 和特别是 jQuery 为它们提供动态行为。在下载外部脚本之后，此增强代码发生在正文的最后。

在#content中，发生了很多 jQuery AJAX 交互，其中一些从服务器获取其他部分视图并将它们插入到页面中，但是我必须再次查找这些 id 和类并将 javascript 对象附加到这些新元素。

这可能非常麻烦，因为您不想将控制器、事件处理程序或其他任何东西重新应用于已经拥有它们的对象。

到目前为止，我发现的唯一解决方案是放在我的部分视图中：

我认为类似的问题会发生，例如当你想要动态$('input.date').datepicker()添加新<input type="text" class="date"/>元素时，除非你重新执行 jQuery 语句，否则新元素没有日期选择器。

例如，考虑到#content我有一个<input type="text" class="date"/>：

  1. 为了使 jQuery datepicer 第一次工作，我必须在外部声明之后的$('input.date').datepicker(), 末尾调用。<body><script>

  2. 如果页面下载了新元素的部分视图<input type="text" class="date"/> ，我必须将初始化调用放在 ajax 调用的视图中。

所以我以重复的代码结束，这是我不希望在 JS 中特别想要的，因为我无法像在 C# 中那样轻松地重构代码。

这是上周让我发疯的事情，想知道是否有更好的方法来实现这一点？更好的技术，还是其他整体方法？

您如何构建您的 Web 应用程序？

亲切的问候。

PS：如果有类似.live()或.delegate()不仅与事件相关的东西会很好，不是吗？每次将某些内容添加到 DOM 时，jQuery/浏览器是否会引发任何事件？

0 投票
5 回答
201 浏览

javascript - 这种浏览器技术有名称吗？

这种技术是否有一个名称，包括探索在浏览器中打开的页面以查找特定内容并对其进行修改？

一些例子：

  • Skype 在页面上查找电话号码，并附加呼叫菜单
  • 脚本在页面中查找百分比并将其替换为小饼图
  • 广告引擎在页面中找到关键字并将其转换为超链接
  • 在页面上指向另一个域的所有超链接旁边添加一个图标
  • 等等

我理解这是一种渐进增强。但我对第一步，即内容发现过程特别感兴趣。我会对提供最佳实践的文章感兴趣，或者解释这种技术的缺点。

编辑：我添加了一个示例来表明这种技术不仅适用于文本节点，而且可以应用于任何类型的 html 内容。


12345678910