首页 > 其它内容 > SASS下CSS3属性无需再写厂商前缀
2015
04-26

SASS下CSS3属性无需再写厂商前缀

CSS3的新属性被越来越多的浏览器新版本所采纳时,设计师们兴奋极了,因为他们可以用新的CSS属性实现以前需要非常愚蠢的样式技巧才能实现的任务。令人异常激动的是,现在用几行非常简单的CSS就能实现边框圆角,且不用在意随之而来的厂商前缀。厂商前缀就是浏览器在CSS特性前加的-webkit和-moz等前缀,用于对试验中的CSS特性进行支持。举个最简单的例子,要给一个<div>元素设置5px的边框圆角,你必须要这么写CSS:

.rounded {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

一般来说,使用Compass的CSS3模块中的边框圆角混合器可以免去你这部分的重复工作。首先在你的Sass文件中引入CSS3模块,然后引入混合器:

@import “compass/css3″;
.rounded {
@include border-radius(5px);
}

看一下生成的CSS:

.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}

这样做,不仅避免了重复输入-webkit和-moz,同时也支持了其他的一般常用的厂商命名空间,令你设计的网页可以在更多浏览器中保持良好设计。尽管这一点点重复看上去并不是那么恐怖,可如果你仅仅是想让第四个角是圆角呢?对此,火狐浏览器的开发者们并未就最好的实现方式与业界其他人士达成一致,而惯用的实现方式如下:

.rounded-one {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}

这个地方,Compass有更好的实现。你可以通过border-corner-radius混合器来指定单个边框圆角:

.rounded-one {
@include border-corner-radius(top, left, 5px);
}

生成的CSS如下,火狐的方式也包含在内:

.rounded-one {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-o-border-top-left-radius: 5px;
-ms-border-top-left-radius: 5px;
border-top-left-radius: 5px;
}

以上只是Compass中有关CSS3的冰山一角的一角的一角。第9章将更深入地接触所有能节省时间的特性。

最后编辑:
作者:管理员
这个作者貌似有点懒,什么都没有留下。