Day4 //....(心虛)Fire.app搭配Source Map前端開發！

哎喲尾呀...好久不見的發文（心虛...）

說好的一天一文章沒想到第三天就破功了...只好硬改標題為第四篇了...

我知道再怎麼找理由也是於事無補...

但如果硬要說的話...（硬要講）

就是案子突然變趕變多＋人懶散＋運動好累＋中秋好忙

於是相隔兩個禮拜多後，我終於又要來寫了！

再怎麼樣也要硬著頭皮寫完三十篇！

不過我想應該也是少少人看，但這只是自我期許啊阿啊啊～～


好了，與其懺悔不如趕快寫這一篇...

今天的文章有點不太一樣
因為不是網路上得知的

這是我去參加FEA.TW 桃園前端講座時，發現有些很好用的前端技術

可以幫助我在前端開發節省時間
於是我回家實驗看看
但事實上已經過了快一個月了吧....
還好他們還有影音檔可以提供我回想...

基本上有三個出處

一併附上

自從學會Sass / Compass後，考試都考100分！[ 影音檔 ] [ 投影片 ] 講者：洧杰
但以上內容對我來說的重點在於

利用fire.app sass 搭配chrome sourcemap做前端開發

於是上網找了一些文章

請觀看[ 此篇 ]

因為作者寫的比我還詳細，還附教學，所以建議大家去那邊看文章
這邊也有一個步驟一個步驟的英文教學[ 此篇 ]
但英文那邊不是使用fire.app來做
所以只是提供參考～

而我服用並實際使用的情況下

簡直是神器啊！

雖然作者說是還未成熟的功能

但目前對我來說，已經解決了我修改完還要複製貼上的時間了

變相的縮短我的開發時間

很多時候，只要多了解一些新工具，就能使開發時間縮短

並且還可以擴展自己的視野

網路實在是好神奇啊

但如果大家要使用

請記得先購買fire.app工具

這個也是我用了好幾年

是個非常超值的工具

另外介紹

FEA.TW 桃園前端 這個協會

起先是一些很熱血然後住桃園的人自發性發起的聚會
原本是小小的團體，想照顧不在臺北但非常想獲得新知或技術的桃園人
雖然我在臺北，但我還是會衝下去參加

現在這個協會會辦一些講座，也有一些工作坊

我猜想他們是想要規模化這個模式，把聚會做大

於是朝協會方向邁進

很多新知訊息或技術都可以從這邊獲得

也有facebook粉絲團

想精進的同學們，可以多多關注，因為現在關注的人不多，但我覺得他們很努力

想替他們宣傳一下

晚一天的中秋節快樂！

Day3 // 學習CSS版面配置

(Day3了，很好！(握拳！)

文章出處：
http://zh-tw.learnlayout.com/

很高興由前端大神 Will保哥 翻譯的一篇文章~~
這篇對於初入html,css開始寫網頁的設計師們很有幫助(以前我自學時都沒有...)
而且還追加說明了很多css3新奇的功能
簡直就是替現在作網頁設計的人解決了好多問題(box model阿...column阿...flex box阿...這些新的屬性在過去都沒有，都需要"經驗"才能獲知解決方案...)

總而言之，針對這篇文我想補充幾點~
依過去我的經驗作幾點分享(好像我是個老人似的....)

Display&Flaot

我幾乎都是使用float來作版面配置，而不使用display來作的原因有二
因為display有跨瀏覽器標準的議題(IE大魔王)，容易產生誤差，變的需要那邊寫一點hack這邊寫一點hack

而容易解決的方案就是float，瀏覽器沒什麼相關誤差，完美呈現(只要你對flaot很熟悉)！相關diaply議題可以參考這裡或這裡還有我曾經寫過的文章
當然也不是沒解，只是會有點傷腦筋，除非我必須要使用瀑布流排版或是我很確定不支援哪些瀏覽器時我才會使用display，或有時使用display只是用來做某一區塊內的layout才作
也許有人會說可以使用一些css framework來作...熟不知...有時候客戶出的版面可不是只是用framework就能解決的....

總之，我自認為沒有切不出的版，什麼視覺版面來我絕對切得出來，用不用framework我倒是沒什麼意見，好用就用囉

再來float在排版時都要去clear float，但只要你能"確定父層元素"的高，然後float內容不超過高度，你就可以不用清除囉，不過這牽扯到html結構上的排版，不太好解釋....不過也有人說那不是通則，所以也不是多好的撇步...

Clear

一般clear用來清除浮動的效果，而網路上很多神人寫出了clearfix hack來完美清除，而且我也用了好多年，方法就是使用偽元素:after加一個clear:both，其他還必須加content:"";，但我最近改用overfloat:hidden了(也可以auto)，而且效果一樣，語法可是節省很多

不過依據我的經驗，並不是完美可解，因為如果你需要在一個有高度數值的div內容設定overfloat:hidden的話，就會爆爆爆...不過我忘了我那時遇到的問題是什麼了(好不負責)，那時候就會使用clearfix，依照判斷在去取捨

Box model

上一篇文章有稍微提到過(真的只是提到而已)
文章中，他提醒你使用margin跟padding的問題
而我依據自己經驗的解釋來提供理解
假如要設定500x500正方形的div，還需要有上下左右20px的padding內距
那就可以這樣算：500的div寬=500-20(左邊距)+20(右邊距)=設定寬460
高度同理
會影響到box model的還有border-width，等於會直接加上你設定的寬度
例如你上面減掉padding後得到了460寬，但你想要在加上10px的邊框，那麼你就要在將你的寬度減掉20，才會等於你心目中有內距、有邊框，然後總共500寬的div
但!!是!! 你只要設定了box-size:border-box，以上問題一勞永逸，但還是有跨瀏覽器議題...

Margin

margin有時候會影響到父元素，尤其是在往上頂的時候，會連父元素一起頂，我自己也還沒找到原因，通常我就不設定子元素的margin-top，而是去設定父元素的padding-top
我後來想想我自己做的時候，要頂的時候都是margin-bottom而已，還真的比較少用top
另外margin可以設定負值(padding不可設定負值)，很多人利用他來作lightbox的垂直左右居中(前提是必須設定寬高)
千萬不用使用負值來排版，看過幾個案例，真的很慘...

Flexbox

這個是我認為最棒的屬性喔喔喔喔喔~~~
如果以後都能支援他多棒阿，頁面一下子就咻咻休切完囉~~~
期待他能夠普及化，目前還是有跨瀏覽器的議題存在....
根本就完勝float跟display(排版而言)

(其實我覺得那篇文章根本不是初學者阿~~)

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而發覺的額外知識
如果各位不小心有看到我的文章
強烈建議各位去看原文出處喔

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

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

自我挑戰每天閱讀一篇文章與寫一篇文章30天之Day 1

咳...

我開始發現我的網頁的分頁數目越來越多…
很多都是想要先開起來閱讀的技術文章與很前衛的網路工具
每天都心想說哪天要來好好的讀一下或是來玩一下新工具
(但為什麼每天都有資訊可以開~~)

BUT!

這就是分頁越來越多的原因！
因為我根本沒仔細專心看啊！
而且大多都先去申請一次後根本沒再繼續用
或是存到書籤去了！！！(好沒效率)
後來就不了了之
難道真的要等到哪天chrome死當掉然後分頁全部掛點無法回復才有辦法將分頁一頁一頁關閉

於是

今天不知哪根筋斷了，想要做這樣的挑戰…

可能又變孤身一人所以時間多了吧…

總之！！

Day1 開始！！

今日有閱讀到的資訊是：如何使用sass控管好你的z-index圖層

文章出處：
http://blog.mukispace.com/sass-z-index-management/
http://www.smashingmagazine.com/2014/06/12/sassy-z-index-management-for-complex-layouts/
http://css-tricks.com/handling-z-index/

方法大概有三種
基本上就採用一種就好
看自己方便

我自己今天實驗是採用了Muki的文章方式，應該是跟第二篇文章一樣
控管起來實在不錯
而且調整方便
自己的經驗是的確有時候會接到一些需要跑一堆動畫的案子
這時就會有一堆物件飛來咻去
如果沒有使用這個方法
那誰前誰後就會調到懶趴痛
以前都是看到誰壓到誰才去調整
實在是太北爛了~~
所以有個主控的方法就是一件很重要的事囉


自己這邊就沒有再多做語法的解釋跟實做了
看以上的文章也許會比我寫得更清楚了解


以上。

希望我挑戰期間分頁數目可以越來越少....

display:inline-block 會多出空白間距的完美解法

.inline-block{
  ul{ /*解法*/
letter-spacing: -4px;/*根據不同字體字號或許需要做一定的調整*/
word-spacing: -4px;
font-size: 0;}
li{ padding:5px 8px;
background:#eee;
/*解法*/
font-size: 12px;
  letter-spacing: normal;
   word-spacing: normal;
  display:inline-block;
  *display: inline;
  zoom:1;
  }
}
P.S以上是SCSS寫法

參考來源：http://www.w3cplus.com/css/fighting-the-space-between-inline-block-elements


以上經過跨瀏覽器的測試，完美的支援chrome、safari、firefox、ie789，感動吶！！
來源經過了很多測試，但多數是對html標籤動手腳，請看最後一則範例，才是真正完美解決inline-block間距的解法

（話說我好懶得安裝SyntaxHighlighter.....所以讓大家看這麼直白的css真是慚愧...說是慚愧但還是懶得裝.....）

EDM設計請注意，Outlook 2007無法支援部分語法

Outllook 2007基於商業考量，Outlook 2007的網頁信件解析軟體不再是IE，而是Word2007，因此寄出的網頁形式信件必須符合Word2007規格，而非IE。

而Word 2007對於HTML的支援較少，造成許多語法是無法在outlook 2007上被正確顯現，在發包設計時要多加注意。

————————————————————————-

Word 2007 不支援以下這幾個網頁常用的 CSS 屬性：
#background-attachment
#background-image
#background-position
#background-repeat
#clear
#display
#float
#list-style-image
#list-style-position
另外，也不支援以下項目：
1. 不要使用 ＜DIV＞標籤 , 因為定位一定會出錯
2. 不要使用＜style＞＜／style＞, 如果一定要使用,
請網頁設計時將一個點就要讓它變成兩個點
例如: .test｛font-size:10pt ｝ 要改成 ..test｛font-size:10pt ｝
3. 如果要用背景圖 background語法 只有＜body＞標籤支援,其他如＜table＞＜TR＞＜TD＞
等其他標籤完全不支援background語法但支援bgcolor語法,所以如果要做背景圖或是某個
造型表格，請不要使用背景圖請直接切表格在配合使用 ＜img＞以及＜bgcolor＞這兩個語法
4.不支援Flash及Plugins
5.不支援列表清單替代圖示
6.不支援 Float 跟 Position (css裡面用來定位或是調整 Layout的語法)
7.不支援動態GIF
這個連結是 Microsoft 列出來 Outlook2007對Html的支援列表。
另外還有一個 validator, 可以測試所做出來的 Email template 是否支援 Office 2007

————————————————————————-

Outlook 2007 將採用 word 2007 取代原本的 Internet Explorer 來當做預設的 Html render 核心,
以下是一些對設計產業比較有影響的變革

No background images – Background images in divs and table cells are gone, meaning Mark’s image replacement technique is out the window.
Poor background color support – Give a div or table cell a background color, add some text to it and the background color displays fine. Nest another table or div inside though and the background color vanishes.
No support for float or position – Completely breaking any CSS based layouts right from the word go. Tables only.
Shocking box model support – Very poor support for padding and margin, and you thought IE5 was bad!
將不會有背景圖片 不管是 div, Table 裡的 Background, 將會不能使用
更差的背景顏色支援
將不支援 Float 跟 Position (css裡面用來定位或是調整 Layout的語法)
差勁的 Css 支援 (差勁的 Padding, Margin 定位, 差不多就像 IE5 對 Css 那樣差的支援度)

這個連結是 Microsoft 列出來 Outlook2007對Html的支援列表
還有一個 validator, 可以測試所做出來的 Email template 是否支援 Office 2007
其實看上列的縮圖可以輕易比較出同一個Html信件在 Outlook2000/ Outlook2007 下顯示的差別

基本上以M$ Outlook 75-80% 的市佔率, 這樣的做法已經改變了 Email 的遊戲規則, 雖然Office 2007去年11/30才發售
而使用者也有其它的WebMail Client可以選擇 (exp. Gmail, YahooMail, Hotmail….)
但是慢慢的, 這樣的變革還是會對Email行銷, 帶來一些影響

引用自http://blog.stormcrm.com:8080/it-knowledges/css-not-supported-in-outlook-2007/


--------------------------------------------------------------------------------------------
真是弱智outlook.....

用CSS判斷圖片的最大寬度後以適應區塊大小

當我需要設定一個圖片最小為120X120時
載入的圖片超過我設定的大小就判斷等比例縮放大小
以下為CSS設定

img {
      max-width:120px;//設定載入的圖片寬度最大為120
      height:inherit;//自適應高度(可以超過120，因為等比縮放，所以有可能寬縮放到120後高度高於120)
      width:expression(document.body.clientWidth>120?”120px”:”auto”);//圖片的判斷式，設定超過120就縮放
      overflow:hidden;//超過隱藏
}

以上適用ie7,ie9, ff, google chrome
唯獨ie8會有點小問題