樱花视频 - # 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；微信 8.0.50 起（对应 Skyline 1.3.3）支持 :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 /	none
transform-origin	left / center / right / top / bottom / `{1, 2}`	50% 50%
z-index		0	不支持层叠上下文，只对兄弟节点生效；不支持在 scroll-view 下的直接子节点上应用
visibility	visible / hidden	visible
color		black
opacity		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		0
flex-shrink		1
flex-basis		auto
order		0
gap		0
flex			简写属性，支持解析但以展开属性为准
background-color		transparent
background-image	none /	none	不支持多张图片
background-size	contain / cover / `[ \| auto]{1, 2}`	auto
background-position	left / center / right / top / bottom /	0 0	完全支持 #，请参考 MDN
background-repeat	repeat-x / repeat-y / repeat / no-repeat	repeat
background			简写属性，支持解析但以展开属性为准
width		auto
height		auto
min-width		auto
min-height		none
max-width		auto
max-height		none
left		auto
right		auto
top		auto
bottom		auto
padding	`{1,4}`	0 0 0 0
padding-left		0
padding-top		0
padding-right		0
padding-bottom		0
margin	`{1,4}`	0 0 0 0
margin-left		0
margin-top		0
margin-right		0
margin-bottom		0
border-left-width		3
border-left-style		none
border-left-color		black	默认值与 web 不同， web 默认值是 currentcolor
border-top-width		3
border-top-style		none
border-top-color		black	默认值与 web 不同， web 默认值是 currentcolor
border-right-width		3
border-right-style		none
border-right-color		black	默认值与 web 不同， web 默认值是 currentcolor
border-bottom-width		3
border-bottom-style		none
border-bottom-color		black	默认值与 web 不同， web 默认值是 currentcolor
border-width			简写属性，支持解析但以展开属性为准
border-style			简写属性，支持解析但以展开属性为准
border-color			简写属性，支持解析但以展开属性为准
border-left			简写属性，支持解析但以展开属性为准
border-right			简写属性，支持解析但以展开属性为准
border-top			简写属性，支持解析但以展开属性为准
border-bottom			简写属性，支持解析但以展开属性为准
border			简写属性，支持解析但以展开属性为准
box-shadow	none / inset? && `{2,4}` && ?	none	不支持多个叠加
border-top-left-radius	`{1, 2}`	0	border-radius 非 0 时，四边的 border-width 可不一致，四边的 border-color 和 border-style 需一致
border-top-right-radius	`{1, 2}`	0	border-radius 非 0 时，四边的 border-width 可不一致，四边的 border-color 和 border-style 需一致
border-bottom-left-radius	`{1, 2}`	0	border-radius 非 0 时，四边的 border-width 可不一致，四边的 border-color 和 border-style 需一致
border-bottom-right-radius	`{1, 2}`	0	border-radius 非 0 时，四边的 border-width 可不一致，四边的 border-color 和 border-style 需一致
border-radius			简写属性，支持解析但以展开属性为准
transition-property	none / all / transform / opacity 等	all	基本都支持，暂不一一列举
transition-duration		0
transition-timing-function
transition-delay		0
transition			简写属性，支持解析但以展开属性为准
font			简写属性，支持解析但以展开属性为准；不支持 caption / icon 等系统字体;
font-size		16px	不支持百分比；不支持 keyword (smaller..)
line-height	normal / / /	normal
text-align	left / center / right / justify / start / end	start
font-weight	normal / bold /	normal
white-space	normal / nowrap / normal
text-overflow	clip / ellipsis	clip	仅作用于 text 节点
word-break	normal / break-all	normal
word-spacing	normal /	normal
letter-spacing	normal /	normal
font-family	serif / sans-serif / monospace / cursive / fantasy /
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		black	仅作用于 text 节点；默认值和 web 不同，web 默认值是 currentcolor
text-decoration			简写属性，支持解析但以展开属性为准；当前仅支持设置一种类型；暂不支持复合使用 text-decoration
text-shadow	none / ? && `{2,3}`	none
backdrop-filter	none / `[]`	none	不支持 multi function；不支持 drop-shadow；不支持 url；与 opacity 混合有问题；blur 某些情况表现不一致；
filter	none / `[]`	none	不支持 multi function；不支持 drop-shadow；不支持 url；
mask-image	none /	none	不支持多张图片
animation-delay		0
animation-direction	normal / reverse / alternate / alternate-reverse	normal
animation-duration		0
animation-fill-mode	forwards / both	none	none 与 backwards 暂未支持，表现均为 forwards
animation-iteration-count	infinite /	1
animation-name	none /	none
animation-timing-function
animation			简写属性，支持解析但以展开属性为准
will-change	auto / contents	auto	声明绘制边界，优化渲染性能

# 类型支持列表

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