Stylus：垂手可得实现 CSS 前缀和 reset CSS

Break free from CSS prefix hell!
摆脱CSS前缀地狱！

下载地址：AutoPrefixCSS

CSS3 每一个浏览器都有私有属性例如 -moz 表明firefox浏览器私有属性、-ms 表明IE浏览器私有属性、-webkit 表明chrome、safari私有属性，在 CSS3 标准还在没有定稿的时候，CSS3 中有不少属性都还处于实验性阶段，各个浏览器都针对暂行的规范草稿根据本身的理解作了 CSS3 新特性实现，但由于规范还没有成熟和定稿，某些描述的不清晰或是处理逻辑的不完整可能致使一些目前的实如今往后被修改。暂时使用带前缀的属性好比 -webkit-transform 的初衷，是为了之后即使 transform 的最终实现与目前不一样，你原来写的 -webkit-transform 仍是能够正常工做。因此浏览器如今开始愈来愈倾向于直接实现最终属性而抛弃前缀了。老的浏览器可能不支持 transform ，因此咱们一般为了兼容各个版本的浏览器，-webkit-transform 和 transform 两个属性都加上了。

• -webkit- (Google Chrome & Safari)

• -khtml- (Konqueror)

• -moz- (Mozilla Firefox)

• -ms- (Internet Explorer)

• -o- (Opéra)

• syntaxe normale

下载

$ bower install AutoPrefixCss #下载
$ bower info AutoPrefixCss #查看详情

初衷

网上有不少js实现的自动添加 CSS前缀的哦，例如autoprefixer 、prefixfree。

• stylus 的出现感受添加这种前缀不用太麻烦了。

• 只生成CSS，浏览器直接渲染CSS，不用经过js生成CSS在渲染。

使用必备条件

须要安装 node.js 和 stylus ，还得学会使用 stylus， stylus github， stylus教程

Usage

reset.styl

只须要将 reset.styl 到您的项目，而后引用 @import('reset.styl') ，而后在你所引用的.styl 中调用下面任何一个方法：

• global-reset() # 全部标签重置不包括HTML5新标签重置

• nested-reset() # 嵌套标签重置

• reset-font()

• reset-box-model()

• reset-body()

• reset-table() # 表格重置

• reset-table-cell() # 表格单格重置

• reset-html5() # HTML5新标签重置

例子：

@import('reset.styl')
global-reset()

自动添加CSS前缀

只须要将 vendor.styl 到您的项目，而后引用 @import('vendor.styl') ，而后你在你的 styl 文件中正常使用 stylus 语法就行了。效果以下例子：

opacity

adds opacity filter for IE

@import('vendor.styl')
body
    opacity:0.5

生成：

body {
  opacity: 0.5;
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5; /* old Mozilla */
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); /*old IE */
}

关注公众号