兼容性

  1. 属性前缀
  2. Hack
  3. Expression

属性前缀

[强制] 带私有前缀的属性由长到短排列,按冒号位置对齐。

解释:

标准属性放在最后,按冒号对齐方便阅读,也便于在编辑器内进行多行编辑。

示例:


.box {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

Hack

[建议] 需要添加 hack 时应尽可能考虑是否可以采用其他方式解决。

解释:

如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式,则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。

[建议] 尽量使用 选择器 hack 处理兼容性,而非 属性 hack

解释:

尽量使用符合 CSS 语法的 selector hack,可以避免一些第三方库无法识别 hack 语法的问题。

示例:


/* IE 7 */
*:first-child + html #header {
    margin-top: 3px;
    padding: 5px;
}

/* IE 6 */
* html #header {
    margin-top: 5px;
    padding: 4px;
}

[建议] 尽量使用简单的 属性 hack

示例:


.box {
    _display: inline; /* fix double margin */
    float: left;
    margin-left: 20px;
}

.container {
    overflow: hidden;
    *zoom: 1; /* triggering hasLayout */
}

Expression

[强制] 禁止使用 Expression

0 条评论