只跨web和小程序的应用

只跨web和小程序的应用

背景介绍

通常情况下，cml框架会生成跨H5、小程序、客户端的应用。为了H5、小程序、客户端初始样式呈现效果一致，cml会添加一致性基础样式。在开发模式下，构建会严格校验CMSS语法，只允许书写跨H5、小程序、客户端都通用的 CMSS 规则。因此，受限于客户端的 CMSS 渲染能力，开发会有诸多限制，另一方面，当开发者只需要跨H5和小程序应用时，开发会变得很轻便。

通过下面的表格，展示 CMSS 跨端能力差异：

CSS属性	H5	小程序	weex
布局	all	all	flexbox
盒模型	all	all	只支持display:border-box
float浮动	✅	✅	❌
display:inline-block\|none	✅	✅	❌
ID选择器	✅	✅	❌
类选择器	✅	✅	✅
属性选择器	✅	✅	❌
级联选择器、派生选择器(后代、子元素、相邻兄弟)	✅	✅	❌
选择器分组	✅	✅	✅
伪类(:active\|:focus)	✅	✅	✅
伪类(:hover\|:link\|:visited\|:first-child\|:lang)	✅	✅	❌
伪元素(:first-letter\|:first-line\|:before\|:after)	✅	✅	❌
百分比定值	✅	✅	❌
line-height:1	✅	✅	❌
尺寸	px\|rem\|em\|vw\|vh	px\|rpx	px
!important	✅	✅	❌

项目初始化与配置

项目初始化
以merge config的方式修改项目根目录下的 chameleon.config.js，如下：

cml.config.merge({
platforms: ["web","wx","alipay","baidu"]
})

CMSS

此时，CMSS 语法和可用属性，不再受限于客户端的渲染。CMSS 遵循 W3C 层叠样式表 (Cascading Style Sheets，缩写为 CSS）规范，在此基础上，小程序的标准样式会有一些限制。

一致性基础样式可选

如果你希望去除小程序、客户端的的一致性基础样式，修改项目根目录下的 chameleon.config.js，如下：

cml.config.merge({
  baseStyle: {
    wx: false,
    alipay: false,
    baidu: false,
    web: true,
    weex: false
  }
})