標籤: CSS

[Notes] Something you must know when fighting with IE7

Image Credit

全世界 Browsers 的使用率 (July 2012 ~ July 2013)

最近剛好有一些實戰機會可以和 IE7 來奮鬥，身為 FED 卻一直 skip 掉 IE7 好像不太好，有種沒有實戰過的感覺 xD … 現在想要把一些小細節記下來，希望能幫到想要和 IE7 奮戰的隊友們 xDD

δ 前情提要，如果是要解 IE6 的話 … 我只能請你自求多福。不過至少你能先叫做這個決定的豬腦去看一下微軟官方做的網站 IE6 Countdown，如果他發現自己做錯事的話，說不定問題就迎刃而解了呢 hahah。

奮戰流程：

  1. 如果你的作業系統不是 Windows 的話 （就算是 Windows 也是可以），那真的要先感謝一下佛心微軟放出來的 modern.IE ，因為你可以在上面找到各個作業系統上，各個虛擬化平台上內建好各個 IE 版本的虛擬硬碟。你就不用只為了測 IE 再來個什麼雙系統、三系統了，掛個 VirtualBox 就可以省下很多空間還有時間。（ 因為我是用 128GB 的 SSD，所以空間有限，我個人的作法是把虛擬硬碟全部丟去行動硬碟上面，跑的很順也省下很多空間，可以參考一下）
  2. 在 fight with IE7 之前，先把戰力放在 Modern browsers。我特別去網路上找有關 browser 市佔率的各種資料，而資料整體上都是呈現出如本文一開始那張長條圖一樣的分佈。所以切記，時間就是金錢，特別是如果整個團隊就只有你這位 FED 的話，真的要先把事情都搞定後，再來打 Boss 呀。
  3. 終於要打 Boss 怪了，FED 們都知道（只有你家的 Boss 不知道） IE7 最強的攻擊技就是「完全沒有 Developer Tool」，這招真的強到讓人完全沒有還擊能力，因為通常 IE7 最大的問題就是 Layout 的不一致，尤其是對 IE7 完全沒有經驗的人來說特別如此，所以總是會很頻繁的手動調整 Layout。不過我找了一陣子後發現其實微軟有開發自己的 Developer Tool 給 IE7，只是並沒有內建在 IE7 裡面，而是需要自己手動下載來安裝，所以切記一定要先把你的 IE7 裝上 Developer Tool 呀。
  4. Let’s fight !!
  5. 特別開一個 IE7 fix，然後透過 Conditional Comments 來引入相關的 CSS / JS 檔案，這樣可以讓你原本的程式碼抽離於這些 hack 之外（我真的認為這些都是 dirty hack），所以不要 pollute 太多東西進去原本的 CSS / JS，這會造成維護上的困難也沒必要。
  6. 如果你使用到一些 CSS3 的東西像是 border-radius 或是 box-shadow 之類的屬性，記得搭配 CSS3Pie 來服用，通常可以解掉 90% 以上的 CSS3 問題，雖然好用但是要記得一些小事，就是有一些屬性只支援 shorthand version，請自行查閱一下 document 別寫得太開心到最後 Pie 看不懂就囧了。
  7. 通常 IE7 Layout 最大的問題是發生在 hasLayout 這個屬性上，根據 Sitepoint 這篇文章的解釋， 可以了解到這個是 IE 賦與元素的一個內部屬性，它的用處是「讓該元素本身及其孫元素（descendant）具有處理定位 （Positioning）及大小（sizing）的能力，而不是依賴於它的祖元素們（ancestors）」。而該文有列出幾個元素像是 img … 等。那為什麼會和這個屬性有關係？因為除了 IE 預設清單內的元素們具有這個屬性外，其他的元素是沒有這個屬性的，文章內有提到幾個常見的現象，像是「元素部分內容存在但是部分卻消失」或是「畫面只出現一半」。而要從 CSS 讓元素強制具有這個屬性有許多做法，最常見的做法就是設定一個 zoom: 1; 就可以了，這就是為什麼我們很常看到很多 3rd party libraries 在 CSS 中會加入這個東西的原因。不過這背後還有很多細節及一些奇特情況，可以參考微軟的這篇。
  8. 如果你有使用 font-awesome 的話，請記得加入 font-awesome-ie7.min.css 的 hack，你會發現他都是在利用 zoom: 1; 來解 hasLayout，還有加入 innerHTML workaround 來解 IE7 不支援 pseudo element selector 的問題 xDDD
  9. 如果你有使用 bootstrap 的話（我是用 2.3），我發現如果用組合式 grid 來達成滿版的話（我這邊碰到的情況是 span6 + span6 或是 span4 + span8），整個 Layout 就會炸掉，所以要特別手動調整 width ，這邊要特別留意一下。
  10. 利用 zoom: 1; 及 *display: inline; 來解原本被我們套用 display: inline-block; 的元素們（在 Modern browsers 我們用太習慣了，所以這個問題很多）。
  11. 如果你有用 <ul><li> 的話，不要用 list-style-image 來客製化他的樣式，因為如果有 position 上的需求，並沒有 CSS 可以直接控制這個值，可能會調到死，取而代之的你可以改用 background-image 及 background-position 搭配 padding 來手動 position，效果佳。
  12. … 未完待續

以上是和 IE7 奮鬥過的一些心路歷程，希望能幫到一些人，未來如果還有什麼有趣的狀況也會更新在這個清單內，Rock 😛

[Notes] CSS Cross-Country

Image Credit

最近為了讓自己保持繼續學習的動機，所以就很衝動的花了 25 USD 買了一個月份的 Code School 資格，而首當其衝的課程就是身為 Front-End 不能不了解的 CSS。

雖然不是說完全不了解 CSS，但是我很想知道如果是付費教學的話，它會怎麼樣「教」CSS 這種很難以捉摸的東西？（你說 CSS 簡單它還真的可以很簡單，但是在這著重視覺特效還有正在經歷瀏覽器大戰的世界，CSS 還是真的可以他媽的難。）

最後証實沒有白花錢，因為這個教材也直接切入很多 CSS 技巧的核心，都是我在外面亂撞好幾十次得到的慘痛教訓，除此之外也有一些我沒有留意過的細節，看完整個教材加上 Challenge 的練習之後整個就是對 CSS 的掌握更多了一點，以下就是我由 Level 1 ~ Level 8 覺得很重要的筆記：

  1. Non-Conflicting properties will be combined
  2. 浮動的元素如果超過了 parent 的寬就會被擠到下一個「可能的」位置，這個時候如果元素之間的高度不同，就會影響被擺放的位置（可以想像一下 Pinterest 的 Layout ，他不是依照由左到右的順序擺放格子，而是會去尋找「上一層高度最小」的位置去插入來達到不規則的瀑布流，它的演算法下次再來開新文章分享。）
  3. 同時有多個 float : left | right; 的元素「會依 DOM 的先後順序」來決定誰在最左或最右邊
  4. 如果子元素有 float 的話，要記得在 parent 設定 clearfix （參考 Bootstrap 很有名的 clearfix 方法，我在面試 T 公司的時候就是用這個方法來解決 floating 的問題）
  5. CSS 的 Specificity 計算（ 0, 0, 0, 0 → inline style, # of ID selectors, # of class selectors, # of element selectors ）
  6. 不要用 !important 讓未來的自己後悔 …
  7. Box Model 還有 width / height 的計算（因為和我們直覺想的完全不一樣，所以要留意。）
  8. 父元素 postion : relative 搭配子元素 position : absolute 是一個超重要也常用的排版技巧
  9. Z-index 要發揮效用的前提是該元素一定要被 positioned
  10. CSS property shorthands
  11. Block element / Inline element / Inline-Block element 的差異
  12. 置中 Block element 的方法 – margin : 0 auto;
  13. 置中 Inline / Inline-Block element 的方法 – text-align : center;
  14. Collapsing margins
  15. Content 用的 images 和 裝飾 Layout 用的 images 要用不同的形式呈現，前者建議是以 inline images 的形式，而後者建議是用 background images 的形式
  16. Image Crop with overflow hack
  17. 增加「說明用的文字」在要被 image 替換的元素上，利用 text-indent : -99999px 的 hack
  18. CSS Sprites 好處：減少和 Server 的溝通次數、避免 :hover 等事件出現閃圖的情況
  19. 善用 Pseudo Class （有些真的很強大 … ）

以上，特別筆記一下！

[Note] Useful tools for F2E

這篇用來整理一下與 F2E 相關的 tool，以供日後參考用（持續更新）：

Javscript | CSS Compressor（壓縮器）

  • YUI compressor

  • 好用的 YUI compressor ，支援 JS | CSS 的壓縮，使用說明、載點

Obfuscator（混淆器）

Test（測試）

  • Qunit

  • Javascript 單元測試的 Framework，適用於 jQuery plugin，使用說明、載點

[閒聊] Just changed the appearance

It’s being a while for me to change the appearance of my blog. Because I like minimalism themes, I keep finding anything about this kind of skin. Not only because I can train my ability to modify CSS but like it. Finally, I got a satisfying one called ‘The Journalist template’ made by Lucian E. Marin just now.

Now, it’s time for me to tune my blog :P~ But I need to sleep first because it’s almost 3 am now … See you guys next time :]

[JS] jQuery.css() problem when using Firefox

最近在公司開發JS的程式的時候，很多時候都會利用到快速又方便的jQuery Library，而這次就很剛好的遇到了Bug，花了很多時間才解出來，以下為測試環境（FF 3.59 , 3.6 ）：

假設我現在有一個DOM的元素，是一個img，當我設定其CSS為「display:none;」時，在FF上就會沒辦法利用
「jQuery.css(‘left’) or jQuery.css(‘top’)」來把這個值取出。就算你已經設定好left或是top的值，都只會抓到0px。

範例程式碼：
http://gist.github.com/518809.js?file=gistfile1.html

所以為了要解決在元素被hidden時不能取值的問題，就只能用比較髒的手段來抓到這個值，就是利用「visibility」。

什麼是visibility？它和display不同的地方在於說，display:none會直接不顯示這個元素並不佔用空間；而visibilty:hidden則是不顯示這個元素但是卻仍存在並佔用空間。

所以這個很Tricky的方法可以參考下面：
http://gist.github.com/518819.js?file=gistfile1.html

這樣就可以成功的取到left的值（top亦同）而不會影響UI的部分了，算是這次遇到最無言的Bug吧。

下次見囉。

δ 2011/01/20： 又開始繼續維護這個專案，其實對 FF 3.6.8 來說（不確定其他版本是否也會有相同問題），就算是最新版本的 jQuery 1.4.* 都無法從 display:none 的元素中利用 .css() 來取得特定的屬性值，因此我利用 jsfiddle 寫了一組完整測試，包含 display:none 及 visibility:hidden 元素的各種可能，請自己用你的瀏覽器來測試一下吧。