罢这篇本来是我私下做的笔记,我特别喜欢在Evernote上做备忘的笔记,虽然上次看到漏屋老师的文章里说我现在的年龄才刚刚进入记忆力的巅峰期……但是我的自信心仍然屡受打击!比如跟别人讨论The Dark Knight里小丑在医院对检察官说了什么让他变成双面人,我一句对白都想不起来,还有big bang theory s2里penny玩age of conan时的人物名字是”Queen Penelope”,我看的时候印象很深,一个月后就连奥德赛都想不起来了。留份笔记总觉得心里踏实些……啊又跑题了
本文整理了一些最重要(或者说人气比较高罢)的新标准,虽然它们多数还只是w3c的草案,离Recommendation级别还早,却已经成为新一轮浏览器大战中备受追捧的明星,开发者社区里也涌现出大量相关的demo和API封装,有些已经进入生产环境(比如google在iphone上实现的gmail离线应用),其实我觉得如今的web领域里,从厂商私有技术转换成委员会标准再转换成通用技术产生杀手级应用的周期已经显著的加速了,是因为现在web application的需求太高了么…… UPDATE:刚才在solidot发软文的时候我突然想明白怎么表述这个问题:其实现在很多浏览器厂商同时也是基于浏览器的应用开发者和web标准的制定者,就好像修筑舞台的工程师同时也是舞台上的演员和舞蹈动作的导演一样,所以google, mozilla, apple们都在不遗余力的实现那些有利于开发web应用的技术标准,即时它们还是W3C Working Draft,相比之下IE team就比较缺乏动力,果然计划经济缺乏活力亚XD……
由于是源自笔记,对每个条目我只会列出称呼和语法特征,暂时没时间写详细的解释和可执行的示例,但是会给出相关的文档地址,除了列出已经支持该特性的浏览器,也会为不支持的浏览器提供替代/过渡的实现。
===================废话结束的分割线=======================
CSS3 Media queries
对整个外链css文件和部分css代码使用的媒体类型侦测,人气高的原因显然是因为移动设备……
<link media=“all and (orientation:portrait)” src="screen.css" type="text/css">
@media all and (min-color: 4) { ... }
w3c标准:http://www.w3.org/TR/css3-mediaqueries/
MDC文档:https://developer.mozilla.org/En/CSS/Media_queries
Opera文档:http://www.opera.com/docs/specs/css/
支持:Firefox 3.5+, Safari 3+, Opera 7+
CSS3 2D Transforms
css变形,有人用这个实现伪3d效果以及旋转效果的jquery插件
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
sprite.style['-webkit-transform'] = 'rotate(' + v + 'rad)';
w3c标准:http://www.w3.org/TR/css3-2d-transforms/
MDC文档:https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit博客的介绍: http://webkit.org/blog/130/css-transforms/
支持:Firefox 3.5+, Safari 3.1+
替代/过渡:IE5.5+ Matrix Filter http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx
CSS3 Transitions and CSS Animations
备受期待的css动画,webkit团队提出的草案,transition实现简单的属性渐变,animation定义更复杂的动画效果
transition-property: width;
transition-duration: 1s;
animation-name: 'diagonal-slide';
animation-duration: 5s;
animation-iteration-count: 10;
@keyframes 'diagonal-slide' {}
w3c标准:http://www.w3.org/TR/css3-transitions/
w3c标准:http://www.w3.org/TR/css3-animations/
webkit博客的介绍:http://webkit.org/blog/138/css-animation/
约翰同学的介绍:http://ejohn.org/blog/css-animations-and-javascript/
支持:Safari 3.1+
CSS3 Downloadable fonts
能在网页里嵌入任意字体是设计师的梦想……不过这里支持的也仅限truetype和opentype
@font-face {}
w3c标准:http://www.w3.org/TR/css3-fonts/#font-resources
MSDN文档:http://msdn.microsoft.com/en-us/library/ms530303(VS.85).aspx
MDC文档:https://developer.mozilla.org/en/CSS/@font-face
支持:Firefox 3.5+, Safari 3.1+, Opera 10.0+, IE4.0+
附赠:其他CSS3 property的兼容性
ppk同学维护的文档: http://www.quirksmode.org/css/contents.html
css3.info维护的文档:http://www.css3.info/modules/selector-compat/
一个测试页面:http://westciv.com/iphonetests/
HTML5 DOM Storage
简洁的持久存储,键值对的形式
window.localStorage
window.sessionStorage //可跨域,标签页关掉就清空