skyline-wxss

Skyline WXSS Style Support

Use Cases

• Check whether a CSS property/value is available under Skyline
• Troubleshoot WXSS styles not taking effect under Skyline
• Evaluate style compatibility when migrating from WebView to Skyline
• Learn about limitations when using advanced styles such as gradients, filters, and masks
• Look up the CSS property syntax supported by Skyline

Documentation Index

I want to...	Look up documentation
View basic data types and syntax symbols	references/basics.md
View layout/positioning/box model syntax	references/layout.md
View Flex layout syntax	references/flex.md
View background/border/filter/mask syntax	references/visual.md
View text/font syntax	references/text.md
View animation/transition/transform syntax	references/animation.md
Check whether a property is supported	Quick Reference in this document
Learn about the specific limitations of gradients/filters	The "Gradient and Filter Limitations" rules in this document
Check WXSS syntax	The "WXSS CLI" in this document

WXSS CLI

Be sure to call the skyline CLI to check WXSS and ensure correct usage.

npx skyline-cli --help

List all supported WXSS properties

npx skyline-cli wxss list

Read WXSS text from stdin and check the syntax

echo "view { color: red;  }" | npx skyline-cli wxss check --json

Check WXSS files in a Mini Program project

npx skyline-cli wxss check --json --miniprogram-root ${PROJECT_ROOT} --files pages/index/index.wxss pages/list/list.wxss

Mandatory Rules

NEVER: Use unsupported CSS properties

After the following properties are set, theydo not take effect：

Property	Category	Alternative
float	Layout	Use flex layout
contain	Layout	Use -wx-contain
resize	Layout	No alternative
writing-mode	Text	No alternative
text-indent	Text	Simulate with padding-left
overflow-wrap	Text	Use word-break
text-decoration-thickness	Text	No alternative
background-attachment	Background	No alternative
background-clip	Background	No alternative
background-origin	Background	No alternative
mask-origin / mask-clip / mask-mode	Mask	No alternative
justify-items	Flex	No alternative
list-style-type / list-style-image / list-style-position	List	No alternative

MUST: Use supported property values

Some properties are available butspecific values are not supported, and will be silently ignored:

Incorrect:

.container {
  display: grid;           /* grid 不支持 */
  position: sticky;        /* sticky 不支持 */
  overflow: auto;          /* auto 不支持 */
}

Correct:

.container {
  display: flex;           /* 使用 flex 替代 grid */
  position: relative;      /* sticky 需使用 sticky-header 组件 */
  overflow: hidden;        /* 使用 hidden，滚动用 scroll-view */
}

MUST: Pay attention to gradient limitations

Summary of gradient limitations:

• radial-gradient Only circle shapes are supported ( ellipseis not supported), only pxis supported for size, and only %
• linear-gradient Only % and fixed-length units (px, rpx, etc.) are supported for stop positions
• conic-gradient Fully supported (no additional limitations)

MUST: Pay attention to background/mask multi-value limitations

• background-image / mask-image Supports at most 2 values
• background-position Supports at most 2 sets of values
• background-repeat / background-size Multiple values are not supported

MUST: calc() does not support angle types

calc() Supports length calculations, butdoes not support angle calculations, angle values must be written directly.

MUST: text-overflow only takes effect on the text component

text-overflow: ellipsis Under Skyline,only takes effect on the <text> component, and on <view> it does not take effect. It is recommended to use the <text> component's overflow and max-lines properties.

⚠️ See skyline-components skill for details on the text component's property limitations.

NEVER: Use filter's url() and drop-shadow()

filter/backdrop-filter do not support url() and drop-shadow(), and alsodo not support combining multiple functions. Use box-shadow instead of drop-shadow。

Supported functions:blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia()。

MUST: text-decoration-line only supports a single value

Only a single value is supported (none, underline, overline, line-through), multiple value combinations such as underline line-through。

MUST: mask-image gradients are unavailable

mask-image 's linear-gradient() and radial-gradient() are not supported, only the url() form is available.

MUST: Note the partially effective behavior of shorthand properties

After the following CSS shorthand properties are expanded,some sub-properties do not take effect：

Shorthand property	Sub-properties that do not take effect
background	background-attachment, background-origin, background-clip
text-decoration	text-decoration-thickness
mask	mask-origin, mask-clip

💡 mask-position shorthandis effective: it is automatically expanded to mask-position-x + mask-position-y(similar to background-position mechanism).

Quick Reference

Layout Properties Quick Reference

Property	Supported values	Unsupported values
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	—	Not supported

Text Properties Quick Reference

Property	Supported values	Unsupported values
white-space	normal, nowrap	pre, pre-wrap, pre-line
font-weight	normal, bold, numeric value (100-900)	bolder, lighter
font-style	normal, italic	oblique
word-break	normal, break-all, keep-all	break-word(mapped to 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(single value only)	Multiple value combinations, blink
text-overflow	clip, ellipsis(⚠️ only takes effect on the text component)	—

Borders and Backgrounds Quick Reference

Property	Supported values	Unsupported values
border-*-style	none, solid, dashed, dotted	hidden, double, groove, ridge, inset, outset
background-repeat	repeat, repeat-x, repeat-y, no-repeat	space, round

Flex Properties (All Supported)

All defined values of the following Flex properties arefully supported： flex-direction, flex-wrap, align-items, align-self, align-content, justify-content, flex-grow, flex-shrink, flex-basis, order

Non-Standard Default Values

The default values of the following properties differ from the Web standards; note the following:

Property	Skyline default value	Web standard default value	Condition
display	flex	inline	defaultDisplayBlock: true when it is block
position	relative	static	—
box-sizing	border-box	content-box	defaultContentBox: true when it is content-box
flex-direction	column	row	defaultDisplayBlock: true when it is row
align-items	stretch	normal	defaultDisplayBlock: true when it is normal
text-align	start	left	—
mask-repeat	no-repeat	repeat	—

Other Fully Supported Properties

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(only auto/contents）, conic-gradient

Related Skills

Scenario	Recommended Skill	Description
Skyline JSON Configuration	skyline-config	rendererOptions affects the default display/flex-direction/align-items/box-sizing
Component Usage	skyline-components	scroll-view as a replacement for overflow:auto
Worklet Animation	skyline-worklet	Best practices for transform/opacity animations
Skyline Overview	skyline-overview	Rendering Engine Overview and Migration Guide

References Directory Structure

references/
├── animation.md
├── basics.md
├── flex.md
├── layout.md
├── text.md
└── visual.md