使用Helium找出页面上无用的CSS样式

标签: 技术技巧 css css优化 Helium 工具 | 发表时间:2014-04-16 03:50 | 作者:santiago
分享到:
出处:http://www.webhek.com

我最无法忍受的一个事情就是多余的代码。不论是页面中的CSS还是JavaScript,还是浮肿的HTML代码或没有优化的图片,这是我们的懒惰和错误让成千上万的访问用户受连累。有一个非常棒的工具,叫做 Helium,它能帮助程序员找出样式表中无用的或有问题的样式规则。让我们来看看是如何使用它!

第一步是把这个脚本嵌入到你的页面中,在脚本加载后初始化它:

<script type="text/javascript" src="js/lib/helium-css/helium.js" onload="helium.init()" async></script>

当这个页面加载完成后,你就能看到一个文本框,在这个文本框里输入你要测试的页面的url。这些页面会被抓取,分析,并生成一份报告,里面详细的列出无用的样式规则、有问题的样式选择器、以及需要手工测试的伪元素选择器:

helium-textarea

helium-result2

Helium是一个出色的帮你找到无用CSS样式的好工具。程序员可以根据Helium提供的信息,删除无用的CSS样式。十分适合程序员快速的对他们的CSS代码进行优化。事实上,我还没发现有比这个更简单更实用的工具。你也试试吧!

(英文: Detect Unmatched CSS Selectors with Helium.)

相关 [helium 无用 css] 推荐:

使用Helium找出页面上无用的CSS样式

- - WebHek
我最无法忍受的一个事情就是多余的代码. 不论是页面中的CSS还是JavaScript,还是浮肿的HTML代码或没有优化的图片,这是我们的懒惰和错误让成千上万的访问用户受连累. 有一个非常棒的工具,叫做 Helium,它能帮助程序员找出样式表中无用的或有问题的样式规则. 第一步是把这个脚本嵌入到你的页面中,在脚本加载后初始化它:.

使用uncss去除无用的CSS

- - WebHek
从代码的角度讲,你知道什么是比往网站或应用里添加功能更好的事情吗. 也许是一些代码、图片、或相关依赖等,就像扔掉家中储存柜里没用的产生异味的存货. 我经常用ImageOptim来优化我的图片的体积,这既能提供页面加载速度,又能减少带宽流量. 然而,你知道有什么工具能找到页面中样式文件里无用的CSS吗.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

CSS架构

- - 博客 - 伯乐在线
英文原文: CSS Architecture,编译: CSDN-张红月. Philip Walton 在AppFolio担任前端工程师,他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践,并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS,为简单理解,将CSS说成两步,一步是你做个“记号”,另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词(选择器),而根据记号设置样式呢,就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子,或是用id做记号,或是用name,或是用class,只有有了这些所谓的记号,CSS设定的样式才有用,.

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器:标签选择器,ID选择器,类选择器,通用选择器. 通用选择器:*{css代码}. 通用选择器作用:对整个网页中所有HTML标签进行样式定义. 常见用法:定义*{margin:0;padding:0}通用样式,并置于CSS文件最顶端,用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.

CSS命名规范

- - BlogJava-首页技术区
网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性. 容器: container 页头:header 内容:content/container. 页面主体:main 页尾:footer 导航:nav . 侧栏:sidebar 栏目:column 左右中:leftright center .