高效的CSS - [w3c标准(xhtml+css)]

时间:2009-03-23 00:57:27   来源:  作者:  点击:次  出处:技术无忧
关键字:css ie w3c

本文将介绍 Mozilla UI 在用的一些 CSS 优化规则。第一部分是关于 Mozilla 样式系统如何分类选择器的一般讨论,在理解了这些的基础上,第二部分则罗列了 Mozilla 样式系统书写 CSS 的规则指南。

十六进制的颜色值对位数与大小写
编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
不赞成 - color:#f3a;
建议用 - color:#FF33AA;

display与visibility的差异
他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间,visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时,会有所消耗资源。
不赞成 - visibility:hidden;
建议用 - display:none;

border:none;与border:0;的区别
和display与visibility的关系类似,分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框,但它会为你保留border-color/border-style的使用权。
不赞成 - border:0;
建议用 - border:none;

不宜过小的背景图片平铺
一张宽高1px的背景图片,虽然文件体积非常之小,但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关,最大的图片文件体积保持约70KB。
不赞成 - 宽高8px以下的平铺背景图片
建议用 - 衡量适中体积及尺寸的背景图片

IE的滤镜
IE的滤镜除了比较消耗资源外也有兼容性问题。当中有令PNG透明的滤镜,可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明,因为IE7以上已经支持了PNG透明。
不赞成,滥用IE滤镜因为消耗资源外也有兼容性问题。
建议用,最好选择其它方法能避免使用滤镜。

*{ margin:0; padding:0;}避免浏览器样式差异
*号通配符把所有标签都初始化一遍,浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异,或是某些已经不推荐使用的标签(因为你不会去用它),它们不需通配符要重新初始化一遍这样做能节省一点资源。
不赞成,使用*号通配符
不赞成,div span button b table等标签纳入通配符控制内外填充样式
建议用,有选择性地使用通配符控制内外填充样式。


========================================================
样式系统是如何分类选择器的?
Mozilla 样式系统将规则主要分成四类。理解这个分类非常的重要,他是你了解规则匹配的第一步。下面我用了一个术语:关键选择符,指的是位于最右边的选择符。他可以是 id 选择符,class 选择符或者标签选择符。

ID 类
ID 选择符作为关键选择符
例:

button#backButton { } /* ID 类 */
#urlBar[type="autocomplete"] { } /* ID 类 */
treeitem > treerow > treecell#myCell :active { } /* ID 类 */Class 类


Class 选择符作为关键选择符
例:

button.toolbarButton { } /* Class 类 */
.fancyText { } /* Class 类 */
menuitem > .menu-left[checked="true"] { } /* Class 类 */标签类


标签选择符作为关键选择符
例:

td { } /* 标签类 */
treeitem > treerow { } /* 标签类 */
input[type="checkbox"] { } /* 标签类 */通用类


所有其他的都属于此类
例:

:table { } /* 通用类 */
[hidden="true"] { } /* 通用类 */
* { } /* 通用类 */
tree > [collapsed="true"] { } /* 通用类 */

文章评论

共有 0 位网友发表了评论 此处只显示部分留言 点击查看完整评论页面