Tag Archives: HTML5

关于浏览器支持localStorage的统计

Posted on by

注：+该版本及该本以上，-该版本以下，不包含该版本
主要测试以下三种存储方案的支持程度：
localStorage: false
userdata: false
globalStorage: false

Chrome4+ 开始支持localStorage

Firefox3.5+开始支持localStorage
Firefox1.5+支持globalStorage

IE8+支持localStorage
IE7兼容模式支持localStorage
IE5.5+支持userdata

Safari 4+ 支持localStorage
Opera10.5+支持localStorage

Netscape Navigator最后一版（9.0.0.6）支持localStorage，其余版本未测

———————- 我是分割线 ——————————-
因此，拟使用localStorage来作为前端存储主干方案，退化策略如下：
采用特性探测，按如下顺序提供存储支持：
localStorage
globalStorage
userdata
Cookie
Cookie也可能被禁用，如果都不支持，那就只有抱歉了，这种情况下网站也登录不了滴。

其它可以采用的扩展存储方法：
Google Gears
SWF

另外，临时会话存储sessionStorage尚未正式测试过，支持的浏览器不多。可以考虑作为扩展方案，备用方案可采用window.name，但数据量有限，待评估。

以上数据供参考，欢迎有更了解的同学提意见和建议。

update:
使用userdata会使getAttribute被重写，需要做兼容处理，务必小心使用。
-EOF-

HTML5相关资源

Posted on by

参考资料

HTML5 Readiness : Visual timeline of HTML5 feature support.
When Can I Use… : Up to date HTML5 feature browser support reference.
HTML5 Test : Series of browser tests to evaluate feature support.
HTML5 Infographic : A quick overview of scope and support.
W3C HTML5 Web Author View : Lightweight version of the W3c spec, perfect for web developers.
Chrome Implementation Status : Follow the engineering effort for cutting edge support from the Chrome team.
Dive into HTML5 by Mark Pilgrim : Learn HTML5 and have a laugh at the same time.
HTML5: Comparison of Layout Engines : If the Wikipedia says it then it must be true.
Safari HTML5 Guides : Excellent WebKit-oriented development documentation.
Mozilla Development Center HTML5 Reference : Excellent documentation and guides.
WhatWG Web Apps Spec (HTML5 plus the kitchen sink) : Working draft spec of everything under the larger HTML5 umbrella.
ECMAScript 5 table : Detailed table of ES5 support across browsers.
Compatibility Tables : Results of DOM and CSS properties tests in major browsers.

相关工具
Modernizr : Javascript library for feature detection and control fallback cases of HTML5.
html5 shiv : Javascript patch to make IE support, and print, the new tag elements.
CSS Button Maker : Preview CSS buttons with a fancy interface to play with the parameters.
CSS3 Generator : Preview CSS buttons with a fancy interface to play with the parameters.
CSS3 Sandbox : Test and get the code of the fanciest CSS features.
CSS3 Gradient Generator : Generate CSS code for gradients on the fly.
CSS3 Please : Use CSS3 without having to worry about xbrowser differences.
Font Dragr : Test your fonts using drag and drop.
Font Squirrel Generator : Most complete tool to generate code for you font-face support.
Let’s make the web faster : Complete list of tools related to web performance.

社区
HTML5 Watch
CSS3 Watch
HTML5 Doctor
WhatWG Blog
HTML5 Demos
Ajaxian
Chromium HTML5 Discussion Group
Mozilla Hacks
Safari HTML5 Demos
Test Drive IE9 Demos
Open Web – Opera Developer Community
Chrome Experiments
-EOF-

HTML5之自动聚焦域

Posted on by

在要自动获得焦点的表单域上放置autofocus属性即可，比如：

1
2
3
4

<form>
<input name="q" autofocus>
<input type="submit" value="Search">
</form>

如果需要向下兼容一些老式浏览器，让他们也可以获得焦点，下面的代码比较实用：

1
2
3
4
5
6
7
8
9

<form name="f">
<input id="q" autofocus>
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("q").focus();
}
</script>
<input type="submit" value="Go">
</form>

-EOF-

HTML5之占位符文本

Posted on by

HTML5中的占位符文本就是平时我们用JS做的鼠标悬停说明（input hint）。使用起来也很简单，完全向下兼容。下面的代码是一个使用示例：

<form>
<input name="q" placeholder="Search Bookmarks and History">
<input type="submit" value="Search">
</form>

给input加上placeholder属性即可。HTML5中该属性值只能填写文本。点击这里查看你的浏览器是否支持占位符文本。
目前支持占位符文本（Placeholder Text）的有Firefox3.7+、Safari4.0+、Chrome4.0+。
-EOF-

畅游 HTML5 （DIVE INTO HTML5 中文版）

Posted on by


从年后开始一直都在说要翻译这本书，的确是在断断续续的翻译，但总是没时间校对，拖了很久。这个端午假期搞好了第零章，先放出来，第一二章已经翻译好等待校对。就像作者一样，翻译这本书每完成一个章节便放出来，整本书预计今年九月翻译完成。由于这是我的第一次翻译，错误难免，还请发现问题的朋友多多指教。
以下是译文存放地址，欢迎评阅：
DIVE INTO HTML5 中文版 http://lib.closetou.com/diveintohtml5/
-EOF-