网站导航网学 原创论文 原创专题 网站设计 最新系统 原创论文 论文降重 发表论文 论文发表 UI设计定制 论文答辩PPT格式排版 期刊发表 论文专题
返回网学首页
网学原创论文
最新论文 推荐专题 热门论文 论文专题
当前位置: 网学 > 设计资源 > DIVCSS技术 > 正文

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

论文降重修改服务、格式排版等 获取论文 论文降重及排版 论文发表 相关服务

  罢这篇本来是我私下做的笔记,我特别喜欢在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 //可跨域,标签页关掉就清空

  w3c标准:http://www.w3.org/TR/webstorage/

设为首页 | 加入收藏 | 网学首页 | 原创论文 | 计算机原创
版权所有 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2020 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号 常年法律顾问:王律师