对支持 HTML5 和非 JS 的访问者进行优雅降级
我现在更加关注 HTML 5,但我不断回到一个问题,那就是使用它而不是搬起石头砸自己的脚的实用性。
我工作的大多数网站都是针对中小企业的,其目标客户群通常使用 IE7 或 8,而令人惊讶的是,有很多人不支持 JavaScript——比如 10 - 15% 的愚蠢数字。
这意味着我不能依赖拥有最新浏览器的访问者,也不能依赖 JavaScript 修复(例如 Modernizr)来弥补。我已经看到了一些非常有力的论据,说明 HTML5 如何真正加快开发时间并使事情变得更加容易,但是在实施时如何保持优雅的降级呢?
I am looking more heavily HTML 5 now, but I keep coming back to one issue and that's the practicality of using it without shooting myself in the foot.
Most of the site I work on are for SMEs that target customer bases that typically use IE7 or 8 and a surprising number don't enable JavaScript- something stupid like 10 - 15%.
This means I cannot rely on visitors having up to date browsers and I can't rely on the JavaScript fixes (such as modernizr) to compensate. I've seen some very powerful arguments for how HTML5 can really speed up Dev time and makes things so much easier, but how do you maintain graceful degradation when implementing?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您所关注的 HTML5 实施范围是解决方案的关键。让我用以下内容来说明这一点:
以 HTML5 的视频属性为例 - 对于不兼容的旧版浏览器设置 Flash 回退是一种相当常见的做法,这样无论情况如何,每个人都可以观看视频。
这里的问题是:“那么我应该使用什么作为标记?HTML 4.01、XHTML 1.0 还是 HTML5?”。答案自然是使用 HTML5 标记,因为视频标记实际上是 HTML5 标记。部分答案没有错,但也不完全正确;目前,当浏览器对 HTML5 的支持尚未完全且标记尚未达到推荐阶段时,在 HTML5 上进行标记是不明智的,因为旧版浏览器只会给您带来空白。相反,如果要进行任何类型的优雅降级,则应将 HTML 文档标记为 XHTML 1.0 或 HTML 4.01,然后包含所需的标签,在本例中为视频标签。旧版浏览器将正确渲染我们的 DIV 和 CSS 样式,但无法识别视频标签,而是转至 Flash 回退视频。
所以我认为,一旦您对在旧版浏览器的限制和缺乏 JavaScript 支持的情况下希望使用 HTML5 的程度有了更有针对性的想法,您应该能够找到出路
,尽管 HTML5 的支持兼容性尚未完全实现,但这并不意味着我们应该像瘟疫一样避免它。尝试一下,然后使用一些常见的方法,例如视频标签所示的示例(请阅读 divintohtml5。这是一个很棒的资源!)。
只是我的两分钱的价值。希望它能有所帮助。
(这是我与代理机构共同设计和开发的网站示例 - http://www.blueprint.sg. 它在 XHTML 1.0 中进行了标记,但使用该标签作为全屏背景视频,以便浏览器无法识别该标签。 PS:对于不太好的设计和烦人的播放提前表示歉意。当前的视频设置为“自动播放”,以便它会同时播放和加载。)
the extent of HTML5 implementation you're looking at is the key to a solution. let me illustrate this with the following:
take for instance now the HTML5's video attribute - it is a fairly common practice to put in place a flash fallback for incompatible legacy browsers so that regardless of the situation, everyone gets to view the video.
question here is: "so what do I use as the markup? HTML 4.01, XHTML 1.0 or HTML5?". the answer, naturally, would be to use the HTML5 markup because the video tag is in fact a HTML5 one. in part, the answer is not wrong, but it is also not completely correct; at this point of time when browser support for HTML5 is not full and the markup has yet to hit the recommended stage it will be unwise to mark it up at HTML5 because legacy browsers will just give you a blank look. Instead, if there is to be any graceful degradation of sorts, then your HTML document should be marked up as XHTML 1.0 or HTML 4.01 and then included with the desired tag, which in this case for an example is the video tag. Legacy browsers will render our DIVs and CSS styles correctly but will not recognize the video tag and will instead go to the Flash fall back video.
so i suppose that once you have a more targeted idea of the extent you'd like to use HTML5 within the constraints of legacy browsers and the lack of JavaScript support, you should be more than able to figure a way out
also, though HTML5's support an compatibility is not yet fully realized, it doesn't mean we should avoid it like a plague. give it a shot and fall back on some common methods like the example illustrated with the video tag (read diveintohtml5. it's a fantastic resource!).
just my two cents' worth. hope it's helpful some how.
(heres an example of a site that I designed and co-developed with an agency - http://www.blueprint.sg. it's marked up in XHTML 1.0 but uses the tag for a full screen background video. falls back to a backgroun image for browsers unable to recognize the tag. PS: apologies in advance for the not so good design and the annoying playing of the video which is currently set at "autoplay" so it'll play and load at the same time.)
如果您的用户使用 IE7 - 8 并且经常禁用 JavaScript,那么 HTML5 目前不适合您,无论如何也不适合这些客户。
正如他们所说,课程的马匹,在你的情况下,安全的选择似乎是保留 HTML 4.01。
If your users use IE7 - 8 and often have disabled JavaScript, then HTML5 isn't for you right now, for these customers anyway.
Horses for courses as they say and in your case it would seem that the safe bet is to stay with HTML 4.01.
禁用 JavaScript 的用户可能会给任何 Web 开发人员带来许多令人沮丧的情况。但实际上,您唯一能做的就是提醒用户注意这些限制,我通常使用 NoScript html 标签。
Users with JavaScript disabled can create many frustrating circumstance for any web developer. But really pretty much the only thing you can do is alert the user of the limitations, I generally use the NoScript html tag.