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

2020-04-21 08:03:39易采站长站整理

-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 //可跨域,标签页关掉就清空

w3c标准:http://www.w3.org/TR/webstorage/
ppk同学维护的兼容性列表:http://www.quirksmode.org/dom/html5.html#localstorage
MDC文档:https://developer.mozilla.org/en/DOM/Storage
MSDN文档:http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx

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

HTML5 Offline Application Cache

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

<html manifest="foo.manifest">

CACHE MANIFEST
index.html
style/default.css
images/logo.png

w3c标准:http://www.w3.org/TR/offline-webapps/#offline
MDC文档:https://developer.mozilla.org/en/Offline_resources_in_Firefox

支持:Firefox 3.5+

HTML5 Database Storage