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 Parley to layout the text, so it mostly depends on the features that these two libraries support.
But for transform, 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-rs/helpers or Style struct on docs.rs to see how structured values are parsed.
All Supported Properties
| Property | Property Expanded | Supported Values |
|---|---|---|
display | flex, grid, block, inline | |
position | relative, absolute | |
width | Supported | |
height | Supported | |
maxWidth | Supported | |
maxHeight | Supported | |
minWidth | Supported | |
minHeight | Supported | |
aspectRatio | Supported | |
padding | paddingTop, paddingRight, paddingBottom, paddingLeft | Supported |
margin | marginTop, marginRight, marginBottom, marginLeft | Supported |
inset | top, right, bottom, left | Supported |
border | borderWidth (borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth), borderColor | Only solid style is supported |
borderRadius | borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius | Supported |
flex | flexBasis | Supported |
flexGrow | Supported | |
flexShrink | Supported | |
| Flexbox | flexDirection | Supported |
justifyContent | Supported | |
justifySelf | Supported | |
alignContent | Supported | |
justifyItems | Supported | |
alignItems | Supported | |
alignSelf | Supported | |
justifySelf | Supported | |
flexWrap | nowrap, wrap, wrap-reverse | |
gap | Supported | |
objectFit | Supported | |
objectPosition | Supported | |
| Background | backgroundImage | linear-gradient(), radial-gradient(), noise-v1() |
backgroundPosition | Supported | |
backgroundSize | Supported | |
backgroundRepeat | Supported | |
backgroundColor | Supported | |
boxShadow | Supported | |
| Mask | maskImage | Supported |
maskSize | Supported | |
maskPosition | Supported | |
maskRepeat | Supported | |
transform | translate | Only 2D is supported |
rotate | ||
scale | ||
transformOrigin | Supported | |
| Grid | gridAutoColumns | Supported |
gridAutoRows | Supported | |
gridAutoFlow | Supported | |
gridColumn | Supported | |
gridRow | Supported | |
gridTemplateColumns | Supported | |
gridTemplateRows | Supported | |
gridTemplateAreas | Supported | |
| Typography | textOverflow | ellipsis, clip, custom character |
textTransform | none, uppercase, lowercase, capitalize | |
fontStyle | Supported | |
color | Supported | |
textShadow | Supported | |
fontSize | Supported | |
fontFamily | Font fallback supported | |
lineHeight | Supported | |
fontWeight | Supported | |
fontVariationSettings | Supported | |
fontFeatureSettings | Supported | |
lineClamp | number, 1 "ellipsis character" | |
textAlign | Supported | |
letterSpacing | Supported | |
wordSpacing | Supported | |
overflowWrap | Supported | |
wordBreak | Supported | |
boxSizing | Supported | |
imageRendering | auto, smooth, pixelated | |
filter | Except blur() and drop-shadow() | |
WebkitTextStroke | WebkitTextStrokeWidth, WebkitTextStrokeColor | Supported |
textDecoration | textDecorationLine | underline, line-through, overline |
textDecorationColor | Supported | |