Maison >interface Web >tutoriel HTML >豆瓣网前端开发规范之-css开发规范_html/css_WEB-ITnose
WinXP | Win7 | OS X | |
IE9 | C | C | |
IE8 | A | A | |
IE7 | A | A | |
IE6 | A | A | |
Chrome7 | C | C | C |
Chrome6 | A | A | A |
Chrome3 | B | B | B |
Firefox4 | C | C | C |
Firefox3.6 | A | A | A |
Firefox3.5 | C | C | |
Firefox3 | C | C | |
Safari | B | B | B |
Opera | C | C | C |
(注:根据2010年11月10日数据整理)
A级-交互和视觉完全符全设计的要求
B级-视觉上允许有所差异,不破坏页面整体效果
C级-可忽视视觉上的问题,但不防碍使用
3-1. 目前全站级的CSS文件仅有core.css和douban.css(向全站级CSS文件中添加规则参见4和5)。
3-2. 产品级CSS是指作用于某一垂直产品(如音乐、读书、电台等),文件放在css/下相应目录下。
页面级指仅在一个或少量几个页面中用到。如果仅在一个页面中用到的采用内联方式嵌入于页面head里,多于两个页面的放到外联的CSS文件中,该文件再放到相应的产品目录下。
参见:http://img3.douban.com/css/packed_core1.css
6-1. 属性需要写在一行。需要在“{“和”}”前后加空格。
.selector { property:value;property:value; }
6-2. 多个(>2)selector每个占一行:
.selector1,
.selector2,
.selector3 { property:value;property:value; }
6-3. 兼容多个浏览器时,将标准属性写在后面,如:
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
注释的格式:
/* mod: doulist */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如:
/* button */
…
/* mod */
…
/* nav */
…
/* mod: events album */
8-1. ID是用来标识具体模块,命名必须具体且唯一,由前缀和名字组成。不要滥用ID。如: #db-video-list。
8-2. Class是用来标识某一类型的元素,命名简洁表意清楚。如:.list。
8-3. 命名示例:
坏:
#rec
.gray-link
.broadsmr
.pl
好:
#db-nav-main
.infobox
.item
8-4. 推荐使用的class名:
表示状态 | .on, .active, .selected, .hili |
表示位置 | .first, .last, .main, .side |
表示结构 | .hd, .bd, .ft, .col, .section |
通用元素 | .tb, .frm, .nav, .list, .item, .tag, .pic, .info |
推荐使用下面的:
区别属性:
IE6 | _property:value |
IE6/7 | *property:value |
IE6/7/8/9 | property:value9 |
非IE6 | property//:value |
区别规则:
IE6 | * html selector { … } |
IE7 | *:first-child+html selector { … } |
非IE6 | html>body selector { … } |
firefox only | @-moz-document url-prefix() { … } |
saf3+/chrome1+ | @media all and (-webkit-min-device-pixel-ratio:0) { … } |
opera only | @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { … } |
iPhone/mobile webkit | @media screen and (max-device-width: 480px) { … } |
如:
body > * {…}
ul > li > a {…}
#footer > h3 {…}
ul#top_blue_nav {…}
#searbar span.submit a { … }
如: div { … }
如: