CSS的编写变得越来越复杂。幸运的是,有一些工具可以让创建CSS的任务变得更容易一些。从识别样式表中的错误到显示关于代码的有用统计信息,这些在线工具无疑将有助于CSS开发。
CSS线头
CSS Lint会指出语法错误,并强调与浏览器兼容性、性能、可访问性和其他关注领域相关的潜在问题。的源代码如果你想在你的计算机或web服务器上离线运行它,在GitHub上可以使用CSS Lint。用途:通过可视化测试和CSS验证确定不太明显的问题
CSS属性
CSS Stats,正如它的名字所暗示的那样,为你提供了网站CSS的大量统计信息,比如网站有多少样式规则,它使用的媒体查询,它使用的所有字体等等。另一个可以使用的在线CSS统计工具是StyleStats。用途:深入了解一个网站的CSS,以便分析和发现潜在的改进点
CSS收缩
CSS Shrink是一个在线工具,可以减少CSS文件的大小,从而提高页面加载时间。它删除了不必要的东西,如空格、注释、换行符和制表符——这个过程被称为缩小。缩小源代码会使其难以阅读,所以这应该只在开发之后进行,并且您应该仍然拥有非缩小的CSS源代码,以供将来的开发和维护。
用途:加快你的网站
ProCSSor
这个在线工具将清理,格式化和组织你的CSS。这个css格式化工具的特别之处在于它有大量的配置选项,因此您可以很好地控制代码的格式化方式。其他CSS代码格式化工具有CSScomb,代码美化者和Styleneat。
用途:立即格式化和清理您的CSS
Codrops CSS参考
这个有用的CSS参考是由Codrops开发的,可以作为学习某些CSS属性、伪类、函数等的工具。用途:学习和发现不熟悉的CSS特性
我可以用(CSS)
这个在线参考工具将帮助你了解一个CSS特性在流行的web浏览器中得到了多么好的支持。了解CSS特性的浏览器支持级别对于帮助您做出明智的实现决策非常重要。用途:了解CSS特性在web浏览器中的受支持程度
W3C CSS验证服务
这个在线工具将检查您的样式表,以确保它符合W3C CSS规范。用途:验证CSS是否符合W3C标准
额外奖励:浏览器自带的开发人员工具
也许最重要的CSS开发工具你可能已经有了:Chrome有DevTools, Firefox有一套内置的开发工具,可以通过浏览器的菜单访问,以及Firefox开发人员版,旅行网络督察,即F12开发工具.这些开发人员工具不像本列表中提到的其他工具严格意义上是在线工具,因为它们即使没有互联网连接也可以工作,但它们是您在CSS开发期间绝对应该使用的工具。浏览器内开发工具充满了用于调试、分析和分析CSS的特性。
Chrome DevTools——我最喜欢的工具——可以,例如,分析你的CSS来帮助你发现有关缓慢的绘制时间和渲染时间的性能问题。用途:调试、分析和分析CSS