Mini Program
取消
Development
中文
EN
取消
  • Guide

    • # Skyline WXSS Style Support & Differences

    # Module Support

    Modular Status of support Remarks
    CSS Animation ✓ Android 8.0.37, iOS 8.0.39, support is shown in the table below
    Background and Borders ✓ Common basic support, see attribute support
    Model of the box ✓ Support for border-box and content-box, no BFC
    Inline layout × In development
    Inline-Block layout × Support for nested structures in text components only, full version in development
    Block layout ✓ See Turn on default block layout
    Flex layout ✓ Includes inline-flex layout
    Typeface ✓ Basic support, also support for custom fonts
    Positioned layout ✓ Support is reflected in the table below.Sticky can be replaced by sticky-header / sticky-section
    CSS Transition ✓
    CSS Variable (CSS Variable) ✓ Android 8.0.35, iOS 8.0.38
    Media queries ✓ DarkMode only supported
    Font-face ✓ Only TTF format is supported

    # Selector Support

    category Example degree of support Remarks
    Universal Selector * {} ×
    Element Selector tag {} ✓
    Class Selector .class {} ✓
    ID Selector #id {} ✓
    Group Selection Selector a, b {} ✓
    Direct Substitute Selector a > b {} ✓
    Progenitor selector a b {} ✓
    Attribute Selector [attr] {} ×
    General Brother Selection Kit a ~ b {} ✓ 8.0.49
    Next to Brother Selection Device a + b {} ✓ 8.0.49
    Pseudo class selector :active {} ✓ Support: first-child /: last-child;WeChat from 8.0.49 (corresponding to Skyline 1.3.0) Support: not /: only-child /: empty;WeChat from 8.0.50 (corresponding to Skyline 1.3.3) Support: nth-child
    Pseudo Element Selector ::before {} ✓ Only support:: before and:: after

    # Attribute Support

    Style properties Supporting formats Default values Remarks
    display none / flex / block flex The default value can be changed to block by configuring](#开启默认Block布局) with [
    position relative / absolute / fixed relative Fixed in WeChat Client 8.0.43 version, only support relative to the window viewport positioning, not support top / left / bottom / rightThe default value auto resolves, z-index only works on sibling nodes;Sticky can be replaced by sticky-header / sticky-section
    overflow hidden / visible visible Scroll is not supported and can only be implemented by scroll-view; Does not support setting overflow-x / y individually
    pointer-events auto / none auto
    box-sizing border-box / content-box border-box
    transform none / `` none
    transform-origin left / center / right / top / bottom / {1, 2} 50% 50%
    z-index `` 0 Does not support cascading contexts and only applies to sibling nodes; Application on direct child nodes under scroll-view is not supported
    visibility visible / hidden visible
    color `` black
    opacity `` 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 `` 0
    flex-shrink `` 1
    flex-basis `` auto
    order `` 0
    gap `` 0
    flex Shorten the properties, support parsing, but expand the properties
    background-color `` transparent
    background-image none / <img></img> none Multiple images are not supported
    background-size contain / cover / [|auto]{1, 2} auto
    background-position left / center / right / top / bottom / `` 0 0 Full support "#, please refer to MDN
    background-repeat repeat-x / repeat-y / repeat / no-repeat repeat
    background Shorten the properties, support parsing, but expand the properties
    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 The default is different from web, web default is currentcolor
    border-top-width `` 3
    border-top-style `` none
    border-top-color `` black The default is different from web, web default is currentcolor
    border-right-width `` 3
    border-right-style `` none
    border-right-color `` black The default is different from web, web default is currentcolor
    border-bottom-width `` 3
    border-bottom-style `` none
    border-bottom-color `` black The default is different from web, web default is currentcolor
    border-width Shorten the properties, support parsing, but expand the properties
    border-style Shorten the properties, support parsing, but expand the properties
    border-color Shorten the properties, support parsing, but expand the properties
    border-left Shorten the properties, support parsing, but expand the properties
    border-right Shorten the properties, support parsing, but expand the properties
    border-top Shorten the properties, support parsing, but expand the properties
    border-bottom Shorten the properties, support parsing, but expand the properties
    border Shorten the properties, support parsing, but expand the properties
    box-shadow none / inset? && {2,4} && ``? none No multiple superposition is supported
    border-top-left-radius {1, 2} 0 When the border-radius is not 0, the border-width of the four sides can be inconsistent, and the border-color and border-style of the four sides need to be consistent
    border-top-right-radius {1, 2} 0 When the border-radius is not 0, the border-width of the four sides can be inconsistent, and the border-color and border-style of the four sides need to be consistent
    border-bottom-left-radius {1, 2} 0 When the border-radius is not 0, the border-width of the four sides can be inconsistent, and the border-color and border-style of the four sides need to be consistent
    border-bottom-right-radius {1, 2} 0 When the border-radius is not 0, the border-width of the four sides can be inconsistent, and the border-color and border-style of the four sides need to be consistent
    border-radius Shorten the properties, support parsing, but expand the properties
    transition-property None / all / transform / opacity etc all I'm basically in favour, but I won't list them all for a moment.
    transition-duration 0
    transition-timing-function `` ``
    transition-delay `` 0
    transition Shorten the properties, support parsing, but expand the properties
    font Shorten properties, support parsing, but expand properties; System fonts such as caption / icon are not supported;
    font-size `` 16px No support for percentages; Does not support keyword (smaller..)
    line-height normal / / [](#wxss-length) /`` normal
    text-align left / center / right / justify / start / end start
    font-weight normal / bold / `` normal
    white-space normal / nowrap / normal
    text-overflow clip / ellipsis clip Works only on the text node
    word-break normal / break-all normal
    word-spacing normal / `` normal
    letter-spacing normal / `` normal
    font-family serif / sans-serif / monospace / cursive / fantasy / ``
    font-style normal / italic normal
    text-decoration-line none / underline / overline / line-through none Works only on the text node
    text-decoration-style solid / double / dotted / dashed / wavy solid Works only on the text node
    text-decoration-color `` black Only works on the text node; The default is different from the web, the web default is currentcolor
    text-decoration Shorten properties, support parsing, but expand properties; Only one type is currently supported; Do not support composite use of text-decoration
    text-shadow none / ``? && {2,3} none
    backdrop-filter none / [] none Does not support multi function; Does not support drop-shadow; URL is not supported; Mixed with opacity is problematic; Blur in some cases;
    filter none / [] none Does not support multi function; Does not support drop-shadow; URL is not supported;
    mask-image none / <img></img> none Multiple images are not supported
    animation-delay `` 0
    animation-direction normal / reverse / alternate / alternate-reverse normal
    animation-duration 0
    animation-fill-mode forwards / both none None and backwards are not supported, both are forwards
    animation-iteration-count infinite / `` 1
    animation-name none / `` none
    animation-timing-function `` ``
    animation Shorten the properties, support parsing, but expand the properties
    will-change auto / contents auto Declarate drawing boundaries to optimize rendering performance

    # List of Type Support

    类别 格式 支持度 备注
    <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() ✓
    radial-gradient() ✓
    conic-gradient() ✓
    <image> <url> ✓
    <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 ✓

    # Turn on the default block layout

    Nodes under Skyline default to flex layout, can be switched to the default block layout with the following configuration.

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

    Configure inapagejsonorpage.json:

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

    # Open the default ContentBox box model

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

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

    Configure inapagejsonorpage.json:

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

    # Enable tag selector global match

    In Skyline, the tag selector follows style isolation, while in WebView, it is not constrained by style isolation and can be accessed viatagNameStyleIsolation: legacyConfigure the alignment WebView presentation, following the style isolation mechanism if you specifytagNameStyleIsolation: isolated.

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

    Configure inapagejsonorpage.json:

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

    # Open scroll-view automatically open

    Skyline scroll-view default needs to specify the width and height to open, you can switch to automatically open according to the content by the following configuration.

    platform Minimum version
    Android 8.0.54
    IOS 8.0.54
    Infrastructure 3.7.2

    Configure inapagejsonorpage.json:

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

    # Enable keyframe style global sharing

    The @ keyframe rule in Skyline follows style segregation, while in WebView it is not constrained by style segregation and can be accessed viatagNameStyleIsolation: legacyConfigure the alignment WebView presentation, following the style isolation mechanism if you specifytagNameStyleIsolation: isolated.

    platform Minimum version
    Android 8.0.57
    IOS 8.0.57
    Infrastructure 3.8.0

    Configure inapagejsonorpage.json:

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