CSS3工具匯總
通常來說,CSS非常簡單。但是當瀏覽器廠商開始實現CSS3特性,問題開始變得有些復雜了。不難,只是有些復雜。這可能包括兩個方面:首先有些心得CSS3屬性(比如,transition、漸變、transform等)不是那么簡單,其次我們不得不使用瀏覽器廠商指定擴展。
直到你最喜歡用的IDE原生支持CSS3,你最好的伙伴將是CSS3生成器、手冊、參考指南以及基于JS的方案。這正是本文要推薦的,這里將收集能夠助你學習和使用CSS3的真正有用的工具。
生成器
- CSS3 Please!跨瀏覽器的CSS規則生成器,支持:border-radius、box-shadow、漸變(線性)、rgba色彩、transform (旋轉)、transition和@font-face。
- CSS3 生成器支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline.
- CSS3 Sandbox有一些列的CSS3生成器:線性漸變、放射漸變、文字陰影、盒陰影、Transforms和文字描邊。
- @font-face生成器來自于Font Squirrel的很好用的CSS3 @font-face 生成器。
- CSS3漸變生成器為Firefox和Webkit瀏覽器生成線性漸變。
- CSS 圓角生成用于Firefox、Webkit和標準CSS3語法的“border-radius”屬性。
- Webkit CSS3 生成器簡單的助你理解Webkit引入的CSS3特性。
- CSS3 學習工具動態為你的瀏覽器獲取私有前綴并檢測該屬性是否被它支持。
JavaScript方案
- Modernizr一個確實很有用的JavaScript庫,可以檢測HTML5/CSS3的原生支持,并為你提供一種維護良好控制級別的方法,不管瀏覽器的能力。如果你更喜歡使用MooTools,你可以使用MooModernizr (MooTools 版本的Modernizr)
- Sizzle – JavaScript 選擇器庫一個純Javascript選擇器引擎,被設計用來方便的插入到一個主庫中。Sizzle 實際上支持所有的CSS3 選擇器——它甚至包括一些很不常用的選擇器,比如忽略選擇器(escaped selectors )(”.foo\\+bar”)、Unicode 選擇器、以及在document序列中返回的結果。這也是jQuery使用的選擇器引擎。
- YUI 選擇器組件YUI CSS3 選擇器組件,提供一個收集、過濾和測試HTML元素的穩定的簡寫方法。
- ie7-js一個讓IE擁有兼容標準的瀏覽器一樣的行為的JavaScript庫。
- CSS3偽類選擇器模擬ie-css3.js 可使Internet Explorer識別CSS3 偽類選擇器并渲染任何使用它們定義的樣式規則。簡單滴在你的頁面中引入這個腳本,然后在你的樣式表中使用這些偽類選擇器,然后IE就可以使用了。
參考指南
- CSS 3.0參考手冊
騰訊ISD WebTeam制作的一個CHM格式的參考手冊,很全面,介紹+實例,推薦下載收藏; - 我什么時候能用CSS3CSS3、HTML5、SVG以及其它即將可用的頁面技術的瀏覽器兼容性列表;
- 瀏覽器支持清單使用Modernizr庫檢測你的瀏覽器支持的“高級”特性,包括CSS3特性和選擇器的支持。
- CSS3選擇器測試自動運行大量的判斷你的瀏覽器是否支持一些CSS選擇器的小測試;
- SelectORacle一個提供CSS2和CSS3選擇器介紹的在線工具。簡單的給它一些選擇器,他就會返回選擇器匹配的相關說明。
- CSS3手冊與快速指南提供當前CSS3規范的列表,列出屬性可用的值、常用的選擇器模式參考,以type/單位組織,選擇器類型參考和單位參考和信息(另有PDF 版本);
- CSS3偽類SitePoint的CSS參考的相關部分內容;
- CSS3 速查手冊CSS3屬性、選擇器類型以及可用的值的列表,PDF格式;
- CSS3色彩名稱 提供所有147種色彩的名字以及按照字母排序的值。
來自:http://www.alloyteam.com/2012/03/css3%E5%B7%A5%E5%85%B7%E6%B1%87%E6%80%BB/
本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!