# Skyline WXSS Style Support and Differences

# Module support

Modular	Support	Remarks
CSS Animation		Android 8.0.37，iOS 8.0.39, the support is shown in the table below
Background and Border		Commonly used basic support, see[Attribute support](#Attribute support)
Box model		Support border-box and Content-box, no BFC
Inline placement		Under development
Inline-Block placement		Only supported in text Use nested structures in components, full version development
Block placement		See also[Open default Block placement](#Turn on the default block layout)
Flex placement		Include inline-flex placement
Typeface		Basic support, also supports custom fonts
Positioned placement		Support is shown in the table below. sticky Can be used sticky-header/sticky-section Replace
CSS Transition
CSS Variable（CSS Variable)		Android 8.0.35，iOS 8.0.38
Media queries		Support only DarkMode
Font-face		Support only ttf format

# Selector Support

category	Example	Remarks
Supply selector	* {}
Element selector	tag {}
Class selector	.class {}
ID Selector	#id {}
Packet selector	a, b {}
Direct descendant selector	a > b {}
Offspring selector	a b {}
Property selector	[attr] {}
General Brother Selector	a b {}	8.0.49
Next to Brother Selector	a + b {}	8.0.49
Pseudo-class selector	:active {}	Support :first-child / :last-childWeixin 8.0.49 From (corresponding to Skyline 1.3.0) Support :not / :only-child / :emptyWeixin 8.0.50 From (corresponding to Skyline 1.3.3) Support :nth-child
Pseudo-element selector	::before {}	Support only ::before and ::after

# Attribute support

Style properties	Supported formats	Default value	Remarks
display	None / flex / block	flex	The default value can be obtained by[To configure](#Turn on the default block layout)to convert block
position	relative / absolute / fixed	relative	fixed In the WeChat client 8.0.43 Version started to support, only support relative to the window viewport Positioning, not supported top / left / bottom / right Default value auto Parsing, z-index Only works on sibling nodessticky Can be used sticky-header/sticky-section Replace
overflow	hidden / visible	visible	scroll Not supported, can only be obtained by scroll-view RealizationDoes not support separate settings 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	Cascading context is not supported and only works for sibling nodesNot supported in the scroll-view Application on the direct child node under
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			Abbreviated property that supports parsing but with expanded property
background-color	`<color>`	transparent
background-image	None / `<image>`	None	Does not support multiple images
background-size	contain / cover / `[<length> \| auto]{1, 2}`	auto
background-position	left / Center / right / top / bottom / `<length>`	0 0	Full support `<bg-position>`#, please refer to the MDN
background-repeat	repeat-x / repeat-y / repeat / No-repeat	repeat
background			Abbreviated property that supports parsing but with expanded property
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	The default value is the same as the web Different, web The default value is currentcolor
border-top-width	`<length>`	3
border-top-style	`<border-style>`	None
border-top-color	`<color>`	black	The default value is the same as the web Different, web The default value is currentcolor
border-right-width	`<length>`	3
border-right-style	`<border-style>`	None
border-right-color	`<color>`	black	The default value is the same as the web Different, web The default value is currentcolor
border-bottom-width	`<length>`	3
border-bottom-style	`<border-style>`	None
border-bottom-color	`<color>`	black	The default value is the same as the web Different, web The default value is currentcolor
border-width			Abbreviated property that supports parsing but with expanded property
border-style			Abbreviated property that supports parsing but with expanded property
border-color			Abbreviated property that supports parsing but with expanded property
border-left			Abbreviated property that supports parsing but with expanded property
border-right			Abbreviated property that supports parsing but with expanded property
border-top			Abbreviated property that supports parsing but with expanded property
border-bottom			Abbreviated property that supports parsing but with expanded property
border			Abbreviated property that supports parsing but with expanded property
box-shadow	None / inset? && `<length>{2,4}` && `<color>`?	None	Does not support multiple overlays
border-top-left-radius	`<length>{1, 2}`	0	border-radius wrong 0 When the four sides border-width Are inconsistent. The quadrilateral border-color and border-style Need for consistency
border-top-right-radius	`<length>{1, 2}`	0	border-radius wrong 0 When the four sides border-width Are inconsistent. The quadrilateral border-color and border-style Need for consistency
border-bottom-left-radius	`<length>{1, 2}`	0	border-radius wrong 0 When the four sides border-width Are inconsistent. The quadrilateral border-color and border-style Need for consistency
border-bottom-right-radius	`<length>{1, 2}`	0	border-radius wrong 0 When the four sides border-width Are inconsistent. The quadrilateral border-color and border-style Need for consistency
border-radius			Abbreviated property that supports parsing but with expanded property
transition-property	None / all / transform / opacity etc.	all	Basically all support, not to enumerate
transition-duration	`<Time>`	0
transition-timing-function	`<timing-function>`	`<timing-function>`
transition-delay	`<Time>`	0
transition			Abbreviated property that supports parsing but with expanded property
font			Abbreviated property that supports parsing but with expanded propertyNot support caption / icon Etc. System Font
font-size	`<length>`	16px	Percentage not supportedNot support 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	Acts only on text node
word-spacing	normal / `<length>`	normal
letter-spacing	normal / `<length>`	normal
font-family	serif / sans-serif / minivan / cursive / fantasy / `<string>`
font-style	normal / italic	normal
text-decoration-line	None / Underline / Overline / line-through	None	Acts only on text node
text-decoration-style	solid / double / dotted / dashed / wavy	solid	Acts only on text node
text-decoration-color	`<color>`	black	Acts only on text nodeDefault values and web Different, web The default value is currentcolor
text-decoration			Abbreviated property that supports parsing but with expanded propertyCurrently only one type is supported.Does not support compound use text-decoration
text-shadow	None / `<color>`? && `<length>{2,3}`	None
backdrop-filter	None / `[<filter-function>]`	None	Not support multi functionNot support drop-shadowNot support urland opacity Mixing is problematic.blur Some cases are inconsistent
filter	None / `[<filter-function>]`	None	Not support multi functionNot support drop-shadowNot support url
mask-image	None / `<image>`	None	Does not support multiple images
animation-delay	`<Time>`	0
animation-direction	normal / reverse / alternate / alternate-reverse	normal
animation-duration	`<Time>`	0
animation-fill-mode	forwards / both	None	None and backwards Not yet supported, all are forwards
animation-iteration-count	Infinite / `<number>`	1
animation-name	None / `<custom-ident>`	None
animation-timing-function	`<timing-function>`	`<timing-function>`
animation			Abbreviated property that supports parsing but with expanded property
will-change	auto / contents	auto	Declare draw boundaries and optimize rendering performance

# Type Support List

category	format	Remarks
< length>	auto
	px
	rem
	em
	rpx
	vw
	vh
	vmin
	vmax
	Ratio
	env()	Support only safe-area-inset-* series
	calc()
< color>	color keywords
	transparent
	currentColor	Consider Support
	rgb[a]
	#RRGGBB / #RGB
	hsl
	hsla
< url>	url()
< gradient>	linear-gradient()
	radial gradient ()
	conic-gradient()
< image>	< url>
< image>	< gradient>
< border-style>	None
	hidden
	solid
	dashed
	dotted
< filter-function>	brightness()	many function Not yet supported
	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

# Turn on the default block layout

Skyline The lower node defaults to flex Layout, which can be switched to the default by the following configuration block Layout.

platform	Minimum version
Android	8.0.34
IOS	8.0.36
Developer Tools	Nightly Build (1.06.2304262)
Base library	2.31.1

in app.json or page.json In Configuration:

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

# Open the default ContentBox box model

Skyline The lower node defaults to border-box Box model, which can be switched to the default with the following configuration content-box Box model.

platform	Minimum version
Android	8.0.42
IOS	8.0.42
Developer Tools	Nightly Build (1.06.2310092)
Base library	3.1.0

in app.json or page.json In Configuration:

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

# Enable tag selector global match

Skyline lower tag The selector follows the style isolation mechanism, and the WebView Is not constrained by style isolation, and can be accessed by tagNameStyleIsolation: legacy Configure alignment WebView Performance, if specified tagNameStyleIsolation: isolated The style isolation mechanism is followed.

platform	Minimum version
Android	8.0.51
IOS	8.0.51
Developer Tools	Nightly Build (1.06.2409032)
Base library	3.6.0

in app.json or page.json In Configuration:

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