CSS规范没有指定
浏览器如何实现风格的
系统,只是表明他们不得不这么做。鉴于此,不同风格的系统引擎可能会有完全不同的表现和行为,特别是壁虎和WebKit。这两个引擎
都是开源项目。实现类似的算法。它们有非常相似的优点和缺点。
第一部分是对一般风格系统如何
分类规则的全面讨论,下一部分包括一个指南,它利用先前讨论过的风格系统编写规则。
如何划分风格体系的规则
风格系统将规则分为四大类:
1.id规则
2类规则
三.标签规则
4。一般规则
理解这些分类是至关重要的,因为它们是构建规则匹配块的基础。
我在下面的段落中使用术语键选择器(键选择器),选择器的最后一部分是键选择器(即用于匹配
目标元素的部分,而不是元素的祖先元素)。
例如,在下面的规则hellip;
CSS代码将内容
复制到剪贴板。
一个img,
p,
标题{ }
hellip;
}
关键选择器是IMG,P,和标题。
编号规则
第一类包含使用ID选择器作为键选择器的规则。
样品
CSS代码将内容复制到剪贴板。
按钮#返回按钮{ hellip这是身份caterized;} / * * /规则
# urlbar {
类型=自动完成这是一个身份caterized { hellip;} / * * /规则
项目> treerow >树木细胞#美赛:主动{ hellip这是身份caterized;} / * * /规则
课堂规则
如果规则显式地使用类作为键选择器,则它属于该类别。
样品
CSS代码将内容复制到剪贴板。
button.toolbarbutton { hellip;} / *规则*一类/
。fancytext { hellip;} / *规则*一类/
菜单>。菜单左{
检查=真正的{ hellip一类规则;} / * * /
标签规则
如果没有将类或id定义为键选择器,则下一个候
选项是标签类别。
样品
CSS代码将内容复制到剪贴板。
TD { hellip;} / * * /基于标签的规则
项目> treerow { hellip;} / * * /基于标签的规则
输入{类型=复选框{ hellip基于标签的规则;} / * * /
一般规则
不属于上述类别的规则属于这一类别。
样品
CSS代码将内容复制到剪贴板。
{隐=真正的{ hellip通用规则;} / * * /
* { hellip通用规则;} / * * /
树> {崩溃=真正的{ hellip通用规则;} / * * /
风格系统如何与规则相匹配
风格系统开始比赛规则从关键选择器,然后左移(查找规则选择任何祖先元素)。只要选择的子树(substree)已检查的方式,系统会继续向左移动直到它匹配规则,或规则是放弃的
原因错配。
常规过滤是你需要
学习的最基本的概念。分类的意义是过滤掉不相关的规则(这样风格系统就不会浪费时间来匹配它们)。
这是提高
性能的关键。对于给定的元素,需要匹配的规则越少,解析样式的
速度就越快。
例如,如果一个元素有id,那么只会选择与id相匹配的ID规则。同样,只有在类规则中的类出现在元素上时才检查规则。只有当标签规则匹配时才检查规则。
高效的CSS指南
避免一般规则
请确保规则不以一般类型选择器结束。
不要将ID规则限制在标签名或类中。
如果规则具有id选择器作为其键选择器,则不要将标签名添加到规则中。
差异
CSS代码将内容复制到剪贴板。
按钮#返回按钮{ hellip;}
差异
CSS代码将内容复制到剪贴板。
。菜单左# newmenuicon { hellip;}
好的
CSS代码将内容复制到剪贴板。
#返回按钮{ hellip;}
好的
CSS代码将内容复制到剪贴板。
# newmenuicon { hellip;}
例外:在不同的场景中,最好动态地更改元素的类别以应用不同的样式。
不要用标签名称限制类规则。
前面的部分也适用于此,虽然类可以在同一页上多次使用,但它仍然比签名更为独特。
As usual, you can include the label name in the class name.However, this can be detrimental to flexibility; if the design changes to change the label, the class name must also change.(the best way is to choose a strict semantic name, after all, one of the goals of a separate stylesheet is to be flexible.)
差异
CSS代码将内容复制到剪贴板。
treecell.indented { hellip;}
好的
CSS代码将内容复制到剪贴板。
树木细胞缩进{ hellip;}。
粘贴 CSS代码将内容复制到剪贴板。
层次深{ hellip;}。
尽量使用最具体的分类
减慢速度的罪魁祸首是标签类中的规则太多了。通过向元素添加类,我们可以进一步将这些规则划分到类类别中,从而减少了用于匹配标签的时间。
差异
CSS代码将内容复制到剪贴板。
{ mailfolder =真实项目treerow } > >树木细胞{ hellip;}
好的
CSS代码将内容复制到剪贴板。
树木细胞mailfolder { hellip;}。
避免后代选择器
后代选择器是CSS中能耗最大的选择。这是一个相当高的性能开销mdash;mdash;特别是当选择器在标签或泛型类。
我们通常需要的是一个subselector。例如,当性能很差,Firefox的
用户界面将不再理由禁用CSS选择器,你应该在网上,太。
差异
CSS代码将内容复制到剪贴板。
treehead treerow树木细胞{ hellip;}
有点好,但仍然不好(看下一个指南)
CSS代码将内容复制到剪贴板。
treehead > treerow >树木细胞{ hellip;}
标签分类规则不包含subselectors
避免subselectors在标签分类的规则使用。否则,在所有的地方的元素出现,比赛的时间将大大延长(特别是当规则可能匹配)。
差异
CSS代码将内容复制到剪贴板。
treehead > treerow >树木细胞{ hellip;}
好的
CSS代码将内容复制到剪贴板。
树木细胞头{ hellip;}。
想想你为什么使用subselector
使用subselector时要非常谨慎。不可豁免。
特别是,subselectors通常用于RDF树和菜单:
差异
CSS代码将内容复制到剪贴板。
项目{ isimapserver =真正的treerow } > >。树folderpane
图标{ hellip;}
记住,模板中的REF特性可以重复!好好利用这个优势。RDF
属性使用的subxul元件,使元件可以基于该属性的
修改。
OD
CSS代码将内容复制到剪贴板。
。树folderpane图标{ isimapserver =真正的} { hellip;}
依赖遗传
知道哪些属性可以继承,然后允许它们这样做!
例如,XUL
组件显式
设置,使列表样式图像或
字体规则父元素的来源匿名内容。因此,它是没有必要使用规则来浪费时间,直接在匿名内容。
差异
CSS代码将内容复制到剪贴板。
# bookmarkmenuitem >。菜单左{列表样式图像:URL(废话)}
好的
CSS代码将内容复制到剪贴板。
# bookmarkmenuitem {列表样式图像:URL(废话)}
在上面的示例中,为匿名内容应用样式(不使用列表样式映像的继承特性),它将生成类分类中的规则。当这个规则应该结束ID分类——-,在所有类别中,最准确的分类。
记住:所有元素都具有相同的类,尤其是匿名内容!
在上面的例子中,可怜的规则强制每个菜单的图标在包含书签的菜单项中进行测试。因为这里有很多菜单,它将非常昂贵。相反,这是规则;规则限制测试到书签菜单(容器外,而不是单独的项目)。
用张图像
区域!
如果你正在开发的代码为Mozilla:将一系列的图像在一个单独的
文件,并使用张图像区域的选择,这比选择他们分别在自己的文件。
使用
本地样式表
如果你能明确使用样式表作为XBL的来源,这些方式只适用于绑定元素和它的匿名内容。这减少了一般规则和子元素选择器的负面
影响,因为他们认为少的元素。
避免特定浏览器的呈现特性,如果没有必要的话
总是有一些特定于浏览器的或实验性的标签和CSS属性。他们
发现可以通过前缀的浏览器,如WebKit,-moz,MS,O等。一旦一个标签或属性规范,前缀属性
删除。例如,在边界半径标准化,所有的主流浏览器实现的,你必须使用属性,如WebKit边界半径和-moz边界半径。
随时注意前缀和标记的标准化变化和特定渲染的属性,避免任何特定的渲染特性。