http://www.semantic-ui-cn.com/
Semantic UI是完全語義化的前端界面開發框架,semantic-ui是html/css框架的新貴,是繼bootstrap和foundation之後的又一css神器。semantic-ui一出現在github上就受到火熱的關注,一直在關注排行榜前列。semantic-ui最大的特點:充分利用CSS3動畫特效,簡潔實用漂亮的樣式這些都是其最受歡迎的原因之一。
扁平化設計
隨著iOS 7的發佈,扁平化設計(flat design)被更多人所熟識。什麼是扁平化設計呢?在實際當中,扁平化設計一詞所指的是拋棄那些已經流行多年的漸變、陰影、高光等擬真視覺效果,從而打造出一種看上去更“平”的界面。扁平風格的一個優勢就在於它可以更加簡單直接的將信息和事物的工作方式展示出來,減少認知障礙的產生。
在主流的css框架bootstrap中,開始是不支持扁平化設計的(bootstrap2),但在最新的bootstrap3中,幾乎所有的組件都改用了扁平化的設計,但由於設計的不好,3的版本被很多原使用bootstarp的開發所詬病。
而semantic-ui是天生就是扁平化的設計,讓人用起來更加覺得時尚、簡潔。
響應式設計
什麼是響應式設計?響應式Web設計(Responsive Web design)的理念是,頁面的設計與開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和佈局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad,我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等,以適應不同設備;換句話說,頁面應該有能力去自動響應用戶的設備環境。這樣,我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
semantic-ui兼容性
支持的瀏覽器如下
Last 2 Versions FF, Chrome, IE (aka 10+)
Safari 6
IE 9+ (Browser prefix only)
Android 4
Blackberry 10
前幾天在semantic-ui的github項目裡提了個問題,問semantic-ui是否支持IE6~8,下面有個老外來了句:Support IE6? Are you creazy?呵呵,看來在國外還是不鳥IE的偏多。
在這裡吐槽一下IE,IE可以算是瀏覽器界的一朵奇葩…不對,奇葩還有些褒意在裡面,應該是瀏覽器界的一個毒瘤,一直阻礙著前端框架的發展,好在現在很多前端框架都不care IE了,比如angularjs,bootstrap等就直接只支持IE8+(不包括IE8),就連鼎鼎大名的Jquery也宣佈從2.x版本開始不支持IE6~8,看來IE的淘汰是在所難免了哈。
不過IE9以後情況還是有所好轉,《Javascript高級程序設計》的作者 Nicholas C. Zakas也讓大家對IE9以後的版本可以另眼相看。但不管怎麼樣,IE6~8的各種bug和不兼容讓web前端開發舉步維艱是個不爭的事實,該淘汰的時候就應該淘汰。最好的做法讓用戶升級瀏覽器或改用chrome,不要在兼容性上面浪費精力。
閱讀更多 KeepWriting 的文章