Revision Difference
supported-style-properties#529679
<cat>Dev.UI</cat>⤶
<title>Supported Style Properties</title>⤶
⤶
We try to keep as close to standard web styles as possible - but not every property is implemented. We'll use this page to highlight any differences.⤶
⤶
# Common Types⤶
⤶
| Name | Description / Notes | Examples |⤶
|-------------------|-----|⤶
| float | A standard float | `flex-grow: 10`⤶
| Color | Can have alpha. | `color: #fff`, `color: #ffffffaa`, `color: rgba( red, 0.5 )` |⤶
| Length | A dimension, pixel or relative. | `left: 10px`, `left: 10%` |⤶
⤶
# Supported Properties⤶
⤶
| Name | Description / Notes | Examples |⤶
|-------------------|-----|⤶
| color | Color |⤶
| width | Length|⤶
| min-width | Length|⤶
| max-width | Length|⤶
| height | Length|⤶
| min-height | Length|⤶
| max-height | Length|⤶
| left | Length|⤶
| right | Length|⤶
| top | Length|⤶
| bottom | Length|⤶
| opacity | Float |⤶
| background-color | Color |⤶
| padding | Sugar |⤶
| padding-left | Length |⤶
| padding-right | Length |⤶
| padding-top | Length |⤶
| padding-bottom | Length |⤶
| margin-left | Length |⤶
| margin-right | Length |⤶
| margin-top | Length |⤶
| margin-bottom | Length |⤶
| border-radius | Fills in the properties below | `border-radius: 10px`, `border-radius: 10px 0px 10px 10px`⤶
| border-top-left-radius | Length |⤶
| border-top-right-radius | Length |⤶
| border-bottom-right-radius | Length |⤶
| border-bottom-left-radius | Length |⤶
| border | Fills in the properties below | `border: 10px solid white`⤶
| border-left-width | Length | ⤶
| border-top-width | Length | ⤶
| border-right-width | Length | ⤶
| border-bottom-width | Length | ⤶
| border-left-color | Color | ⤶
| border-top-color | Color | ⤶
| border-right-color | Color | ⤶
| border-bottom-color | Color | ⤶
| font-size | Length | ⤶
| font-color | Length | ⤶
| font-weight | int | ⤶
| flex-basis | Length | ⤶
| flex-grow | float | ⤶
| flex-shrink | float | ⤶
| transform-origin-x | Length | ⤶
| transform-origin-y | Length | ⤶
| z-index | float | ⤶
| font-family | string | ⤶
| cursor | none / text / progress / wait / pointer | ⤶
| pointer-events| all / none | ⤶
| mix-blend-mode | normal / lighten / multiply | ⤶
⤶
# New Properties⤶
⤶
⤶
| Name | Description / Notes | Examples |⤶
|-------------------|-----|⤶
| aspect-ratio | float: Added by Facebook Flexbox. Element tries to keep its aspect ratio. | ⤶
| background-image-tint | Color: multiplies the background image by this color | ⤶
⤶