标签: progressive-enhancement

我有一个非常简单的Django应用程序,它允许用户根据国家,持续时间和价格提交表单并查看过滤的假期列表.

我想在前端使用Backbone,因此启用JS的用户不需要GET来查看结果,但可以动态加载它们.

我想使用渐进增强功能,以便拥有JS的用户获得Backbone体验,而没有JS的用户仍然可以使用该表单.我也想遵循DRY原则.

我的问题是如何最好地做到这一点.是否有将两者一起使用且重复次数最少的例子？我特别在想:

1. 像/italy/1-week/from-500-to-1000/我这样的URL 路由 - 我现在需要编写两组路由代码,一个在Django中urls.py,一个在Backbone的路由器中,以获取国家/持续时间/价格参数？
2. 根据参数过滤数据 - 我是否需要编写两种不同的方法来执行此操作,views.py一种在Backbone 中,一种在Backbone中？(我假设我至少可以为这两个调用使用一个API.)
3. 在模板中渲染 - 我是否需要为Django编写一个列表模板,为Backbone编写另一个列表模板,还是可以使用相同的模板？

到目前为止,我发现将Backbone整合到Django中的最好(唯一)示例是Josh Bohde的Django Backbone repo,它没有逐步增强.

我也发现这篇关于使用Backbone和Rails进行渐进增强的博客文章,但看到类似于Django的东西真的很有用.

更新:刚刚在一个类似的主题上发现了这个问题 - 这种情况真的是无望的,因为答案听起来很合理吗？

据我了解渐进式增强功能,其中一个基本原则是,无论浏览器版本或设置如何,网站都应该适用于所有人.

我看到的建议细分是:

• HTML内容层使用语义标记
• CSS表示层
• 增强层(通常通过JavaScript或像JQuery这样的JS库)

但是,我对处理HTML内容层的正确方法感到困惑.特别是语义标记.

我一直看到HTML5标签,如nav,article,footer等,是维护PE语义标记的理想方法.但是,许多旧版浏览器不支持HTML5标记.解决这个问题的简单方法是使用CSS将默认样式设置为{display:block; 对于HTML5标签,但这仅适用于某些浏览器.例如,可怕的IE6无法识别HTML5元素.

典型的解决方法是使用javascript直接在DOM中动态创建缺少的元素(例如通过HTML5 shiv).

但是......如果客户端运行的环境不能识别HTML5元素,并且由于某种原因它们不接受javascript,那么如何合并HTML5语义标签以支持渐进增强功能,而无法正确呈现无法识别标签的无脚本浏览器？这是否可能,或者您是否必须将这些浏览器排除在您的设计考虑之外(这似乎与PE理想相反)？

有时我需要添加超出CSS3滚动位置等效果范围的动画效果.

通常情况下这很好,但我最近遇到了一个尴尬的问题.我试图动画当用户向下滚动页面时发生的模糊效果,使用-webkit-filter: blur().

这很容易用一些JavaScript实现,但我发现动画模糊确实会降低用户处理器的负担.动画在我全新的超快速mac-book上运行正常,但未能在旧机器(甚至是我的机器上除Google Chrome之外的浏览器)上顺利运行.

实现细节并不重要,但我发现这个问题引出了一个问题:

我是否可以透明地检测(大概可能)客户端处理能力并使用这些知识来打开或关闭代码中的某些功能,以确保平稳的操作和动画？

我知道存在JavaScript动画库,它们可以在不占用大量处理能力的情况下做很棒的事情,但这不是我所追求的.我可以想到与动画无关的其他用例.

为长篇介绍道歉 - 只是试图适当地设置场景以避免模棱两可和混乱.

Web应用程序已从基于浏览器的基于服务器端逻辑的接口变为基于浏览器的完全应用程序,而对服务器端逻辑的需求最小.可以通过识别清晰的Web应用程序来描述这种演变.

让我们暂时考虑两代:ajax之前和之后.当然还有其他因素,例如与CSS支持和访问控制标题有关的因素,但让我们从简单开始.

从无风格的无JavaScript简单系统开始,添加优雅降级的增强层并使用ajax包装,高响应性的现代应用程序完成是一项具有挑战性且容易出错的任务.这绝非易事.

对于Web应用程序可能看起来属于哪一代,取决于访问应用程序的方式.如果通过Lynx和最新一代应用程序通过FireFox 3.1访问,同样的Web应用程序似乎是第一代应用程序,中间有几个级别,具体取决于用于访问应用程序的用户代理.

根据用户代理的功能创建一个优雅降级的Web应用程序的问题,其中创建的利用当前浏览器功能的东西将恢复到大约十五年前面对Lynx时创建的东西的功能,这是非常困难的.

我无法想象桌面应用程序在操作环境中会出现这种差异.

能够利用Vista中的功能的单个可执行文件(与一组特定于操作系统的变体相对)在XP下运行时以及缺少某些Vista功能时可以很好地应对.为了降低与Web应用程序相当的距离,当在仅限命令行的环境(如DOS)中运行时,相同的桌面应用程序仍然必须运行,尽管不那么花哨.

在Lynx下运行它,它是第一代Web应用程序.在FireFox 3.1下运行相同,它是一个花哨,闪亮的当代网络应用程序.如果遇到这样的问题,你会认为它具有挑战性,棘手但可行.

在DOS下运行它,它是一个命令行应用程序.在Vista下运行它,它是一个花哨,闪亮的当代网络应用程序.如果遇到这样的问题,你会觉得它很疯狂.或者你呢？

桌面应用程序在操作环境中是否会像Web应用程序那样面临如此广泛的差异？

这个问题(方差的广度,而不是方差本身)是Web应用程序域所特有的,还是可以在桌面开发中找到？

我有一个SearchController,其动作可以执行一些长时间运行的搜索并返回结果页面.搜索可能需要1到60秒.搜索的URL是以下格式的HTTP GET请求:http://localhost/Search?my=query&is=fancy

我正在寻找的体验类似于那里的许多旅游网站.我想展示一个中间的"正在加载......"页面,理想情况是:

1. 用户可以重新加载页面而无需重新启动搜索
2. 后端搜索完成后,用户将重定向到结果
3. 禁用JavaScript的浏览器的体验会降低
4. 后退按钮/浏览器历史记录不应包含此插页式页面.
5. 在短搜索(1秒)的情况下,它对获得结果或体验的时间没有显着影响(显着丑陋的页面闪烁,无论如何)

这些都是不错的选择.我对所有想法持开放态度!谢谢.

我想通过网络播放音频和视频时想出我的选择.我在HTML 5 <video />和<audio />.但是,如果HTML视频/音频失败,我希望能够显示Flash视频/音频.

是否有一种简单的方法可以检测视频/音频是否因任何原因而无法播放,然后将HTML5播放器替换为Flash播放器？

假设我有一个可访问的站点,将与JS禁用的人进行协商.

我有一个新闻列表,我可以这样总结:

<ul>
    <li>News 1</li>
    <li>News 2</li>
    <li>News 3</li>
</ul>

每次重新加载页面时,都会添加最新的新闻,如果您收到10多条新闻,则会丢弃旧的新闻.

现在,如果我使用Angulard JS,我必须将数据放入模型和ng-repeat中,并摆脱我的静态HTML.该列表将动态填充,因此拥有JS的人员几乎可以实时更新列表.

我需要的是让两者协同工作.我需要静态列表,如果JS被激活,我希望当前元素插入模型并由angularjs管理.

现在我目前的做法是:

• 当我的模型初始化时,将列表DOM分开,手动提取数据,并删除所有子列表
• 在列表中注入角度模板代码
• 让角度做它的魔力

它很糟糕,因为你失去了角度的声明性优点,而且你有很多锅炉代码甚至不是通用的,所以你为你页面中的每个小部件重写它.

我正在为画廊所有者建立一个网站,每个网页都有很多图片.因此,我想懒得加载网页上的图像,使初始加载不那么沉重.但是,我想以"渐进增强"的方式实现这一点.

我发现了很多延迟加载方法,但它们都需要摆弄html代码,这样网页在关闭javascript时就没用了.(例如src,img标签的属性保持未设置,直到图像被延迟加载).

为了逐步实现延迟加载方法,我认为需要以下内容:

1. 防止浏览器获取图像,即使它们在页面上,但只在javascript打开时才这样做(所以在非JavaScript浏览器上,图像仍然正常加载).这应该在不改变html的情况下完成.
2. 保存src属性在data-src属性
3. 向下滚动时会连续加载图像

在这三个步骤中,第一个步骤似乎是最难的步骤.即使这个stackoverflow讨论也没有提供一个不会破坏渐进增强的答案.

有没有人有任何想法？

我是第一次使用CSS网格构建网站。由于并非所有浏览器都支持此功能，因此我设置了一组后备样式，并有条件地使用@supports not (display:grid)。但我也想将其用作移动样式表，并且仅在较大的屏幕上使用CSS网格-这可以通过简单的媒体查询来实现@media screen and (max-width:700px)。现在的问题是-如果其中任何一个都成立，也就是说，如果浏览器不支持CSS网格或者浏览器窗口的宽度不超过700像素，我想使用我的后备样式表。

所以我的问题是-我怎么问的浏览器@supports或@media在同一时间？嵌套它们是行不通的，因为这本质上是在要求它们都为真，并且仅将整个样式表复制粘贴@supports到中，这是错误的@media。

基本上，我想要这样的东西：

(@supports not (display:grid)) or (@media screen and (max-width:700px)){
    /*my stylesheet*/
}

我想通过选择器使用新的CSS 功能查询，如下所示：

:root { --focus-shadow: 0 0 0 2.4px rgba(130, 138, 145, 0.5); }

/* Focus styles even for mouse selection in old browsers */
*:focus { outline: none; box-shadow: var(--focus-shadow); }

/* Newer browsers: Only add focus styles if e.g. navigating with the keyboard */
@supports selector(*:focus-visible) {
  *:focus { box-shadow: none; }
  *:focus-visible { box-shadow: var(--focus-shadow); }

<a href="#">Focus me</a>

以上是有效的 CSS（尽管截至 2020 年 6 月支持不佳），但 Sass 在其两个实现中的任何一个中都不支持它。它正在开发中，但看起来它需要一段时间才能实现。尝试通过 Sass 编译上述内容会引发错误（因 Sass 实现而异；有关错误的详细信息，请参阅 …