标签: progressive-enhancement

处理浏览器不支持HTML5 <canvas>标记的情况的标准方法是嵌入一些后备内容,如:

<canvas>Your browser doesn't support "canvas".</canvas>

但页面的其余部分保持不变,这可能是不恰当或误导的.我想要一些检测画布不支持的方法,以便我可以相应地呈现我的页面的其余部分.你会推荐什么？

我对进步增强和优雅降级之间的区别感到困惑.他们看起来像是一样的东西.

你能否向我解释两者之间的差异以及我将使用哪一种情况？

有时,使某些页面元素仅在例如悬停时可见是有帮助的.一个例子是stackoverflow的"反馈 - 这个帖子对你有用吗？" - 小部件.由于这些元素可能对界面至关重要,因此这种悬停式展示功能应该是渐进式增强功能,或者换句话说,不引人注目且优雅地降级.

通常的方法似乎是使用javascript,例如隐藏元素并在父元素悬停时使它们可用.这种选择的原因可能:hover是不支持所有元素,特别是在旧版浏览器中,从而禁止您首先隐藏元素,直到css2.(对于js/jQuery示例cf. jquery显示悬停时的元素)

我想知道你是否可以安全地使用纯css3实现这样的功能,使用:not(:hover)和:hover不影响旧版浏览器.据我所知,要求是每个支持的浏览器都:not()必须支持:hover所有元素.根据以下消息来源,情况似乎如此

• http://www.quirksmode.org/css/contents.html
• http://kimblim.dk/css-tests/selectors/

示例实现:http://jsfiddle.net/LGQMJ/

你怎么看？有任何异议或其他来源吗？

*安全地我的意思是浏览器应该始终显示所有元素作为最后的手段.

我想仅使用CSS来区分外部链接和内部链接.

我想在这些链接的右侧添加一个小图标,而不会覆盖其他文本.

我想要使​​用的图标是维基百科上使用的图标.

例如,这是一个外部链接:

<a href="http://stackoverflow.com">StackOverflow</a> 

这是一个内部链接:

<a href="/index.html">home page</a> 

我怎么能用CSS做到这一点？

我想,这个问题可以推广到任何一个角色; 但我的具体用例是表情符号.

我正在编写一个命令行程序,我想检测运行它的计算机是否安装了可以显示表情符号的字体; 以及当前终端应用程序是否以该字体显示它们.

目前,我有一个黑客,只是在非OS X上过滤掉它们; 但我不想短暂更改拥有表情符号启用设置的Linux用户.我更愿意以'正确的方式'做到这一点.

谢谢!

我想知道是否有人找到了解决这个问题的方法.有没有办法让两全其美:

• 构建一个基于页面的站点,具有永久链接,可访问性,SEO和优雅的后备/渐进增强(基本上所有Web开发的最佳实践)
• 并且,对于那些使用javascript,具有ajax加载内容的响应式前端体验,在导航底层网站页面时没有页面刷新,脚本/内容/ css /等的最小冗余下载.(像AngularJs或Ember.js这样的客户端框架的所有好处)

我看到一些主要网站能够管理这个(gmail,stackoverflow),我看到Jeff的新网站在一个noscript标签中构建了一个简单的网站版本.

1. 基于混合页面/单页面应用程序的解决方案是构建网站的两个版本,发送两个版本,并让客户决定它可以显示哪个版本？(这是gmail的功能吗？)
2. 或者是AngularJS等人的问题.根本不是为了让优雅降级而设计的？

我认为#1就是答案,让我的DRY大脑受伤.

(我关注AngularJs的原因是我喜欢它支持html模板,声明式样式,以及它修复js范围的尝试.Ember和其他框架也很出色;也许其中一个更适合混合站点？)

在谈到使用JQuery编写stackoverflow时,Jeff提到了"渐进增强"的概念.

在快速推出谷歌之后,我发现了几个关于它的高层讨论.

任何人都可以推荐一个好的地方开始作为程序员.

具体来说,我一直在用PHP编写Web应用程序,并希望使用YUI来改进我正在编写的页面,但是其中很多看起来都是基于JavaScript的,大多数驴工作都是使用JavaScript完成的.对我来说,这似乎有点矫枉过正,因为在没有Javascript的情况下查看网站可能会破坏其中的大部分内容.

任何人都有一些好的地方开始使用这个想法,我真的不关心语言.

理想情况下,我想先看看如何开始创建静态HTML,然后将YUI(或任何Ajax框架)添加到它,以便您获得更丰富的客户端的好处？

我有兴趣使用JavaScript hashchange事件来监视URL片段标识符的更改.我知道Really Simple History和jQuery插件.但是,我得出结论,在我的特定项目中,另一个JS文件的额外开销并不值得.

我想做的是采取"渐进增强"的方式.也就是说,我想测试访问者的浏览器是否支持hashchange事件,并编写我的代码以便在可用时使用它,作为增强而不是核心功能.IE 8,Firefox 3.6和Chrome 4.1.249支持它,占我网站流量的20%左右.

那么,呃......有没有办法测试浏览器是否支持特定事件？

谢谢.

假设我们的数据如下

var data = {
  facets: [{
    name : "some name",
    values: [{
      value: "some value" 
    }]
  }]
};

我们可以很容易地将其表示为绑定到挖空模板的视图模型,如下所示:

<ul data-bind="foreach: facets">    
  <li>      
    <span data-bind="text: name"></span>
    <ul data-bind="foreach: values">            
      <li data-bind="text: value"></li>     
    </ul>
  </li>
</ul>

问题是,在使用渐进增强时,我们如何才能获得相同的结果？这是通过最初在服务器端渲染模板然后将挖空模板和视图模型绑定到该渲染.

一个简单的服务器端模板看起来像这样:

<ul>    
  <li>      
    <span>some name</span>
    <ul>            
      <li>some value</li>       
    </ul>
  </li>
</ul>

我探讨了几种不同的可能性:

• 一个是创建一个淘汰模板和一个服务器端模板,并通过解析服务器端模板的DOM来动态生成Knockout视图模型.这样,启用JavaScript时,只有Knockout模板可见,并且如果禁用JavaScript,则只有服务器端模板可见.它们的样式可以使它们看起来完全相同.

• 另一种方法是将facets数组中的每个项目的绑定分别应用于该方面的现有DOM元素.但是,这仍然只有一个深度,并不适用于嵌套元素.

这些方法都不是很干净.另一种解决方案可能是编写一个自定义绑定来处理整个渲染并尽可能重用现有元素.

还有其他想法吗？

有没有办法用JavaScript检查客户端浏览器是否支持GEO-URI方案？

我想将不支持的浏览器的坐标显示为地图的链接

<a href='http://osm.org/#map=18/52.51627/13.37769'>Berlin</a>

以及支持的浏览器(如智能手机)作为其本机应用程序的链接.

<a href='geo:52.51627,13.37769'>Berlin</a>