# Skyline WXSS 样式支持与差异

# 模块支持

模块 支持情况 备注
CSS Animation × 考虑支持,目前可用 worklet 动画替代
背景与边框 常用的基本支持,详见属性支持
盒子模型 只支持 border-box,没有 BFC
Flex 布局
字体 基本支持,也支持自定义字体
Positioned 布局 只支持 relative 和 absolute,fixed 可用 root-portal 组件替代
CSS Transition
CSS Variable × 待考虑
Media queries × 考虑支持,优先支持 DarkMode

# 选择器支持

类别 示例 支持度 备注
通配选择器 * {} ×
元素选择器 tag {}
类选择器 .class {}
ID 选择器 #id {}
分组选择器 a, b {}
直接子代选择器 a > b {}
后代选择器 a b {}
属性选择器 [attr] {} ×
一般兄弟选择器 a ~ b {} ×
紧邻兄弟选择器 a + b {} ×
伪选择器 :active {} / ::before {} × 计划支持 :first-child 和 :last-child

# 属性支持

样式属性 支持格式 默认值 备注
display none / flex flex 考虑支持 block
position relative / absolute relative fixed 可通过全局 absolute 实现;sticky 待考虑
overflow hidden / visible visible scroll 不支持,只能通过 scroll-view 实现;不支持单独设置 overflow-x/y
pointer-events auto / none auto
box-sizing border-box border-box
transform none / <transform-function> none
transform-origin left / center / right / top / bottom / <length>{1, 2} 50% 50%
z-index <float> 0 不支持层叠上下文,只对兄弟节点生效
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
jusitify-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
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 样式需一致
border-top-right-radius <length>{1, 2} 0 四边的 border 样式需一致
border-bottom-left-radius <length>{1, 2} 0 四边的 border 样式需一致
border-bottom-right-radius <length>{1, 2} 0 四边的 border 样式需一致
border-radius 简写属性,支持解析但以展开属性为准
transition-property none / all / transform / opacity 等 all 基本都支持,暂不一一列举
transition-duration <time> 0
transition-timing-function <timing-function> <timing-function>
transition-delay <time> 0
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
font-family serif / sans-serif / monosapce / cursive / fantasy / <string>
font-style normal / italic / oblique 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
backdrop-filter none / [<filter-function>] none 不支持 multi function;不支持 drop-shadow;不支持 url;与 opacity 混合有问题;blur 某些情况表现不一致;
filter none / [<filter-function>] none 不支持 multi function;不支持 drop-shadow;不支持 url;

# 类型支持列表

类别 格式 支持度 备注
<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()
<image> <url>
<gradient>
<image> none
hidden
solid
<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