<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 | ⤶ | align-content | auto / flex-end / flex-start / center / stretch / space-between / space-around / baseline / stretch | | align-items | as above |⤶ | align-self | as above |⤶ | backdrop-filter | blur(Length) / saturate(Length) | `backdrop-filter: blur(10px) saturate(80%)` |⤶ | background | Fills in the properties below |⤶ | background-color | Color |⤶ | background-image | url(string) / linear-gradient(Color, Color) / radial-gradient(Color, Color) | ⤶ | background-position | Length, Length (optional) | `background-position: 10px`, `background-position: 10px 15px` |⤶ | background-repeat | no-repeat / repeat-x / repeat-y / repeat |⤶ | background-size | Length, Length (optional) | `background-size: 10px`, `background-size: 10px 15px` |⤶ | border | Fills in the properties below | `border: 10px solid white` |⤶ | border-bottom | Length | | border-bottom-color | Color | | border-bottom-left-radius | Length | | border-bottom-right-radius | Length | | border-bottom-width | Length | | border-image | | border-left | Length | | border-left-color | Color | | border-left-width | Length | | border-radius | Length | `border-radius: 10px`, `border-radius: 10px 0px 10px 10px`⤶ | border-right | Length | | border-right-color | Color |⤶ | border-right-width | Length | | border-top | Length | | border-top-color | Color | | border-top-left-radius | | border-top-right-radius |⤶ | border-top-width | Length |⤶ | bottom | Length |⤶ | box-shadow | Length, Length (optional), Length (blur, optional), Length (spread, optional), Color⤶ | color | Color |⤶ | cursor | none / text / progress / wait / pointer | | pointer-events| all / none | ⤶ | mix-blend-mode | normal / lighten / multiply | ⤶ | display | none / flex |⤶ | flex-basis | Length |⤶ | flex-direction | column / column-reverse / row-reverse / row |⤶ | flex-grow | float |⤶ | flex-shrink | float |⤶ | flex-wrap | wrap / wrap-reverse / nowrap |⤶ | font-color | Color |⤶ | font-family | string |⤶ | font-size | Length |⤶ | font-weight | int |⤶ | height | Length |⤶ | justify-content | center / flex-end / flex-start / space-between / space-around / space-evenly |⤶ | left | Length |⤶ | margin | Fills in the properties below |⤶ | margin-bottom | Length |⤶ | margin-left | Length |⤶ | margin-right | Length |⤶ | margin-top | Length |⤶ | max-height | Length |⤶ | max-width | Length |⤶ | min-height | Length |⤶ | min-width | Length |⤶ | mix-blend-mode | normal / lighten / multiply |⤶ | opacity | Float |⤶ | overflow | hidden / scroll / visible |⤶ | padding | Fills in the properties below |⤶ | padding-bottom | Length |⤶ | padding-left | Length |⤶ | padding-right | Length |⤶ | padding-top | Length |⤶ | pointer-events | none / all |⤶ | position | Length, Length (optional) |⤶ | right | Length |⤶ | text-align | center / left / right |⤶ | text-shadow | Length, Length (optional), Length (blur, optional), Length (spread, optional), Color⤶ | top | Length |⤶ | transform | Fills in the properties below |⤶ | transform-origin |⤶ | transform-origin-x | Length |⤶ | transform-origin-y | Length |⤶ | transition | Fills in the properties below |⤶ | transition-delay | float |⤶ | transition-duration | float |⤶ | transition-property | string |⤶ | transition-timing-function | linear / ease / ease-in-out / ease-out / ease-in / bounce-in / bounce-out / bounce-in-out |⤶ | white-space | normal / nowrap |⤶ | width | Length |⤶ | z-index | int |⤶ # 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 |