# 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
伪元素选择器	::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()	✓
<gradient>	radial-gradient()	✓
<image>	<url>	✓
<image>	<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.json 或 page.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.json 或 page.json 中配置：

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