cssSandpaper-兼容IE的CSS3 JavaScript库
一、引言 – 感慨
随着时间一天天的过去，各个浏览器对CSS3的支持也越来越成熟，CSS3的时代的到来已经成为了必然，一切只是时间问题，一切要看IE浏览器。国 内对于CSS3的学习与谈论等似乎过于平静的，静的就像一潭死水一样。考虑到IE浏览器为王的现状，这一切也很好理解。每当看到国外对于CSS3与 HTML5争论研究如火如荼的时候，我心中总是有一丝哀叹，叹息我们又一次的落后于他人。让我想到生物产业（我的大学专业），国家是想通过生物振兴国家前 沿科技，在国际生物领域有一席之地的，但是几十年过去了，美国已经成功合成人造生命，我们呢？我想到了我出国的或是保研的同学们，在中国现在这个大环境 下，要想取得举世瞩目的生物学成就实在是任重道远。我现在就有一丝无奈，想尽自己的力为国内的前端发展做一点贡献，但是，每每看到当前现状，一丝杯水车 薪，海中虾米之感油然而生。然而，我还会继续，岂因音小不呐喊，声弱不疾呼。
我前不久介绍了一个让IE6/IE7/IE8支持常见CSS3属性的方法的文章“让IE6/IE7/IE8浏览器支持CSS3属性”，那里是使用的htc文件+VML语言实现的，轻量实用。而本文即将介绍的CSS3 JavaScript库cssSandpaper采用的则是不同的原理使IE浏览器支持CSS3属性，说穿了很简单，就是IE滤镜。下面就开始详细介绍：
二、cssSandpaper概述
cssSandpaper的主要作者是：
@zoltandulac，原文介绍地址为：http://www.useragentman.com/…ipt-library/
cssSandpaper是一个CSS3的JavaScript库，使用特定的CSS书写规则可以让页面元素支持CSS3的一些特性，例如，旋转， 拉伸，盒阴影，渐变等效果，包括IE浏览器。由于cssSandpaper实现IE下的CSS3效果全部都是使用的filter滤镜实现的，所以其中就有 不少局限性，例如IE中没有支持圆角的滤镜，所有cssSandpaper无法实现圆角效果，同样的原因，IE浏览器下box-shadow没有模糊过 渡，不支持径向渐变等。然而，还是可以实现不少炫酷的效果的。
一旦调用了cssSandpaper CSS3 JavaScript库文件后，实现CSS3效果的调用也比较特别，需要使用特定的前缀样式写法，而且很重要的是cssSandpaper支持 JavaScript，也就是说，可以通过js设置，动态改变各个浏览器（包括IE）CSS3表现，这往往可以用来实现一些精湛的UI表现。进入下一节。
三、cssSandpaper下精湛UI效果展示
1. cssSandpaper下兼容性三维立方体效果所谓一图甚千言，看下面的效果截图，截自IE6浏览器：
您可以狠狠地点击这里：cssSandpaper下三维立方体效果demo
此效果主要是使用的CSS3中的transform属性实现的，这个下面会详细介绍。
2. cssSandpaper下时钟效果效果如下截图，截自IE6浏览器，图中的秒钟是会走动的哦~~
您可以狠狠地点击这里：cssSandpaper下时钟效果demo
此效果主要是应用的了CSS3 animate动画效果实现的。
三、如何使用cssSandpaper库
1. 下载js文件 原始完整源文件(en)：cssSandpaper.1.1a-beta1.zip纯粹js文件打包(已处理)：cssSandpaper.zxx.js.zip(22.8K)
注意：原网站源文件的js有个小小问题，就是额外调用了一个差不多10K的EventHelpers.js，而这个js是用来对浏览器事件做优化统 一处理的，实际上是可以省略的。于是我对cssSandpaper.js做了点简单的修改，使其脱离EventHelpers.js也能正常使用，于是， 只要调用三个js文件就可以了，而原来的需要调用4个js文件。所以，我是建议您下载处理后的“纯粹的js打包”。
2. 调用JavaScript文件调用的代码如下所示：
<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/cssQuery-p.js"></script> <script type="text/javascript" src="http://www.zhangxinxu.com/study/js/jcoglan.com/sylvester.js"></script> <script type="text/javascript" src="http://www.zhangxinxu.com/study/js/css3Helpers.js"></script>
3. 使用
对CSS3有所了解的同行应该知道，许多属性的应用需要有特定的私有前缀，例如Firefox下的-moz-box-shadow，或是-moz-
border-radius等，这里，您一旦应用了cssSandpaper库，则CSS文件中无需针对不同的浏览器书写不同的前缀了，因为库文件已经帮
你解决了。您所需要使用的是针对cssSandpaper库的特殊的前缀，那就是-sand-，因此，您可以在CSS中设置诸如下面的一些属性：
-sand-transform: rotate(-30deg) skew(-30deg, 0deg); background-image: -sand-gradient(linear, center top, center bottom, from(#EBE5DE), to(#ea9b3d) ); -sand-box-shadow: 15px 15px #ffcccc;
cssSandpaper库还有的一点强大之处在于其可以使用js进行兼容性的设置，拿transform属性举例，按照我们现在对DOM元素CSS属性设置的理解，设置一个元素的transform属性代码应该类似下面的：
node.style.transform = "rotate(25deg)";
这在写法上是没错的，但是考虑到目前IE浏览器对其不支持，所以其通用性有限。在cssSandpaper库环境下，有了兼容性的替代方法，参见如下的代码：
cssSandpaper.setTransform(node, "rotate(25deg) scale(2, 2) skew(20deg, 20deg)"); cssSandpaper.setOpacity(node, 0.3); cssSandpaper.setBoxShadow(node, "10px 10px 5px #ffcccc"); cssSandpaper.setGradient(node, "-sand-gradient(linear, center top, center bottom, from(#0000ff), to(#ff0000));")
关于此更为实际的应用，您可以参见下面的实例属性展示。
四、属性之-sand-transform
功能作用就是允许对HTML元素进行旋转，伸缩以及斜切。语法如下：
#container {
-sand-transform: <function-list>;
}
此处的<function-list>表示方法列表，支持的方法见下表：
| 方法 | 作用 |
|---|---|
rotate(angle)
【cssSandpaper-兼容IE的CSS3 JavaScript库】相关文章 1. cssSandpaper-兼容IE的CSS3 JavaScript库 2. 5个免费的JavaScript库和CSS框架的CDN加速 3. TogetherJS:一个免费开源的JavaScript库 4. JavaScript大师Nicholas C. Zakas谈TypeScript 5. 一个轻量级的JavaScript库：Reactor.js 6. Facebook开源JavaScript库：React 10. 新技术再次提升了Chrome的JavaScript载入效率 本文来源：https://www.51html5.com/a823.html ﹝cssSandpaper-兼容IE的CSS3 JavaScript库﹞相关内容
「cssSandpaper-兼容IE的CSS3 JavaScript库」相关专题其它栏目也许您还喜欢 |