Skyline WXSS 样式支持与差异

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 / <transform-function>	none
transform-origin	left / center / right / top / bottom / {1, 2}	50% 50%
z-index	<float>	0	不支持层叠上下文，只对兄弟节点生效；不支持在 scroll-view 下的直接子节点上应用
visibility	visible / hidden	visible
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	``	auto
order	<float>	0
gap	<length>	0
flex			简写属性，支持解析但以展开属性为准
background-color	``	transparent
background-image	none / ``	none	不支持多张图片
background-size	contain / cover / [`[	auto]{1, 2}`](https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/wxss.html#wxss-length)	auto
background-position	left / center / right / top / bottom / ``	0 0	完全支持 <bg-position>#，请参考 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	<time>	0
transition-timing-function	``	``
transition-delay	<time>	0
transition			简写属性，支持解析但以展开属性为准
font			简写属性，支持解析但以展开属性为准；不支持 caption / icon 等系统字体;
font-size	``	16px	不支持百分比；不支持 keyword (smaller..)
line-height	normal / <number> / `` / <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 / ``	normal
letter-spacing	normal / ``	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	``	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	<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	``	``
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	✓

开启默认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,
  }
}

开启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.json 或 page.json 中配置：

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