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 */
}

關注公衆號