改善CSS的小工具CSSUsage.docVIP

INTRO:CSS Usage 是一款基于firebug的firefox扩展，允许你查看站点多个页面中CSS文件的使用情况，哪些CSS规则被应用了多少次，而哪些没有被应用。 CATEGORY: 网站前端 TAGS: css, firebug扩展, 工具 CSS Usage 下载：/en-US/firefox/addon/10704联系作者 - eijsden AT 官方网址 - /cssusage/ CSS Usage is an extension for Firebug which allows you to scan multiple pages of your site to see which CSS rules are actually used in your site.” CSS Usage 是一款基于firebug的firefox扩展，允许你查看站点多个页面中CSS文件的使用情况，哪些CSS规则被应用了多少次，而哪些没有被应用。 如何使用？ - Open up the first page of the site you want to check and press the “Scan” button in the “CSS Coverage” Firebug tab.” 打开你要检查的第一个页面，F12呼叫出Firebug，点击CSS Usage切换到该标签，然后点击Scan按钮。- In case of a rich (Ajax or DHTML) site, open up as many divs/popups/tabs in the page as possible and press “Scan” again.” 为了更多的扫描到CSS的使用情况，你应该尽可能多地打开隐藏的div，弹窗和tabs。- Visit other pages of your site and press “Scan” again.” 访问其他需要一起检查的页面，并再次点击Scan按钮。 你也可以激活Auto-scan选项，这样就不用每次都点击Scan按钮了。 颜色的表示 红色：还没有被使用过的CSS规则；绿色：当前页面正在使用的CSS规则；深绿色：其他页面使用过的CSS规则；灰色：表示伪类，只支持:hover和:active。 一些特性 Auto-scan；显示CSS规则的行数；点击CSS会在新的tab页打开它。 可以用来干什么？ 一般页面改版过后页面中会有之前的一些冗余CSS规则，用这个工具，则可以检查出这些冗余代码，并消除它们。另外，也可以检查哪些CSS规则写得效率不高。