Day-2 // 10件你不知道css能做的事...

第二篇了....


文章出處是：
http://www.realcombiz.com/2014/05/css-techniques-developers-should-know.html

這次看的文章呢是從fb前端粉絲團看來的文章(其實多半都是從FB看來滴)
雖然是英文但基本的還是認得幾個
起碼css 方面的都看得懂
不過想叫我整篇翻譯應該是不太可能(英文程度低落...設計師的通病..)

首先先簡介一下這10個功能(搭配著原著文章看可能比較對照得起來)

1是告訴邊框屬性可以分別設定，顏色、樣式、寬度等等
2是說css3多了一些背景的屬性還有box model(什麼是box model)
3是說css name可以用符合命名(這好瞎~~哈哈但我喜翻)
4是說邊框的寬可以用thin, medium, 和 thick(細、中等、粗)關鍵字命名，話說平常都是用單位(px,pt,em...etc)
5是說可以替下滑線設定樣式、顏色
6是可以設定Pointers events(老實說我還真的不知道有這個)長知識1 長知識2
7是可以設定邊框為圖片
8可設定table td的隱藏與出現
9就很普通了，就是用關鍵字設定顏色：yello,white之類的
10就很不錯了，重點在說明使用css3來作選單滑入滑出的效果，一般我們做菜單都用jQuery來slideDown跟slideUp，這個則是純css而且還吃GPU圖形加速，手機觀看就會很滑順


說到底...其實很多都是css3的功能，而且能實戰的不多(應該說也沒什麼必要)
2與10應該是收穫最大的點，6也不錯，但還不知道能應用在哪裡

我發覺我有寫跟沒寫一樣，好沒營養
不過這也只是想記錄我自己看完之後吸收的程度
起碼我看完之後在寫下這篇
能加強自己的印象
而且還能因為內容不懂，自己在去google而發覺的額外知識
如果各位不小心有看到我的文章
強烈建議各位去看原文出處喔

但想交換心得也是可以的喔~~

以後應該還是有機會寫一篇實作與比較詳解的文吧吧吧吧...(小聲)

使用PIE讓IE7~8支援CSS 3 屬性

以目前來說...IE就算進步到IE10，但他下面的孩子們789還是不支援，當我需要使用漸層(或CSS3其他的語法)到IE的作法時，就會碰到那不支援，這不支援的...

於是網上找了一些解決方式，以下介紹一個我用了還蠻方便的作法(當然不是我寫的=  =)
不想看的可以直接看這裡：http://css3pie.com/about/

PIE (progressive internet explorer)

目前 CSS3 PIE 的支援語法
PIE currently has full or partial support for the following CSS3 features:

border-radius: 圓角
box-shadow: 區塊陰影
border-image
multiple background images
linear-gradient as background image: 漸層顏色
詳見: About PIE
註: CSS3 PIE 是使用 .htc 的 hack 方式
使用 CSS3 PIE 官方文件
Getting Started – CSS3 PIE: CSS3 decorations for IE


如何使用：
1.下載PIE
2.將你在ie上需要css3地方加入
"-pie-background: linear-gradient(#EEFF99, #66EE33);
 behavior: url(/PIE.htc);"
例如：
.boxGradient{
  border-radius: 2px;
  /*讓IE支援漸層的語法*/
-pie-background: linear-gradient(#fff, #e1e0dd);
behavior: url(pie/PIE.htc);
}

3.執行IE觀賞美麗的CSS3漸層

-------------------------------------------------------------------------
後記：
還真的有用!!
但IE7、8、9呈現出來的感覺還是有點不一樣，7跟8比較相近，9的陰影呈現跟圓角反而怪怪，大概有1px的差距


網路上的怪招真的很多........

參考網址：
http://css3pie.com/documentation/getting-started/
http://blog.longwin.com.tw/2010/07/favorite-css3-pie-2010/

//2012/6/5 補充
ie如果使用了PIE之後呢，在包覆這個樣式的外層DIV，就不能在設定background屬性，這樣會影響PIE的背景顯示，意思就是說，如果你有依靠PIE設定div的背景色，那包覆此div的外層div就不能另外設定背景色，裡面設定PIE的div會直接吃到外層的div的 background屬性。


解決方式：在pie外層加上position:relative與z-index:1樣式即可解決(目前是用此解決，如後續遇到問題在繼續補充)
參考pie3 Known Issues http://css3pie.com/documentation/known-issues/#relative-paths

//2012/7/4 補充
ie7還是出現了一大塊底色...這邊我就真的投降了...只好寫ie hack 放棄PIE了...希望有高手解答..
環境是php，作了一個a連結的按鈕讓user滑過時出現陰影的效果...

CSS3‧漸層

CSS3的漸層語法，在各瀏覽器的語法略有不同，分別說明如下：


Chrome / Safari 4+:


/*由上到下*/
background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));


/*由左至右*/
background:-webkit-gradient(linear, left top, right top, from(#00475E), to(#007276));


/*在Chrome 10 之後語法可簡化為:*/
background:webkit-linear-gradient(top, #00475E, #007276);


Firefox 3.6+
/*由上到下*/
background:-moz-linear-gradient(top, #00475E, #007276);


/*由左至右*/
background:-moz-linear-gradient(left, #00475E, #007276);


IE6~IE8
基本語法 
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276'); 


參數說明 
上下漸層GradientType=0 
左右漸層GradientType=1 
漸層起始色彩startcolorstr=# 
漸層結束色彩endcolorstr=# 




跨瀏覽器綜合語法
body {
        /*預設背景顏色, 讓不支援漸層的瀏覽器能呈現基本底色*/
        background: #278092;
        /******跨瀏覽器的底色漸層CSS語法 (由上到下)********/ 
        /*Chrome的語法*/
        background:-webkit-gradient(linear, left top, left bottom, from(#00475E), to(#007276));
        /*FireFox的語法*/
        background: -moz-linear-gradient(top, #00475E, #007276);
        
        /*IE6~IE8的語法*/
        filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00475E', endColorstr='#007276');
        /* Opera 11.10+ */
        background: -o-linear-gradient(top, #00475E, #007276);
        margin: 0px;
}
--------------------------------------------------------------
後記：
上述語法精我實際測試後，Opera沒有安裝..= =和除了ie的效果不知道為什麼出不來外
其他皆能呈現我要的效果測試OK


引用網站：
http://mepopedia.com/forum/read.php?844,17157,17157#.E4.B8.89.E3.80.81.E8.B7.A8.E7.80.8F.E8.A6.BD.E5.99.A8.E7.B6.9C.E5.90.88.E8.AA.9E.E6.B3.95
參考資料: 
CSS Tricks: http://css-tricks.com/examples/CSS3Gradient/ 
CSS3 Maker: http://www.css3maker.com/