web前端开发规范.docx

●书写链接地址时避免重定向。

href=""

●

●

eader{

/*显示属性*/

display||visibility

list-style

positiontop||right||bottom||left

z-index

clear

float

/*自身属性*/

widthmax-width||min-width

heightmax-height||min-height

overflow||clip

margin

padding

outline

border

background

/*文本属性*/

color

font

text-overflow

text-align

text-indent

line-height

white-space

vertical-align

cursor

content

};

兼容多个浏览器时，将标准属性写在底部。

-moz-border-radius:

15px;/*Firefox*/

-webkit-border-radius:

15px;/*Safari和Chrome*/

border-radius:

15px;/*Opera+,以及使用了IE-CSS3的IE浏览器*

●

d,.bd,.td{};

ecommend-mod.hd

多选择器规则之间换行，即当样式针对多个选择器时每个选择器占一行。

input[type="button"]{…};

优化CSS选择器。

#headera{color:

#444;};/*CSS选择器是从右边到左边进行匹配*/

浏览器将检查整个文档中的所有链接和每个链接的父元素，并遍历文档树去查找ID为header的祖先元素，如果找不到header将追溯到文档的根节点，解决方法如下。

避免使用通配规则和相邻兄弟选择符、子选择符,、后代选择符、属性选择符等选择器

不要限定id选择符，如div#header（提权的除外）

不要限定类选择器，如（提权的除外）

不要使用ullia这样长的选择符

避免使用标签子选择符，如#header>li>a

●使用z-index属性尽量z-index的值不要超过150（通用组的除外），页面中的元素内容的z-index不能超过10（提示框等模块除外但维持在150以下），不允许直接使用（999~9999）之间大值。

●尽量避免使用CSSHack。

property:

value;/*所有浏览器*/

+property:

value;/*IE7*/

_property:

value;/*IE6*/

*property:

value;/*IE6/7*/

property:

value\9;/*IE6/7/8/9，即所有IE浏览器*/

*htmlselector{…};/*IE6*/

*:

first-child+htmlselector{…};/*IE7*/

html>bodyselector{…};/*非IE6*/

@-moz-documenturl-prefix（）{…};/*firefox*/

@mediaalland（-webkit-min-device-pixel-ratio:

0）{…};/*saf3+/chrome1+*/

@mediaalland（-webkit-min-device-pixel-ratio:

10000）,notalland（-webkit-min-device-pixel-ratio:

0）{…};/*opera*/

@mediascreenand（max-device-width:

480px）{…};/*iPhone/mobilewebkit*/

●避免使用低效的选择器。

body>*{…};

ul>li>a{…};

#footer>h3{…};

ul#top_blue_nav{…};

#searbara{…};/*反面示例*/

●六个不要三个避免一个使用。

不要在标签上直接写样式

不要在CSS中使用expression

不要在CSS中使用@import

不要在CSS中使用!

important

不要在CSS中使用“*”选择符

不要将CSS样式写为单行

避免使用filter

避免使用行内（inline）样式

避免使用“*”设置{margin:

0;padding:

0;}

使用after或overflow的方式清浮动

●减少使用影响性能的属性。

position:

absolute;

float:

left;

●

eplace（'{PREV_NUM}',prev）

.replace（'{NEXT_NUM}',next）

.replace（'{CURRENT_NUM}',current）

.replace（'{TOTAL_NUM}',;

为了避免和JSLint的检验机制冲突，“.”或“+”这类操作符放在行尾。

（'{TABLE}',da['results']）.

replace（'{PREV_NUM}',prev）.

replace（'{NEXT_NUM}',next）.

replace（'{CURRENT_NUM}',current）.

replace（'{TOTAL_NUM}',;

如果模块代码中，使用其它全局变量想跳过JSLint的检查，可以在该文件中加入/*global*/声明。

/*globalalert:

true,console:

true,top:

true,setTimeout:

true*/

使用严格的条件判断符。

用===代替==，用!

==代替!

=，避免掉入==造成的陷阱

在条件判断时，这样的一些值表示false。

null

undefined与null相等

字符串''

数字0

NaN

在==时，则会有一些让人难以理解的陷阱。

（function（）{

varundefined;

undefined==null;

●

●

●

IE都能识别*;标准浏览器（如FF）不能识别*;

2.IE6能识别*,但不能识别!

important;IE6在样式前面加_3.IE7能识别*,也能识别!

important;能识别\9例如:

background:

red\9;

5.firefox?

不能识别*,但能识别!

important;

和firefox的区别:

background:

orange;*background:

blue;意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景色是蓝色.

2.IE6和?

IE7的区别:

background:

green!

important;background:

blue;意思指的是:

IE7的背景颜色是绿色,IE6的背景颜色是蓝色

3.IE7和FF的区别:

background:

orange;*background:

green;意思指的是:

火狐浏览器的背景颜色是橙色,而?

IE7的背景颜色是绿色

4.FF,IE7,IE6的区别:

background:

orange;

*background:

green!

important;

*background:

blue;

意思是火狐浏览器的的背景橙色,IE7浏览器的背景颜色是绿色,而?

IE6浏览器的颜色是蓝色.

二、实践建议

（1）.开发平台的选择

在Firefox上编写CSS,同时兼容其他浏览器的.这样做肯定会比在IE做好再到别的浏览器兼容来得容易,因为IE对老标准支持还是很不错的,而IE的一些特有功能人家却不支持.所以推荐以Firefox结合Firebug扩展作为平台。

（2）.CSSHack?

的顺序

使用Firefox作为平台,只要代码写得够标准,其实要Hack的地方不会很多的,IE以外的浏览器几乎都不会有问题,所以可以暂时忽略,

顺序如下:

Firefox->IE6->IE7->其他（3）.Hack的方法

说到方法有两种,一种是在不同文件中处理,另一种则是在同一个文件中处理.其实作用是相同的,只是出发点不一样而已.

同一文件中处理.

如:

id="bgcolor"的控件要在IE6中显示蓝色,IE7中显示绿色,Firefox等其他浏览器中显示红色。

IE6不认!

important,也不认*+html.所以IE6只能是blue.

IE7认!

important,也认*+html,优先度:

（*+html+!

important）>!

important>+html.IE7可以是red,blue和green,但green的优先度最高.

Firefox和其他浏览器都认!

important.!

important优先,Firefox可以是red和blue,但red优先度高.上述的优先符号均是CSS3标准允许的,其他浏览器也还有其他的Hack方法,但我迄今还没遇到过Firefox正常,IE以外的其他浏览器不正常的情况,所以无可分享.只要代码规范,相信这种情况的发生应该是很罕见（JavaScript除外）.

2.不同文件中处理.

为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器这是为了欺骗W3C的验证工具,其实只需要两个文件,一个是针对所有浏览器的,一个只为IE服务.将所有符合W3C的代码写到一个里面去,而一些IE中必须的,又不能通过W3C验证的代码（如:

cursor:

hand;）放到另一个文件中,再用下面的方法导入.