safari 4 新特性

2009-06-26 10:19:00 特性,Safari 4 DesignTimes网页教程 网友评论

在WWDC 2009上,Apple发布了正式版的Safari 4浏览器,正式版的safari 4放弃了仿Chrome的tab方式,还原至3.0版本的界面。据称,WWDC上,Serlet 严重的BS了一下微软的IE8浏览器,并称Safari的JavaScript引擎是目前世界上最快的,根据他提供的测试数据,Chrome 2的速度是IE8的5.3倍,而Safari4的速度则是IE8的7.8倍

这些数据大多是官方的噱头,我们就先不管啦,看看Safari4会对我们前端开发有哪些影响吧:

HTML 5

支持Audio和video标签。

CSS

Safari4对CSS的支持有较多改进,具体如下:

ZOOM

Safari 4开始支持zoom属性。这一点儿的用法和效果和IE浏览器一直。不同的是,如果是缩放,Safari会缩小到浏览器支持的最小字体,而IE会直接缩小到设置的大小。比如:

.zoomTest{font-size:12px; zoom:0.1}

Safari只会缩小至9px字体大小,而IE会缩小至1.2px(肉眼已经看不清了)。

-webkit-animation

有一系列子属性组成:

  • -webkit-animation-name 为动画指定一个名称
  • -webkit-animation-duration 动画持续时间
  • -webkit-animation-timing-function 动画帧切换方式,也就是动画效果,大概有ease、linear、ease-in、ease-out、ease-in-out这几种。
  • -webkit-animation-delay 定义动画开始时间
  • -webkit-animation-iteration-count 动画重复次数
  • -webkit-animation-direction 动画方向,有两个属性:normal,正向播放; alternate,交替方向,第偶数次正向播放,第奇数次反向播放。
-webkit-mask

CSS遮罩/蒙板效果

  • -webkit-mask-attachment 两个值:fixed和scroll;
  • -webkit-mask-clip 元素边框的剪切效果 ;
  • -webkit-mask-position 用法类似background-position属性。
  • -webkit-mask-origin 规定-webkit-mask-position属性的锚记。有border、content、和padding三个属性。
  • -webkit-mask-image 元素的蒙板图片,值为图片路径;
  • -webkit-mask-repeat 重复性设定,
  • -webkit-mask-composite 混合样式。默认为border,也就是背景延伸到border区域。还可以设置为padding。
其它改进

Safari4同时增加或增强了其它一些CSS属性支持,比如,background-position开始支持动画效果,这里就不再赘述。

可以看出,Safari新增的这些CSS属性,并非W3C标准中的内容,不过这些webkit的私有属性,的确可以让我们开发出更好的网络应用。

WAI-ARIA 角色

想必对WAI-ARIA了解的人不是很多。WAI-ARIA即W3C Web Accessibility Initiative Accessible Rich Internet Applications,中文翻译为“无障碍富互联网应用程序”。同时W3C制定了WAI-ARIA角色标准。Google前不久宣布将大力支持WAI-ARIA,而且其Google reader的屏幕阅读功能即是通过WAI-ARIA实现的。目前,Firefox已经开始支持WAI-ARIA,IE8部分支持。Safari 4也开始支持WAI-ARIA角色。查看Safari 4对WAI-ARIA的支持情况>>

值得注意的是,WAI-ARIA貌似仅支持div和span标签,为了配合WAI-ARIA,Safari同时添加了HTML的一些支持属性,比如aria-checked/aria-level/aria-valuemax/aria-valuemin等。

下载safari下载Safari

PS:这个下载的按钮,是来自于Safari下载的官方页面,细心的童鞋会发现,这个按钮的风格显然不是apple的风格了,更像Firefox下载页面的那个绿色的按钮的风格。

原文:http://www.qianduan.net/safari-4-new-features.html

TAGS:safa
昵称: 验证码: 验证码
  • 平面
  • 地产
  • 室内
  • 包装
  • 标志
  • 摄影
您当前的位置:首页 > 设计教程 > 网页教程

related links / 相关文章

    无相关信息

writer's articles / 作者其他文章

  1. firefox3.5将带来的新特性
  2. CSS3系列教程
  3. 快速写出较好CSS的5种方法
  4. 用于WebKit的CSS诀窍
  5. 必须知道的10个不常用HTML标签
  6. 条件注释使用指南
  7. 网站设计中的面包屑
  8. javascript修正12个浏览器兼容问题
  9. 网站设计趋势:立体盒子
  10. 不要使用@import

update / 栏目更新

  1. IE下img多余5像素空白解决方法
  2. 用doctype激活浏览器模式
  3. safari 4 新特性
  4. 全方位清理浮动
  5. 分享我们的select控件设计过程
  6. 九宫格基本布局
  7. :hover在IE6下的问题
  8. 如何在 IE 中使用 HTML5 元素
  9. 为您解读CSS优先级
  10. 牢不可破的九宫格布局

designers show / 设计秀

  1. 32个基于网格布局的网页欣赏
  2. 80款大背景图片的网站设计欣赏
  3. 32个基于网格布局的网页欣赏
  4. 形意达设计作品――长城纪念品
  5. 50个极具启发性的创意音乐海报
  6. 32个基于网格布局的网页欣赏
  7. 25个运用3D效果的FLASH网站欣赏
  8. 38个水平布局网站设计
  9. 25个运用3D效果的FLASH网站欣赏
  10. 38个水平布局网站设计

design edu / 设计教程