HTML5 CSS3新的WEB标准和浏览器支持

本文整理了一些最重要（或者说人气比较高罢）的新标准，虽然它们多数还只是w3c的草案，离Recommendation级别还早，却已经成为新一轮浏览器大战中备受追捧的明星，开发者社区里也涌现出大量相关的demo和API封装，有些已经进入生产环境（比如google在iphone上实现的gmail离线应用），其实我觉得如今的web领域里，从厂商私有技术转换成委员会标准再转换成通用技术产生杀手级应用的周期已经显著的加速了，是因为现在web application的需求太高了么…… UPDATE：刚才在solidot发软文的时候我突然想明白怎么表述这个问题：其实现在很多浏览器厂商同时也是基于浏览器的应用开发者和web标准的制定者，就好像修筑舞台的工程师同时也是舞台上的演员和舞蹈动作的导演一样，所以google, mozilla, apple们都在不遗余力的实现那些有利于开发web应用的技术标准，即时它们还是W3C Working Draft，相比之下IE team就比较缺乏动力，果然计划经济缺乏活力亚XD……

由于是源自笔记，对每个条目我只会列出称呼和语法特征，暂时没时间写详细的解释和可执行的示例，但是会给出相关的文档地址，除了列出已经支持该特性的浏览器，也会为不支持的浏览器提供替代/过渡的实现。

===================废话结束的分割线=======================

对整个外链css文件和部分css代码使用的媒体类型侦测，人气高的原因显然是因为移动设备……

<linkmedia=“alland (orientation:portrait)” src="screen.css"type="text/css">

@mediaalland (min-color: 4) { ... }

w3c标准：
MDC文档：https://developer.mozilla.org/En/CSS/Media_queries
Opera文档：

支持：Firefox 3.5+, Safari 3+, Opera 7+

css变形，有人用这个实现伪3d效果以及旋转效果的jquery插件

-moz-transform: rotate(-45deg) skew(15deg, 15deg);

sprite.style['-webkit-transform'] = 'rotate(' + v + 'rad)';

w3c标准：
MDC文档：https://developer.mozilla.org/En/CSS/CSS_transform_functions
webkit博客的介绍:

支持：Firefox 3.5+, Safari 3.1+
替代/过渡：IE5.5+ Matrix Filter (VS.85).aspx

备受期待的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标准：
w3c标准：
webkit博客的介绍：
约翰同学的介绍：

支持：Safari 3.1+

能在网页里嵌入任意字体是设计师的梦想……不过这里支持的也仅限truetype和opentype

@font-face{}

w3c标准：#font-resources
MSDN文档：(VS.85).aspx
MDC文档：https://developer.mozilla.org/en/CSS/@font-face

支持：Firefox 3.5+, Safari 3.1+, Opera 10.0+, IE4.0+

ppk同学维护的文档:
css3.info维护的文档：
一个测试页面：

简洁的持久存储，键值对的形式

window.localStorage

window.sessionStorage //可跨域，标签页关掉就清空

w3c标准：
ppk同学维护的兼容性列表：#localstorage
MDC文档：https://developer.mozilla.org/en/DOM/Storage
MSDN文档：(VS.85).aspx

支持：Firefox 3.5+, Safari 4.0+, IE 8.0+

用一个manifest文件缓存静态资源（图片,css, js之类）在离线状态下使用，不是结构化数据

<htmlmanifest="foo.manifest">

CACHE MANIFEST

index.html

style/default.css

images/logo.png

w3c标准：#offline
MDC文档：https://developer.mozilla.org/en/Offline_resources_in_Firefox

支持：Firefox 3.5+

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!