未完待续 » HTML5 http://ioio.name To Be Continued Thu, 09 Feb 2012 05:20:42 +0000 en hourly 1 http://wordpress.org/?v=3.3 关于浏览器支持localStorage的统计 http://ioio.name/browser-localstorage.html http://ioio.name/browser-localstorage.html#comments Thu, 13 Jan 2011 06:09:17 +0000 枯藤昏鸦 http://ioio.name/?p=1738 注：+该版本及该本以上，-该版本以下，不包含该版本
主要测试以下三种存储方案的支持程度：
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-

Related posts:

Copyright © 2005~2011 | Permalink | 2 Comments | Close To U
订阅 Twitter 域名优惠码 Media Temple空间 主机/域名优惠码 )]]> http://ioio.name/browser-localstorage.html/feed 2 HTML5相关资源 http://ioio.name/html5-resources.html http://ioio.name/html5-resources.html#comments Thu, 26 Aug 2010 00:54:21 +0000 枯藤昏鸦 http://ioio.name/?p=1490 参考资料

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-

Related posts:

Copyright © 2005~2011 | Permalink | 0 Comments | Close To U
订阅 Twitter 域名优惠码 Media Temple空间 主机/域名优惠码 )]]> http://ioio.name/html5-resources.html/feed 0 HTML5之自动聚焦域 http://ioio.name/html5-autofocus.html http://ioio.name/html5-autofocus.html#comments Mon, 21 Jun 2010 14:29:36 +0000 枯藤昏鸦 http://ioio.name/?p=1320 在要自动获得焦点的表单域上放置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-

Related posts:

Copyright © 2005~2011 | Permalink | 1 Comments | Close To U
订阅 Twitter 域名优惠码 Media Temple空间 主机/域名优惠码 )]]> http://ioio.name/html5-autofocus.html/feed 1 HTML5之占位符文本 http://ioio.name/html5-placeholder.html http://ioio.name/html5-placeholder.html#comments Sun, 20 Jun 2010 03:03:55 +0000 枯藤昏鸦 http://ioio.name/?p=1316 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-

Related posts:

Copyright © 2005~2011 | Permalink | 0 Comments | Close To U
订阅 Twitter 域名优惠码 Media Temple空间 主机/域名优惠码 )]]> http://ioio.name/html5-placeholder.html/feed 0 畅游 HTML5 （DIVE INTO HTML5 中文版） http://ioio.name/dive-into-html5-cn.html http://ioio.name/dive-into-html5-cn.html#comments Wed, 16 Jun 2010 03:12:45 +0000 枯藤昏鸦 http://ioio.name/?p=1306
从年后开始一直都在说要翻译这本书，的确是在断断续续的翻译，但总是没时间校对，拖了很久。这个端午假期搞好了第零章，先放出来，第一二章已经翻译好等待校对。就像作者一样，翻译这本书每完成一个章节便放出来，整本书预计今年九月翻译完成。由于这是我的第一次翻译，错误难免，还请发现问题的朋友多多指教。
以下是译文存放地址，欢迎评阅：
DIVE INTO HTML5 中文版 http://lib.closetou.com/diveintohtml5/
-EOF-

Related posts:

Copyright © 2005~2011 | Permalink | 4 Comments | Close To U
订阅 Twitter 域名优惠码 Media Temple空间 主机/域名优惠码 )]]> http://ioio.name/dive-into-html5-cn.html/feed 4 HTML5新功能演示 http://ioio.name/html5-demo.html http://ioio.name/html5-demo.html#comments Thu, 29 Apr 2010 10:34:29 +0000 枯藤昏鸦 http://ioio.name/?p=1123
这是一个HTML5新功能的演示文档，几乎包括HTML5所有激动人心的新功能的简介和DEMO。
IE系列浏览器无法浏览，firefox、opera等浏览器只能使用部分功能，如果想100%演示成功，请使用最新版的“谷歌浏览器（Google Chrome）”，建议使用最新版。

中文版演示文档请看此处：http://ioio.name/html5/html5_zh_CN.html
中文原版：http://directguo.com/html5/
英文原版：http://apirocks.com/html5/html5.html
英文镜像：http://ioio.name/html5/html5.html
-EOF-

Related posts:

Copyright © 2005~2011 | Permalink | 1 Comments | Close To U
订阅 Twitter 域名优惠码 Media Temple空间 主机/域名优惠码 )]]> http://ioio.name/html5-demo.html/feed 1 DIVE INTO HTML5离线版下载 http://ioio.name/dive-into-html5-archive.html http://ioio.name/dive-into-html5-archive.html#comments Wed, 03 Mar 2010 03:03:43 +0000 枯藤昏鸦 http://ioio.name/?p=935 MARK PILGRIM这次给我们带来了DIVE INTO HTML5，虽然这本书还在写作之中，但是我想对HTML5感兴趣的同学已经迫不及待的想要阅读了。与MARK PILGRIM之前所写的DIVE INTO PYTHON一样，这本书同样采用CC协议发布，同时你还可以使用Mercurial从版本库中检索出来的。

1

hg clone http://hg.diveintohtml5.org/ diveintohtml5

如果你机器上没有Mercurial，我这有一份已经打包好的供下载DiveIntoHtml5.tar.gz (452)。
-EOF-

Related posts:

Copyright © 2005~2011 | Permalink | 1 Comments | Close To U
订阅 Twitter 域名优惠码 Media Temple空间 主机/域名优惠码 )]]> http://ioio.name/dive-into-html5-archive.html/feed 1