CSS Frameworks

CSS Framework List 

• device compatibility
• browser compatibility
• compiler support
• license.

http://usablica.github.io/front-end-frameworks/compare.html

Wikipedia

Focus on grid system comparison

http://en.wikipedia.org/wiki/CSS_frameworks

iOS Web 畫面閃爍問題 (CSS 3)

在iOS (iPhone 4s/ iPad 2/iPod Touch) 上測試 Mobile Web的時候出現了閃爍問題
和Team member 花了一段時間發現一個很詭異的問題
狀況
1. 父節點(DIV)因為要做Transition使用了
transform: translate3d(…)
2. 畫面處理完成後，觸動事件將子節點(DIV)的CSS改變
left : *px

就在這個更改子節點的瞬間 iOS 的畫面一定會閃爍一下 測試過了 iPad / iP4s / iPod Touch 都有這問題 但是Android 2.x 4.x 都沒有…

處理方式

原本以為是iOS 的 webkit 在處理特定 position 的 left 造成子節點重畫的問題，
後來想想覺得這 也太基本了吧 不太可能，經過嘗試以及搜尋，發現很多人都有類似問題。

像是StackOverflow 這篇 還有 這篇 他是改 CSS top 導致發生神秘的閃爍事件…

最後使用動態增加translatde3d 並且 reset 的 爛招 解法   

後來將以下的 css 指定給子節點 問題就解決了

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

補充
回家後看到jsconsole/jsbin的作者 Remy Sharp 大大的影片



造成我畫面閃動的原因 應該是跟iOS的硬體加速有關

故需要Reset translate3d …..



真。他x的  上一次遇到這種神秘的問題 是面對高級瀏覽器 IE 6 …………… 



References
http://stackoverflow.com/questions/tagged/translate3d

Responsive Media Query Quick Reference

Just a reminder which helps me doing responsive design's Media Query.

@media (max-width: 767px)

@media (max-width: 480px) 

@media (min-width: 768px) and (max-width: 979px)

@media (min-width: 980px)

@media (min-width: 1200px)

注意 ：上面的順序是有意義的 更改順序會導致CSS被蓋掉