iT邦幫忙

4

30天掌握Sass語法 - (14)透過Compass CSS3 Mixin輕鬆撰寫CSS3靜態樣式

在早期如果我們必須要撰寫一個最基礎的圓弧效果時,
是必須要寫很多瀏覽器前綴詞的,譬如這樣:

.box{
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}

如果要修改數值時,則就必須改五次的數值,
相對來說重工率也跟著提升,
更別說同時要撰寫圓弧、陰影、背景漸層這類最基礎的效果了。
光寫一個樣式就必須寫十幾行,
以至於有些網頁設計師寧願切一張圖片當作背景,
但也因此提升了網頁請求數量,流量也相對變高許多,
這個問題在當時也造成設計師在設計CSS上的困擾。

直到Sass/Compass發跡以後,
撰寫CSS3樣式真的輕鬆許多了,
在早期如果我們必須要撰寫一個最基礎的圓弧效果時,
是必須要寫很多瀏覽器前綴詞的,譬如這樣:

.box{
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
}

如果要修改數值時,則就必須改五次的數值,
相對來說重工率也跟著提升,
更別說同時要撰寫圓弧、陰影、背景漸層這類最基礎的效果了。
光寫一個樣式就必須寫十幾行,
以至於有些網頁設計師寧願切一張圖片當作背景,
但也因此提升了網頁請求數量,流量也相對變高許多,
這個問題在當時也造成設計師在設計CSS上的困擾。

直到Sass/Compass發跡以後,
撰寫CSS3樣式真的輕鬆許多了,
他的程式碼只要短短一行就可以展示出上面的效果出來:

@import compass/css3
.box{
  +border-radius(100%)
}

首先要先載入Compass的CSS3 mixin後,
使用+border-radius來呼叫該mixin,
再把數值寫進去就會自動載入所有前綴支援語法,

兩年前我決定要學習Sass/Compass時,
也是因為這神奇的CSS3 Mixin讓我決心要好好的學習,
因為Sass最主要的工作就是讓你可以專心的撰寫樣式上面,
並同時減少過度重工的機會。

我現在比較常用的樣式則是

//圓弧效果
.box{
  +border-radius(100%)
}
//區塊陰影
.box{
  +box-shadow(30px 30px 30px #000)
}
//背景漸層
.box{
  +background(linear-gradient(white,black))
}

這三種是我比較有在實際應用的,
因為這幾種靜態效果,
就算IE不支援,也不會過於破壞整體版型樣式。

如果你希望IE6~9也可以支援CSS3的話,
那一定要來試試看CSS3 PIE,
http://css3pie.com/

使用他的話,
上述三種所提到的靜態樣式功能也可以很友善地去做兼容性,
更神的是Compass也支援!
所以從官網下載該檔案後,並放到CSS的資料夾,
就可以開始來撰寫嘍。
程式碼只要寫:

@import compass/css3
@import compass/css3/pie
.box
  +pie
  +border-radius(100%)

釋出來的CSS就會變成:

.box {
  behavior: url('/css/PIE.htc')
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;

Sass寫了+pie的用意,
主要就是為了引入這一行來去做IE兼容性→behavior: url('/css/PIE.htc')

使用CSS3 PIE時,
也請不要太過度使用他,
因為他是透過載入HTC檔來進行CSS3兼容化,
所以你如果太多地方都用了CSS3靜態效果,
也會導致你的網頁處理速度過慢,
進而降低客戶瀏覽意願。

有些網頁設計師會不使用CSS3 PIE的效果,但在用IE網頁瀏覽上也不影響其流暢性,至多是稍微醜了一些。這個行為也稱為「優雅降級與漸進增強」,使用較好的瀏覽器就可以體驗更好的網頁設計功能。
但也有部分的人因為甲方不認同這觀念,希望所有瀏覽器都長得一致,那CSS3 PIE就會是一個不錯的替代方案,
一些經驗談提供給各位參考,另也附上操作流程影片提供大家參考與學習:D


1 則留言

0
marsnow
iT邦新手 5 級 ‧ 2015-02-15 15:52:16

我是用fire.app的compass 1.0,看到官網寫到
0.13.alpha.8 (10/21/2013)
Breaking Change: The CSS3PIE module has been removed.
代表不再支援pie,所以還有其他方法可以實現pie嗎?

我要留言

立即登入留言