This is the Standard reference for graphics.
It follows the authored TeaCSS vocabulary at source revision
fa3709a for package version 0.7.1.
Each value list gives finite examples and named values for its prefixes. A
bracket or variable example demonstrates that open form for the same prefix;
the listed arbitrary literals are samples, not every accepted literal. Check
the Storybook token reference for more examples,
and do not infer support from a different prefix.
aspect-ratio
Interactive example.
Prefixes: aspect-ratio. Example: aspect-ratio:auto. It emits aspect-ratio:auto;.
Documented values (4)
auto, square, video, [auto_16/9]
object-fit
Interactive example.
Prefixes: object-fit. Example: object-fit:contain. It emits object-fit:contain;.
Documented values (6)
contain, cover, fill, none, scale-down, [scale-down]
object-position
Interactive example.
Prefixes: object-position. Example: object-position:top. It emits object-position:top;.
Documented values (10)
top, bottom, left, right, center, top-left, top-right, bottom-left, bottom-right, [25%_75%]
will-change
Interactive example.
Prefixes: will-change. Example: will-change:auto. It emits will-change:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
auto, scroll-position, contents, transform, [transform,opacity]
dynamic-range-limit
Interactive example.
Prefixes: dynamic-range-limit. Example: dynamic-range-limit:standard. It emits dynamic-range-limit:standard;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
standard, no-limit, constrained, [dynamic-range-limit-mix(standard_40%,no-limit_60%)]
text-rendering
Interactive example.
Prefixes: text-rendering. Example: text-rendering:auto. It emits text-rendering:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (4)
auto, optimizeSpeed, optimizeLegibility, geometricPrecision
image-rendering
Interactive example.
Prefixes: image-rendering. Example: image-rendering:auto. It emits image-rendering:auto;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
auto, crisp-edges, pixelated, smooth, high-quality
image-resolution
Interactive example.
Prefixes: image-resolution. Example: image-resolution:from-image. It emits image-resolution:from-image;. Also accepts the CSS-wide keywords inherit, initial, revert, revert-layer, and unset.
Documented values (5)
from-image, 1dppx, 2dppx, 96dpi, 300dpi