接触css代码也有一段时间了,谈到最多的一般是css简化,如何简化css代码,保证css特效发挥到极致的同时让网页加载速度最快。近日微软向W3C万维网联盟提交了一个名为CSS Scrolling Snap Points(CSS网页平滑滚动)的网页标准提案。
该网页标准最早是基于IE10的API开发的,并在全新的IE11中作出了改进。该标准的设计主旨是为了让触控和键鼠设备的网页浏览体验更加平滑和 快速。开发者可以轻松利用这些API建立更出色的网页浏览体验,即便是有大量分页内容和照片的网页,人们也可以使用触摸屏、鼠标、触控板快速滚动浏览。
微软旗下门户MSN主页已经支持该技术标准。人们可以左右滑动来浏览当天的头条新闻。采用了CSS Scrolling Snap Points标准,IE利用同样的硬件加速平移技术开启了一个更棒的网页触控浏览体验。用户所期望的惯性平移和过度反弹让你觉得手指就连在了屏幕之上。此 外,用户全景浏览后浏览器会捕获与标题相近的内容。
非常难能可贵的是,这个新的网页标准仅需添加两行CSS代码(红色代码)而已,不像JavaScript那样需要添加几百行的代码,还可以保证在低端设备上的体验。
<style>
.photoGallery {
width: 500px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
/* Set up points to which scrolling will snap*/
-ms-scroll-snap-points-x: snapInterval(0px,100%);
/*Require that scrolling always end at a snap point */
-ms-scroll-snap-type: mandatory;
}
</style>
<div>
<img src=http://www.update8.com/Web/CSS/"img1.jpg">
<img src=http://www.update8.com/Web/CSS/"img2.jpg">
<img src=http://www.update8.com/Web/CSS/"img3.jpg">
<img src=http://www.update8.com/Web/CSS/"img4.jpg">
</div>
微软展示的网页标准代码
事实上,微软去年就向W3C联盟提交了一个Pointer Events标准,已经经过W3C审定为候选推荐标准。此后微软对该标准进行了改进,以更好的支持FireFox和Chrome浏览器。CSS Snap Points是继Pointer Events之后,微软另一种改进网页浏览体验的方式,它向我们提供了身临其境的网页体验。它们都非常完美地支持触控操作,并且使用输入方式也能获得很好 体验。当然这也是为了顺应互联网的发展,因为2014年将会是移动互联网蓬勃发展,百家争鸣的一年。