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.1×3x.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还是大写的，不喜欢。
阅读全文…
最新评论