完整的CSS工具列表（转载）

[09/02] 完整的CSS工具列表（转载）

用户界面

• I Like Your Color

   

  输入URL然后它会抓出其中的颜色并用16进制表示。

• CSS Multi-element Rollover Generator

   

  使用CSS和一个图片创建出一个翻转按钮的样式。

• CSS Rounded Box Generator
• Ruthsarian Layouts

   

  6个CSS页面布局模板，包括颜色、标题等。

• Bluerobot Layout Reservoir

   

  2栏和3栏的CSS布局框架

• Glish CSS Layout techniques

   

  2、3、 4栏的CSS布局框架

• The Layout-o-matic

   

  输入页宽、栏数和padding，它会自动生成CSS和HTML的布局框架。

• Little Boxes

   

  w3cn.org上提供的那些布局模板

• Open Source Web Design

   

  各种免费的完整页面模板

• Web Builders’ Toolkit

   

  更多的模版资源

• Iconico Online CSS Scrollbar Color Changer
• List-u-Like

   

  一个CSS菜单生成器：轻松创建采用li并兼容各种浏览器的导航菜单。

• Nifty Corners: 无需图片的圆角矩形
• Round Corner Stone/Icon (rcsi) V1.0

   

  增强的圆角矩形

• Xylescope

   

  无需下载其他站点就能轻松分析其CSS代码。

• W3C Core Styles
• Checkliste zur Webseitengestaltung
• Testseite zur Zeilenbreite

易用性检查

• Accessibility Valet Demonstrator
• Bobby Online Service
• Cynthia Says
• OCAWA Web Accessibility Expert
• Torquemada

   

  使用工具对页面进行一个完整的易用性分析方法测试，以快速辨别页面中哪些部分存在错误。

• UI Site check

   

  一个站点检查工具，只需要输入你的网址，便可以列出几十个验证器和易用性工具。

• WAVE 3.5 Accessibility Tool

   

  可以提供你页面上的易用性细节和错误方面的有用信息。他会用红黄绿蓝等几种图标来表示需要改进的页面部分。这些图标代表了你页面上有关结构、内容、可用性和易用性方面的问题细节。你可以清楚地看到当前页面上哪些位置存在问题。

• Web-based Site Usability Checker
• WebXACT Quality & Accessibility Check

   

  一个免费的在线服务，让你对单个页面进行质量、易用性和保密性问题的测试。

• Will the browser apply the rule(s)?
• TAW - Test accessibilidad web

整理和优化

• CSS Formatter and Optimiser

   

  能让你选择你的CSS更易读还是更小。

• CSS Compressor

   

  使用这个工具可以压缩你的CSS使之提高载入速度和节约带宽。

• Online CSS Compressor

   

  多种途径来清理并压缩你的CSS，牺牲了可读性来获得相当程度的优化和尺寸的减少。

• CSS Compressor
• CSS Syntax Checker for BBEdit and TextWrangler
• CSSTidy

   

  CSSTidy 是一个开源的CSS解释器和优化工具

• CSS Tweak ~ Web Based CSS Tweaker!

   

  CSS Tweak 会优化你的CSS以减少文件大小和下载时间。

• Clean CSS - Optmize and Format your CSS
• Format CSS Online

   

  自动格式化你的CSS使之便于阅读和编辑

• Online CSS Optimizer

   

  CSS Optimizer 优化并减少CSS的文件尺寸

• Online CSS Optimiser/Optimizer

   

  这个工具用于优化CSS代码。

• Tabifier

   

  使HTML和CSS代码变漂亮。

• Webucator

   

  有一个CSS参考手册，你还可以在上面测试你的CSS代码

• CSS Centricle

   

  CSS hack浏览器兼容一览表 （就是w3cn.org 上的那个）

字体

• CSS Font and Text Style Wizard

   

  你可以在这里测试用不同的字体和样式来生成CSS源代码。

• Em Calculator

   

  转换字体大小到em的工具

• text sizing - up the garden path

   

  不同浏览器下字体表现的研究，共有264个截图。

表单

• Accessible Form Builder

   

  轻轻松松生成符合XHTML标准的表单。

• CSS Form Code Maker

   

  表单生成器

• JotForm

   

  所见即所得的表单生成器

• korhoen typeviewer

   

  帮你查看CSS的排版效果，帮你调整使之易读。

布局

• CssCreator -> Page Layout:

   

  this generator will create a CSS layout that has fixed width left and/or right columns with a dynamic width center column, all the same height with header and footer.

• CSS HTML PHP Website Template Maker

   

  一个PHP - HTML - CSS模板生成器，可以生成包括页头和页尾的两栏布局的模板。

• Firdamatic

   

  Firdamatic? 是一个无表格的布局生成器。

• Free CSS Template Code Generator

   

  生成三栏的布局

• Layout-o-Matic

   

  也是一个无表格的布局生成器。

• QrONE CSS Designer

   

  在线CSS生成器

• Scriptomizers

   

  一个CSS样式生成器

• The Generator Form v2.90

   

  1-3栏可定制的CSS页面生成器。

酷站

• CSSElite
• openwebdesign.org

   

  设计师和站长在这里分享网页设计模板和资讯。

• CSS thesis
• Wow-Factor
• Web Standards Awards
• W3 Compliant Sites
• Unmatched Style
• The Weekly Standards
• CSS-Mania
• CSS Drive
• CSS Import
• CSS Zen Garden
• CSS Vault
• CSS Beauty
• Stylegala

帮助向导 / Hacks / 学习资源

• SelectOracle

   

  Explains the structure of CSS- and HTML-documents. Enter semi-colon separated selectors or just paste in your existing rulesets into the “Direct Input area, or provide the URL of a stylesheet or an HTML document with an embedded stylesheet in the “URL Input area. English, Spanish, German and Bulgarian versions are available.

• Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
• Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS’s that, when combined, addresses most of CSS issues with different browsers.
• IE Word Wrap Doppelganger Bug

   

  这个站点展示了标题(heading)元素在IE6中换行时会留个小尾巴的bug。

• Images, Tables, and Mysterious Gaps seems like something I should’ve known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I’m not that smart.
• Easy CSS hacks for IE7 — IE7下可以用的CSS Hacks。
• 针对IE7, Firefox 1.5和Opera 8.5的Web浏览器CSS支持 一览表。
• snook.ca on the “+ CSS hack which you can use to target IE6 and IE7 only.
• On having layout

   

  提供了很多信息围绕IE其特有的“渲染概念：hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements:  

  • “Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs)，意思是这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout的一个问题：为什么它会改变元素的渲染特性，为什么它会影响到元素之间的关系？这个 问题问得很好，但却很难回答。在这篇文章中，我们专注于这个复杂问题会有那些方面的表现，某一方面的具体讨论和范例请参考文中给出的相关链接。

   

  这篇文章的中文翻译参见承志的SharkUI：On having layout

• Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox.
• IE6 Multi Class Bug — Again, something that could’ve brought to my attention last week!
  • …Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed.
• Ten more CSS tricks you may not know

   

  包括少量的IE bug修复手段

• The “Holly Hack — 著名的taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
• CSS tests

   

  很不错的一系列CSS测试页面

• max-width in IE

   

  用IE的expression来模拟max-width

• http://imfo.ru/csstest/css_hacks/import.php

   

  用@import来针对不同的浏览器隐藏CSS的一系列方法。

• Essentials of CSS Hacking For Internet Explorer

   

  助你对付IE的一系列建议。

• Web 浏览器标准支持

   

  用图表来比较IE 6, Firefox 1.0, 和Opera 8.

• The perils of using XHTML properly

   

  正确使用XML申明和MIME类型。

• IE Double Float Margin Bug.

小贴士

• CSS-Based Forms: Modern Solutions样式表定义的各种漂亮注册与登录表单的收集。
• Hot Dates with CSS 教你怎样使blog的日期看起来像日历页。