50個超級有用的CSS開發工具

SmashingMagazine今天給我們帶來了一篇非常全面的匯總，介紹了50個超級有用的CSS開發工具，其中相當多的小工具都是讓我覺得非常有幫助的，甚至有了做幾個中文版的念頭，雖然C2C(Copy to China)的習慣並不是那麼好，但是有的時候真的覺得在每日奔波，與CPI抗爭的局勢下，要有點創新的主意真的很難。

閑言少敘，讓我們開始驚豔之旅，要先說明一下，”Firebug” 和 “WebDeveloper” 兩位同學將缺席本次頒獎活動，因為他們實在太出名了。

CSS and Typography

Hyphenator Hyphenator.js解決了西方語言斷詞的問題，給行尾換行的單詞加上了“-”連字號。相信很多程式師都被QA報過這樣的defect，新建一條資料，有個column是afsafdsafsadfsafsafafsafasfsa，然後說頁面被撐破。總是被我無情的Won’t Fix。實在不行了word-break一把。中文不會遇到這個問題。有興趣的你去看一下。

CSS Type Set 貌似被牆了，有興趣的翻出去看看

Typechart 快速流覽，比較各種不同的文字排版樣式，（如果可以通過上傳css檔來快速預覽，倒也是個不錯的idea）

CSS-Typoset Matrix and code generator

快速生成最常用的一些Tag的字體大小設定，由Px轉換到Em尺寸上，可以比較完美的做到文字縮放。

body { font: normal 0,8764em/1.5em Arial,Verdana,sans-serif; }
html>body { font-size: 14px; }
p { margin: 1.5em  0; font-size: 1em; line-height: 1.5em; }
h1 { margin: 1.05em 0; font-size: 1.4286em; line-height: 1.05em; }
h2 { margin: 1.1667em 0; font-size: 1.2857em; line-height: 1.1667em; }
h3 { margin: 1.3125em 0; font-size: 1.1429em; line-height: 1.3125em; }
h4 { margin: 1.5em 0; font-size: 1em; line-height: 1.5em; }
h5 { margin: 1.75em 0; font-size: 0.8571em; line-height: 1.75em; }
h6 { margin: 1.75em 0; font-size: 0.8571em; line-height: 1.75em; }
類似這樣

Em Calculator 樓上那個的圖文加強版

真的是很好很強大，不單是覺得挺有用的，整個App的UI設計也非常讓人滿意，值得學習。

Facelift Image Replacement (FLIR) 快速創建圖片替換的代碼，FLIR技術，讀作Fleer。

Vertical rhythm calculator 好多計算器，不得不說，歐美的設計師們更加注重這些細節。

typeface.js 總是感歎網頁上文字能夠使用的字體很有限，羡慕在PS或者Flash中可以隨意挑選。typeface.js能幫你實現內嵌字體技術。

看到上面也許你會興奮，但是對於老外的52個字母來說，這是很夢幻的效果，對於中文來說，沒戲了，把幾千個漢字打包到js中實在太可怕了，無論是可用性還是性能都不會讓人接受。不過適當的將一些常用字做進去，可能會有不錯的效果，好像是perl的build腳本，上次打包過一次，敗了。

CSS Online Tools

PSD2CSS Online 線上的PSD檔到CSS的服務，沒用過，也不想用，都有這個了，民工吃什麼。

Conditional-CSS 根據你上傳的CSS檔，檢查其中一些css hack，用條件注釋來保證流覽器相容性。

說實話這是維護代碼的噩夢開端。

MoreCSS CSS的js擴展，利用js來實現很多CSS中沒有的特性，類似於那個著名的IE7.js，不過這種工具也算是雙刃劍，怎麼用看自己了。

px to em  速查表，我看到em都汗了。。

CSS Frame Generator 請看我以前的介紹文章 http://www.1x3x.net/blog/web-design/2008/04/css-frame-generator.html

CSS Redundancy Checker  檢查你的CSS檔中那些是冗餘的代碼

CleverCSS

DSL編碼風格的css擴展，又一個類似於MoreCSS的js類庫，能讓你用非常時髦的DSL風格去編寫樣式檔，我覺得更酷的是去看看這個js本身。

WordOff 被牆

Postable 幫你快速的escape一下內容

Kotatsu

Table HTML生成器，個人感覺沒什麼用，而且生成的TAG還是大寫的，不喜歡。

htmldevelopertools

這是一個挺有意思的東西，太晚了，沒有細看，說明是說可以線上更新CSS檔，但是依賴於IISserver，本身也是用.NET寫的，有待進一步更新。

Deploy 這是一個開源的WebApp，能夠一鍵幫你生成包含項目名稱，DocType，各種JS類庫的熱部署方案。真的很是誘人的一個服務。不過好像也被牆了，不過大家不用擔心，元旦前，我來提供一個牆內開花版。

CSS Evolve  通過對一個網站的各種屬性重新設置，來看看各種不同的效果。不支援中文，效果沒有說的那麼大。不過這種測試方式可以借鑒。

Lorem 2

Lorem可能只有專業的設計師才會接觸到的名詞，看一下wiki上的解釋

Lorem ipsum是指一篇常用於排版設計領域的拉丁文文章，主要的目的為測試文章或文字在不同字型、版型下看起來的效果。

Lorem ipsum從西元15世紀開始就被廣泛地使用在西方的印刷、設計領域中，在電腦排版盛行之後，這段被傳統印刷產業使用幾百年的無意義文字又再度流行。由於這段文字以「Lorem ipsum」起頭，並且常被用於標題的測試中，所以一般稱為Lorem ipsum，簡稱為Lipsum。

SelectORacle CSS3 selector 英文 西班牙文轉換

JS Bin  一個非常酷的線上JS編輯器，能夠動態查看結果，調試代碼，還能直接分享url供其他人查看。算是比較典型的web2.0 App了。

CSS Text Wrapper  線上小工具，能夠創建很漂亮的文字圍繞圖形。

Writing Tests Against CSS  CSS開發中，自動化Mock測試是件比較困難的事情，作者提供了一個不錯的解決方案，是python的測試腳本，有興趣的同學可以看一下。

CSS Sprite Generator  現代網站開發調優經驗中，排在前面的很重要一條就是盡可能的減少頁面的Request數量，（唉，我的首頁連接數就挺大的，不是最理想，好像負載不大），CSS sprite技術因此變得流行，如果不明白的，看看網易郵箱的登陸頁上的圖片就知道了。

Sky CSS Tool  線上編寫CSS樣式，類似於Dreamweaver的視覺化操作，不喜歡手寫代碼的可以試試看。

CSS Tidy Online  非常酷的CSS代碼排版壓縮工具，我以前也推介過。一定要加到收藏哦。

Web-Based Tools for Optimizing, Formatting and Checking CSS  一堆好用的CSS線上工具，這文章還真是環中環。

Grid Designer 2.4  隨著類似於960grid這樣的CSS框架的誕生，Grid排版設計愈發成為一種非常流行的設計方式，這個線上工具的創意非常好，如果能夠再人性化一點就完美了。

Yahoo’s Secret Text-Sprite Generator  雅虎的神秘API，能夠提供Text-Sprite生成，當然僅支援西方字元。可憐的雙位元組文字啊。

Replace CSS Colors – Editor 替換你的CSS檔中的顏色設置，如果你Vi玩的轉一點，估計就不需要了。

The Box Office  很棒的圖文圍繞效果代碼生成，雖然為了實現這個效果，會帶來一堆挺醜漏的代碼，建議用js修繕一下。

MinifyMe  css js 檔案壓縮器，不同於之前的線上工具，這是一個flash。

cssdoc  程式師可能更熟悉這個概念， 類似於Javadoc，能夠更好的幫助你匯總小結你手上那些可能已經很長的CSS檔。

CSS Menu Generator  幫你生成很多非常漂亮的CSS功能表，效果如下

sheetUp – DOM Stylesheet Library  CSS的JS擴展，和之前介紹的幾款各有千秋，值得一看

CSS SuperScrub  幫你做CSS代碼的codereview，（偷偷說一句，我的大老闆就喜歡走到你後面說，我要codereview，不改當年的碼農本色啊）

DrawAble Markup Language  挺酷的線上視覺化HTML編輯器，試試看，我倒是對他的製作本身有點興趣。

Handy Kits For Designing With CSS

Regex Patterns for Single Line CSS

神器Textmate的css格式化bundle，無福使用這等神器。

21 Excellent Dreamweaver Extensions for CSS Productivity and Standards

相信還有很多朋友喜歡使用Dreamweaver的，那這21款Dreamweaver外掛程式你不容錯過。

Graph Paper 太棒了，這是真是不亞于米字簿的好東西啊，方格子現代版。

Starter Kit For Developers (PSD)  讓你快速開始你的工作，是個不錯的東西。

CSSHttpRequest  好吧，奇技淫巧，通過CSS請求來避開同源檢測限制，慎用。