技术改变生活

Technology changes life,Life-long learning

CSS小窍门(CSS Crib Sheet)

调试时,先校验

在调试的时候,先由校验开始吧,HTML和CSS都要进行校验。许多问题都是由不规范代码引起的。

优先在先进的浏览器上调试

如果你刚开始就用对CSS支持不好的浏览器调试,那么你所编的CSS将会逐渐适应这种错误的处理。当你继续在更先进的浏览器中测试,一些你所不希望的内容就会出现了。最好还是首先在一个有很好标准兼容性的浏览器中运行,然后再把代码拿到老一点的浏览器中去测试。

确保您期望的效果确实存在

许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter(滤镜) 或滚动条指定了样式,那么您就用了私有代码,除了IE之外,在别的浏览器中毫无作用。如果验证器告诉您代码没有定义,极有可能您用了私有样式,这样在不同的浏览器中很难达到一致的效果。

理解CSS的盒模型

为了获得一个元素的实际的宽度和高度,你需要用padding和border来增加它的 width或者height。

在Internet Explorer 5.*/Win中, padding和border是被包括在已知的width和height。

为了绕过这个问题, 你同样可以使用CSS hack来给不同的浏览器提供不同的值,或者你尽量避免在同一个元素中同时定义width和 padding或者width和border。

为非零的数值加上单位

CSS要求一些属性值(如width、height、font-size)必须要有单位。当属性值为0时是可以例外的。在那种情况下,没有单位也是必须的,因为0就是0,什么单位也都无所谓了。

例如: padding: 0 2px 0 1em;

理解漂浮物(float)

尽管漂浮物这个概念很难理解,但是它很重要,因为CSS中会频繁的使用它来布局。
PS.已添加《CSS float hack》作详解。

边距的合并(可用padding 或 border 来避免)

您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins,边距的合并可能就是问题的根源。

PS.可参考W3C学院提供的资料:
http://www.w3school.com.cn/css/css_margin_collapsing.asp

避免IE下未指定样式内容的闪烁(Flash of Unstyled Content,即FOUC)

如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

原因大致为:

1,使用import方法导入样式表。

2,将样式表放在页面底部。

3,有几个样式表,放在html结构的不同位置。

原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。

解决方法:使用LINK标签将样式表放在文档HEAD中。

别指望 min-width 在IE中有用

IE不支持它,但是它将 width 当作 min-width,所以通过一些 IE 的过滤技巧(filtering),可以实现同样的最终效果。

把CSS过滤器(filters)当作最后的手段

CSS 技巧和过滤器可以使您有选择地应用到(或者不应用到)某些元素。应当尽可能地找到标准的跨浏览器的解决办法来实现您想要的效果,而不是动不动就使用过滤器。要将它当成走投无路时的救命手段,说到底就是一个兼容的策略。

不要把这里的filters和IE中的滤镜混淆。由于各个浏览器对CSS标准的支持程度不一,人们找到了许多技巧,将浏览器无法解释或错误解释的样式表或规则屏蔽掉。这就是所谓的CSS过滤器或技巧。

如果使用了锚点,在应用超链接样式时要特别小心

如果您在代码中使用了传统的锚点(<a name=”anchor”>),您会注意到 :hover 和 :active伪类也会作用于它。要避免这种情形,你可以使用 id,或者使用鲜为人知的语法:
:link:hover, :link:active

“LoVe/HAte”

按照如下顺序为链接定义伪类:Link, Visited, Hover, Active。

“TRouBLed”(上、右、下、左)

当使用简写来定义margin、padding和border时, 他们的顺序是从上开始的顺时针方向: 上、右、下、左。

测试不同的字体大小

像Mozilla和Opera这样的高级浏览器允许对字体进行缩放,不管你用的是什么单位。某些用户的默认字体大小肯定和您的不同,尽最大努力去满足他们。

用嵌入式测试,发布时移到外部

将样式表嵌入在你的HTML源代码中,在测试时可以消除许多缓存引起的错误,尤其是某些Mac下的浏览器。但在发布前,一定要记住将样式表移到外部文件,用@import或<link>引入。

加上明显的边框有利于布局调试

像 div {border: solid 1px #f00;} 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的交错或空白问题。

对图片路径不要用单引号

当设置背景图片时,要坚持用双引号。尽管看起来有些多余,但是如果不这么做,IE5/Mac会噎住。

以其功能给CLASS和ID命名,而非表现

如果你有一个CLASS名为.smallblue, 过后你决定用它来定位文本,使其为大号、红色,那么CLASS的名字就会被弄混淆的。最好能用名字来描述功能和结构,如.copyright和.important。

CSS是个敏感的东西

当HTML属性中的class和id与CSS一起使用时,那可就要小心了,必须做到一一对应。

检查你的ID

文档中一个元素只能使用一个id,且id必须唯一,而class可以被多个元素所共享。

使用合法的字符为 class 和 id 命名

Class 和 id 的名字只能由数字、字母和连字符组成,数字和连字符是不可以开头的。

正确的注释

CSS的注释是以/*开头,以*/结尾的:

/* This is a comment */

好好组织您的CSS文件

恰当地成块注释CSS,将相似的CSS选择符编为一组,养成一致的命名习惯和空白格式(为跨平台考虑,建议用空白字符而不是tab。)以及适当的次序。

原文始发于:CSS小窍门(CSS Crib Sheet)

点赞