您所在的位置:开发 > Web > DIV+CSS > 揭秘HTML 5和CSS3 Web实现飞跃的踏板(2)

揭秘HTML 5和CSS3 Web实现飞跃的踏板(2)

2010-03-22 08:56 佚名 中国建站 字号:T | T
一键收藏,随时查看,分享好友!

互联网的发展总是在不断地催生新技术的产生,而HTML 5和CSS3是最近一直被讨论的热门话题,对于每个互联网开发者尤其是前端开发者而言,都充满了好奇与渴望。

AD:

HTML 5的Javascript API,HTML 5在Javascript上面新增了哪些API呢?

Video/Audio: HTML 5为Video和Audio提供了API来让开发者控制他们自己的用户界面,如可以播放或暂停媒体内容。

Canvas: Canvas是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。Canvas是一个神奇的东西,它给我的第一感觉就像是在用Photoshop一样,它的每一个方法跟Photoshop 是那么地相似,通过canvas.getContext(’2d’)就可以得到这个canvas的API,你可以通过fillStyle设置其填充颜色或是通过strokeStyle设置其描边颜色,甚至它画路径的操作跟Photoshop的钢笔操作更是不谋而合。Canvas在很多网站都已经有应用,如Firefox的实时下载状态统计,甚至还可以用canvas来编写Web Game。

Drag&Drop: 在指示设备的视觉媒体中,”Drag”的操作就是鼠标按下(mousedown)并伴随着鼠标移动(mousemove)的事件,而”Drop”则是鼠标释放时触发的事件。在Drag&Drop里定义了DataEvent和DataTransfer接口,同时当拖拽操作发生时会触发如 dragstart, dragenter, dragleave, drop, dragend等事件。

Web Workers: 让Javascript多线程,可以在后台做很多工作而不会阻断当前的浏览器操作。

Geolocation: 地理位置定位,运行navigator.geolocation.getCurrentPosition(success,error)这个方法时浏览器会提示是否要共享你的地理位置,如果选择共享,则会回调success函数,success函数有一个参数是position对象,这个position对象有一个coords对象,coords对象包含了很多地理位置信息如latitude(维度)和longitude(经度),这样就可以知道你的具体位置了,这个功能在一些手机如Iphone上已经有广泛的应用了。

Application Cache: 这是HTML5对于离线应用的支持,通过在html元素上加一个属性manifest,浏览器会提示你是否要将数据缓存到客户端,如果用户选择了允许,则会按照指定的manifest文件列表缓存需要的文件,当你的网络不可用时,你还是可以使用这个应用的。对于离线应用,Google也开发了Google Gears浏览器扩展,不过最后Google转投HTML5可能也是看到了HTML5存储和离线应用的这种优势。

Storage: Webkit已经实现了database storage,你可以像后端操作数据库一样查询数据并执行一些操作。还有一种存储是键值对存储,如sessionStorage和localStorage,可以通过setItem和getItem来存储与获取值,相对于Cookie的存储来说,存储的容量要大很多。

X-Document Messaging: 浏览器因为安全和隐私的原因,阻止了不同域之间文档的通信,虽然这是一个安全限制,但是对于那些没有危害的不同域的文档通信带来了很多问题,但是HTML 5可以实现这种跨文档通信,让我们可以不用管源域是来自哪里,同时可以防止脚本攻击。

CSS3对于我们Web开发者来说不只是新奇的技术,更重要的是这些全新概念的web应用给我们带来更多无限的可能性,也极大地提高了我们的开发效率。我们将不必再依赖图片或者Javascript 去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。

CSS3在选择器上面的支持利用属性选择器我们可以根据属性值的开头或结尾很容易选择某个元素,利用兄弟选择器可以选择同级兄弟结点或紧邻下一个结点的元素,利用伪类选择器可以选择某一类元素,CSS3在选择器上的丰富支持让我们可以灵活的控制样式,而不必为了选择某些元素给他们加上如”odd”或”even”这样的类名。

CSS3在样式上的支持有一个调查说开发者最期待CSS3的特性是什么,最后票数最多的是“圆角”,不错,圆角这个功能可以给我们这些前端工程师省去很多时间和精力去切图拼凑一个圆角。CSS3还支持阴影,盒阴影以及文本阴影,渐变,之前你可能是通过IE的滤镜看到过,其实CSS3实现起来更加方便。@font-face可以自定义字体,如果用传统的方式,VD把一个带有特殊文字的设计图给你让你来实现的话你可能会把它做成一个图片,而通过CSS3用@font-face就可以了。

CSS3对于连续文本换行也新增了一个属性word-wrap,你可以设置其为normal(不换行)或break-word(换行),这解决了连续英文字符出现页面错位的问题,也不需要后端去截取这个连续字符。使用CSS3你还可以给边框加背景,这在iphone上也有应用的例子。CSS3在背景上支持背景调整大小,如当你用一张大图要做一个小的元素背景时可以通过background-size来调整背景图的大小来适应这个元素。

CSS3支持opacity, rgba和hsl/a, opacity和rgba的区别是opacity设置的透明对其内容也会产生影响,而rgba只对你应用的元素产生影响。CSS3在布局上对于盒模型提供了支持,可以设置box-sizing为content-box或border-box,应用为content-box就是正常的模式,而应用为border-box和IE5.5的盒模型很相似,即元素的宽度包括border和padding,这个在布局上可能会比较方便,不用去管到底这个元素会占用多大的宽度,而用content-box还需要手动计算一下这个元素实际占用的宽度。

CSS3对于动画的支持CSS3支持的动画类型有:transform(变换)、transition(过渡)和animation(动画)。你可以对特定的属性设置transition,transiton和animation的区别不大,animation的动画是自己定义的,面向的更多的是脚本开发者,往往更加复杂。

为了使用大部分CSS3特性,我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在,大部分浏览器只支持部分CSS3属性。最常见的私有属性是用于Webkit核心浏览器的(比如, Safari), 它们以-webkit-开始,以及Gecko核心的浏览器(比如, Firefox),以-moz-开始,还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展(目前只有IE8支持-ms-前缀)。

那我们在开发中该如何去用CSS3呢?我觉得首先是遵循一个优雅降级的原则,比如前面谈到的圆角,我们可以针对Firefox和Safari等这些支持圆角的浏览器中应用CSS圆角,而那些不支持CSS圆角的浏览器则显示为直角。其次就是对于不支持CSS3的浏览器可以使用Javascript来实现,如CSS3任何元素支持:hover伪类,我们就可以对只支持链接:hover的IE6用JS来实现。最后就是在向用户或老板推广新技术的同时也要关注他们的目标与可行性,不能为了技术而技术。

【编辑推荐】

  1. 检测浏览器是否支持CSS3的方法
  2. HTML5标准最新技术预览
  3. HTML 5的使命与承诺
  4. 基于JavaScript的相关CSS技术概览
  5. CSS 3中的炫目新功能抢先预览
【责任编辑:王晓东 TEL:(010)68476606】

内容导航



分享到:

热点职位

更多>>

热点专题

更多>>

读书

框架设计(第2版)CLR Via C#
作为深受编程人员爱戴和尊敬的编程专家,微软.NET开发团队的顾问,本书作者Jeffrey Richter针对开发各种应用程序(如Web Form、W

51CTO旗下网站

领先的IT技术网站 51CTO 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i 51CTO学院