# Skyline WXSS 样式支持与差异

# 模块支持

模块 支持情况 备注
CSS Animation 安卓 8.0.37,iOS 8.0.39,支持情况见下表
背景与边框 常用的基本支持,详见属性支持
盒子模型 支持 border-box 和 content-box,没有 BFC
Inline 布局 × 开发中
Inline-Block 布局 × 仅支持在 text 组件里的嵌套结构使用,完整版本开发中
Block 布局 详见开启默认 Block 布局
Flex 布局 包括 inline-flex 布局
字体 基本支持,也支持自定义字体
Positioned 布局 支持情况见下表。sticky 可使用 sticky-header/sticky-section 替代
CSS Transition
CSS Variable(CSS 变量) 安卓 8.0.35,iOS 8.0.38
Media queries 只支持 DarkMode
Font-face 只支持 ttf 格式

# 选择器支持

类别 示例 支持度 备注
通配选择器 * {} ×
元素选择器 tag {}
类选择器 .class {}
ID 选择器 #id {}
分组选择器 a, b {}
直接子代选择器 a > b {}
后代选择器 a b {}
属性选择器 [attr] {} ×
一般兄弟选择器 a ~ b {} 8.0.49
紧邻兄弟选择器 a + b {} 8.0.49
伪类选择器 :active {} 支持 :first-child / :last-child,微信 8.0.49 起(对应 Skyline 1.3.0),支持 :not / :only-child / :empty / :nth-child
伪元素选择器 ::before {} 只支持 ::before 和 ::after

# 属性支持

样式属性 支持格式 默认值 备注
display none / flex / block flex 默认值可通过配置改成 block
position relative / absolute / fixed relative fixed 在微信客户端 8.0.43 版本开始支持,只支持相对于窗口 viewport 定位,不支持 top / left / bottom / right 默认值 auto 解析,z-index 只作用在兄弟节点;sticky 可使用 sticky-header/sticky-section 替代
overflow hidden / visible visible scroll 不支持,只能通过 scroll-view 实现;不支持单独设置 overflow-x/y
pointer-events auto / none auto
box-sizing border-box / content-box border-box
transform none / <transform-function> none
transform-origin left / center / right / top / bottom / <length>{1, 2} 50% 50%
z-index <float> 0 不支持层叠上下文,只对兄弟节点生效;不支持在 scroll-view 下的直接子节点上应用
visibility visible / hidden visible
color <color> black
opacity <float> 1
align-items stretch / center / flex-start / flex-end / baseline stretch
align-self auto / stretch / center / flex-start / flex-end / baseline auto
align-content stretch / center / flex-start / flex-end / space-between / space-around auto
justify-content center / flex-start / flex-end / space-between / space-around / space-evenly flex-start
flex-direction row / row-reverse / column / column-reverse column
flex-wrap nowrap / wrap / wrap-reverse nowrap
flex-grow <float> 0
flex-shrink <float> 1
flex-basis <length> auto
order <float> 0
flex 简写属性,支持解析但以展开属性为准
background-color <color> transparent
background-image none / <image> none 不支持多张图片
background-size contain / cover / [<length> | auto]{1, 2} auto
background-position left / center / right / top / bottom / <length> 0 0 完全支持 <bg-position>#,请参考 MDN
background-repeat repeat-x / repeat-y / repeat / no-repeat repeat
background 简写属性,支持解析但以展开属性为准
width <length> auto
height <length> auto
min-width <length> auto
min-height <length> none
max-width <length> auto
max-height <length> none
left <length> auto
right <length> auto
top <length> auto
bottom <length> auto
padding <length>{1,4} 0 0 0 0
padding-left <length> 0
padding-top <length> 0
padding-right <length> 0
padding-bottom <length> 0
margin <length>{1,4} 0 0 0 0
margin-left <length> 0
margin-top <length> 0
margin-right <length> 0
margin-bottom <length> 0
border-left-width <length> 3
border-left-style <border-style> none
border-left-color <color> black 默认值与 web 不同, web 默认值是 currentcolor
border-top-width <length> 3
border-top-style <border-style> none
border-top-color <color> black 默认值与 web 不同, web 默认值是 currentcolor
border-right-width <length> 3
border-right-style <border-style> none
border-right-color <color> black 默认值与 web 不同, web 默认值是 currentcolor
border-bottom-width <length> 3
border-bottom-style <border-style> none
border-bottom-color <color> black 默认值与 web 不同, web 默认值是 currentcolor
border-width 简写属性,支持解析但以展开属性为准
border-style 简写属性,支持解析但以展开属性为准
border-color 简写属性,支持解析但以展开属性为准
border-left 简写属性,支持解析但以展开属性为准
border-right 简写属性,支持解析但以展开属性为准
border-top 简写属性,支持解析但以展开属性为准
border-bottom 简写属性,支持解析但以展开属性为准
border 简写属性,支持解析但以展开属性为准
box-shadow none / inset? && <length>{2,4} && <color>? none 不支持多个叠加
border-top-left-radius <length>{1, 2} 0 border-radius 非 0 时,四边的 border-width 可不一致,四边的 border-color 和 border-style 需一致
border-top-right-radius <length>{1, 2} 0 border-radius 非 0 时,四边的 border-width 可不一致,四边的 border-color 和 border-style 需一致
border-bottom-left-radius <length>{1, 2} 0 border-radius 非 0 时,四边的 border-width 可不一致,四边的 border-color 和 border-style 需一致
border-bottom-right-radius <length>{1, 2} 0 border-radius 非 0 时,四边的 border-width 可不一致,四边的 border-color 和 border-style 需一致
border-radius 简写属性,支持解析但以展开属性为准
transition-property none / all / transform / opacity 等 all 基本都支持,暂不一一列举
transition-duration <time> 0
transition-timing-function <timing-function> <timing-function>
transition-delay <time> 0
transition 简写属性,支持解析但以展开属性为准
font 简写属性,支持解析但以展开属性为准;不支持 caption / icon 等系统字体;
font-size <length> 16px 不支持百分比;不支持 keyword (smaller..)
line-height normal / <number> / <length> / <percent> normal
text-align left / center / right / justify / start / end start
font-weight normal / bold / <float> normal
white-space normal / nowrap / normal
text-overflow clip / ellipsis clip 仅作用于 text 节点
word-spacing normal / <length> normal
letter-spacing normal / <length> normal
font-family serif / sans-serif / monospace / cursive / fantasy / <string>
font-style normal / italic normal
text-decoration-line none / underline / overline / line-through none 仅作用于 text 节点
text-decoration-style solid / double / dotted / dashed / wavy solid 仅作用于 text 节点
text-decoration-color <color> black 仅作用于 text 节点;默认值和 web 不同,web 默认值是 currentcolor
text-decoration 简写属性,支持解析但以展开属性为准;当前仅支持设置一种类型;暂不支持复合使用 text-decoration
text-shadow none / <color>? && <length>{2,3} none
backdrop-filter none / [<filter-function>] none 不支持 multi function;不支持 drop-shadow;不支持 url;与 opacity 混合有问题;blur 某些情况表现不一致;
filter none / [<filter-function>] none 不支持 multi function;不支持 drop-shadow;不支持 url;
mask-image none / <image> none 不支持多张图片
animation-delay <time> 0
animation-direction normal / reverse / alternate / alternate-reverse normal
animation-duration <time> 0
animation-fill-mode forwards / both none none 与 backwards 暂未支持,表现均为 forwards
animation-iteration-count infinite / <number> 1
animation-name none / <custom-ident> none
animation-timing-function <timing-function> <timing-function>
animation 简写属性,支持解析但以展开属性为准
will-change auto / contents auto 声明绘制边界,优化渲染性能

# 类型支持列表

类别 格式 支持度 备注
<length> auto
px
rem
em ×
rpx
vw
vh
vmin
vmax
ratio
env() 只支持 safe-area-inset-* 系列
calc()
<color> color keywords
transparent
currentColor × 考虑支持
rgb[a]
#RRGGBB / #RGB
hsl
hsla
<url> url()
<gradient> linear-gradient()
radial-gradient()
conic-gradient()
<image> <url>
<gradient>
<border-style> none
hidden
solid
dashed
dotted
<filter-function> brightness() 多个 function 暂不支持
contrast()
saturate()
huerotate()
invert()
opacity()
grayscale()
specia()
drop-shadow ×
<angle> deg
grad
rad
turn
<timing-function> ease
ease-in
ease-out
ease-in-out
linear
cubic-bezier
steps
step-start
step-end

# 开启默认Block布局

Skyline 下节点默认为 flex 布局,可通过以下配置切换为默认 block 布局。

平台 最低版本
Android 8.0.34
IOS 8.0.36
开发者工具 Nightly Build (1.06.2304262)
基础库 2.31.1

app.jsonpage.json 中配置:

rendererOptions: {
  "skyline": {
    "defaultDisplayBlock": true,
  }
}

# 开启默认ContentBox盒模型

Skyline 下节点默认为 border-box 盒模型,可通过以下配置切换为默认 content-box 盒模型。

平台 最低版本
Android 8.0.42
IOS 8.0.42
开发者工具 Nightly Build (1.06.2310092)
基础库 3.1.0

app.jsonpage.json 中配置:

rendererOptions: {
  "skyline": {
    "defaultContentBox": true,
  }
}

# 开启tag选择器全局匹配

Skyline 下 tag 选择器遵循样式隔离机制,而 WebView 下不受样式隔离约束,可通过 tagNameStyleIsolation: legacy 配置对齐 WebView 表现,若指定 tagNameStyleIsolation: isolated 则遵循样式隔离机制。

平台 最低版本
Android 8.0.51
IOS 8.0.51
开发者工具 Nightly Build (1.06.2409032)
基础库 3.6.0

app.jsonpage.json 中配置:

rendererOptions: {
  "skyline": {
    "tagNameStyleIsolation": "legacy",
  }
}