skyline-wxss
Skyline WXSS 样式支持技能。提供 Skyline 支持的 CSS 属性、值和限制信息。触发关键词:WXSS、CSS 支持、样式兼容性、属性支持、不支持的属性、display grid、position sticky、overflow、filter、渐变、gradient、linear-gradient、radial-gradient、conic-gradient、border-style、white-space、font-weight、text-decoration、text-overflow、aspect-ratio、will-change、calc、env、mask、mask-
By wechat-miniprogram · 805 installs
npx skills add wechat-miniprogram/skyline-skills --skill skyline-wxss
Source repository · Upstream listing
Skyline WXSS 样式支持
适用场景
检查某个 CSS 属性/值在 Skyline 下是否可用
排查 WXSS 样式在 Skyline 下不生效的问题
从 WebView 迁移到 Skyline 时评估样式兼容性
使用渐变、滤镜、遮罩等高级样式时了解限制
查阅 Skyline 支持的 CSS 属性语法
文档索引
我想要... 查阅文档
查看基础数据类型与语法符号 references/basics.md
查看布局/定位/盒模型语法 references/layout.md
查看 Flex 布局语法 references/flex.md
查看背景/边框/滤镜/遮罩语法 references/visual.md
查看文本/字体语法 references/text.md
查看动画/过渡/变换语法 references/animation.md
查看某属性是否支持 本文档 Quick Reference
了解渐变/滤镜的具体限制 本文档「渐变与滤镜限制」规则
检查 WXSS 语法 本文档 「WXSS CLI」
WXSS CLI
请务必调用 skyline CLI 对 WXSS 进行检查,确保用法正确。
列出所有支持的 WXSS 属性
从 stdin 读取 WXSS 文本并检查语法
检查小程序工程内的 WXSS 文件
强制规则
NEVER: 使用不支持的 CSS 属性
以下属性设置后 不生效 :
属性 分类 替代方案
float 布局 使用 flex 布局
contain 布局 使用 wx contain
resize 布局 无替代
writing mode 文本 无替代
text indent 文本 使用 padding left 模拟
overflow wrap 文本 使用 word break
text decoration thickness 文本 无替代
background attachment 背景 无替代
background clip 背景 无替代
background origin 背景 无替代
mask origin / mask clip / mask mode 遮罩 无替代
justify items Flex 无替代
list style type / list style image / list style position 列表 无替代
MUST: 使用支持的属性值
部分属性可用但 特定值不支持 ,会被静默忽略:
Incorrect:
Correct:
MUST: 注意渐变限制
渐变限制汇总:
radial gradient 仅支持 circle 形状(不支持 ellipse ),尺寸仅支持 px ,颜色停止仅支持 %
linear gradient 停止位置仅支持 % 和固定长度单位(px、rpx 等)
conic gradient 完全支持(无额外限制)
MUST: 注意背景/遮罩多值限制
background image / mask image 最多支持 2 个值
background position 最多支持 2 组值
background repeat / background size 不支持多组值
MUST: calc() 不支持角度类型
calc() 支持长度计算,但 不支持角度计算 ,需直接写角度值。
MUST: text overflow 仅在 text 组件生效
text overflow: ellipsis 在 Skyline 下 仅在 <text 组件上生效 ,在 <view 上不生效。推荐使用 <text 组件的 overflow 和 max lines 属性。
⚠️ 详见 skyline components 技能了解 text 组件的属性限制。
NEVER: 使用 filter 的 url() 和 drop shadow()
filter/backdrop filter 不支持 url() 和 drop shadow() ,也 不支持多个函数组合 。用 box shadow 替代 drop shadow 。
支持的函数: blur() , brightness() , contrast() , grayscale() , hue rotate() , invert() , opacity() , saturate() , sepia() 。
MUST: text decoration line 仅支持单值
仅支持单个值( none , underline , overline , line through ),不支持多值组合如 underline line through 。
MUST: mask image 渐变不可用
mask image 的 linear gradient() 和 radial gradient() 不支持 ,仅 url() 形式可用。
MUST: 注意简写属性的部分有效行为
以下 CSS 简写属性在展开后, 部分子属性不生效 :
简写属性 不生效的子属性
background background attachment , background origin , background clip
text decoration text decoration thickness
mask mask origin , mask clip
💡 mask position 简写 有效 :会自动展开为 mask position x + mask position y (类似 background position 的机制)。
Quick Reference
布局属性速查
属性 支持的值 不支持的值
display none , block , inline , inline block , flex , inline flex grid , flow root
position static , relative , absolute , fixed sticky
overflow visible , hidden auto , scroll , overflow x , overflow y
visibility visible , hidden collapse
box sizing content box , border box padding box
aspect ratio auto , <number , <number /<number —
content none , normal , <string , <url —
direction — 不支持
文本属性速查
属性 支持的值 不支持的值
white space normal , nowrap pre , pre wrap , pre line
font weight normal , bold , 数值(100 900) bolder , lighter
font style normal , italic oblique
word break normal , break all , keep all break word (映射为 normal)
vertical align baseline , top , middle , bottom text top , text bottom
text align left , center , right , justify , start , end justify all , match parent
text decoration line none , underline , overline , line through (仅单值) 多值组合, blink
text overflow clip , ellipsis (⚠️ 仅 text 组件生效) —
边框与背景速查
属性 支持的值 不支持的值
border style none , solid , dashed , dotted hidden , double , groove , ridge , inset , outset
background repeat repeat , repeat x , repeat y , no repeat space , round
Flex 属性(全部支持)
以下 Flex 属性的所有定义值 完全支持 :
flex direction , flex wrap , align items , align self , align content , justify content , flex grow , flex shrink , flex basis , order
非标准默认值
以下属性的默认值与 Web 标准不同,需注意:
属性 Skyline 默认值 Web 标准默认值 条件
display flex inline defaultDisplayBlock: true 时为 block
position relative static —
box sizing border box content box defaultContentBox: true 时为 content box
flex direction column row defaultDisplayBlock: true 时为 row
align items stretch normal defaultDisplayBlock: true 时为 normal
text align start left —
mask repeat no repeat repeat —
完全支持的其他属性
pointer events , text decoration style , background size , transform , opacity , transition , animation , border radius , box shadow , text shadow , color , font size , font family , font feature settings , line height , letter spacing , word spacing , z index , aspect ratio , content , will change (仅 auto / contents ), conic gradient
相关技能
场景 推荐技能 说明
Skyline JSON 配置 skyline config rendererOptions 影响默认 display/flex direction/align items/box sizing
组件使用 skyline components scroll view 替代 overflow:auto
Worklet 动画 skyline worklet transform/opacity 动画最佳实践
Skyline 概览 skyline overview 渲染引擎概览与迁移指南
References 目录结构