Stylesheets
Takumi aims to support a wide range of CSS properties, read this to understand how to use them.
How is it implemented?
Takumi uses Taffy to layout the positions, and cosmic_text to render the text, so it mostly depends on the features that these two libraries support.
But for box shadow and linear gradient, Takumi has its own implementation.
CSS Properties
We support CSS values parsing or structured values parsing.
You can check the Style interface in takumi-helpers or Style struct to see how structured values are parsed.
Compatibility Matrix
| Property | Property Expanded | Supported Values | Inherited |
|---|---|---|---|
display | Supported | No | |
position | Supported | No | |
width | Supported | No | |
height | Supported | No | |
maxWidth | Supported | No | |
maxHeight | Supported | No | |
minWidth | Supported | No | |
minHeight | Supported | No | |
aspectRatio | Supported | No | |
padding | paddingTop, paddingRight, paddingBottom, paddingLeft | Supported | No |
margin | marginTop, marginRight, marginBottom, marginLeft | Supported | No |
inset | top, right, bottom, left | Supported | No |
borderWidth | borderWidthTop, borderWidthRight, borderWidthBottom, borderWidthLeft | Supported | No |
flexDirection | Supported | No | |
justifyContent | Supported | No | |
alignContent | Supported | No | |
justifyItems | Supported | No | |
alignItems | Supported | No | |
alignSelf | Supported | No | |
flexWrap | Supported | No | |
flexBasis | Supported | No | |
flexGrow | Supported | No | |
flexShrink | Supported | No | |
gap | Supported | No | |
objectFit | Supported | No | |
backgroundImage | Supported | No | |
backgroundColor | Supported | No | |
boxShadow | Supported | No | |
gridAutoColumns | Supported | No | |
gridAutoRows | Supported | No | |
gridAutoFlow | Supported | No | |
gridColumn | Supported | No | |
gridRow | Supported | No | |
gridTemplateColumns | Supported | No | |
gridTemplateRows | Supported | No | |
gridTemplateAreas | Supported | No | |
borderRadius | borderRadiusTop, borderRadiusRight, borderRadiusBottom, borderRadiusLeft | Supported | Yes |
boxSizing | Supported | Yes | |
textOverflow | Supported | Yes | |
textTransform | Supported | Yes | |
textStyle | Supported | Yes | |
borderColor | Supported | Yes | |
color | Supported | Yes | |
fontSize | Supported | Yes | |
fontFamily | Supported | Yes | |
lineHeight | Supported | Yes | |
fontWeight | Supported | Yes | |
lineClamp | Supported | Yes | |
textAlign | Supported | Yes | |
letterSpacing | Supported | Yes | |
imageRendering | Supported | Yes | |