supportStyles.ts•28.6 kB
export const supportDEStyles = [
{
property: "accent-color",
supportedValues: "string or ColorVariable",
example: "#ff5733",
},
{
property: "align-content",
supportedValues: "string",
example: "center",
},
{
property: "align-items",
supportedValues: "string",
example: "flex-start",
},
{
property: "align-self",
supportedValues: "string",
example: "stretch",
},
{
property: "animation-delay",
supportedValues: "string",
example: "2s",
},
{
property: "animation-direction",
supportedValues: "string",
example: "alternate",
},
{
property: "animation-duration",
supportedValues: "string",
example: "1s",
},
{
property: "animation-fill-mode",
supportedValues: "string",
example: "forwards",
},
{
property: "animation-iteration-count",
supportedValues: "string",
example: "infinite",
},
{
property: "animation-name",
supportedValues: "string",
example: "slidein",
},
{
property: "animation-play-state",
supportedValues: "string",
example: "paused",
},
{
property: "animation-timing-function",
supportedValues: "string",
example: "ease-in-out",
},
{
property: "appearance",
supportedValues: "string",
example: "none",
},
{
property: "backdrop-filter",
supportedValues: "string",
example: "blur(5px)",
},
{
property: "backface-visibility",
supportedValues: "string",
example: "hidden",
},
{
property: "background-attachment",
supportedValues: "string",
example: "fixed",
},
{
property: "background-blend-mode",
supportedValues: "string",
example: "multiply",
},
{
property: "background-clip",
supportedValues: "string",
example: "border-box",
},
{
property: "background-color",
supportedValues: "string or ColorVariable",
example: "#e0e0e0",
},
{
property: "background-image",
supportedValues: "string",
example: "url('image.jpg')",
},
{
property: "background-origin",
supportedValues: "string",
example: "padding-box",
},
{
property: "background-position",
supportedValues: "string",
example: "top right",
},
{
property: "background-position-x",
supportedValues: "string or SizeVariable",
example: "50%",
},
{
property: "background-position-y",
supportedValues: "string or SizeVariable",
example: "50%",
},
{
property: "background-repeat",
supportedValues: "string",
example: "repeat-x",
},
{
property: "background-size",
supportedValues: "string",
example: "cover",
},
{
property: "block-size",
supportedValues: "string or SizeVariable",
example: "100px",
},
{
property: "border-block-end-color",
supportedValues: "string or ColorVariable",
example: "#000000",
},
{
property: "border-block-end-style",
supportedValues: "string",
example: "dotted",
},
{
property: "border-block-end-width",
supportedValues: "string or SizeVariable",
example: "3px",
},
{
property: "border-block-start-color",
supportedValues: "string or ColorVariable",
example: "#333333",
},
{
property: "border-block-start-style",
supportedValues: "string",
example: "solid",
},
{
property: "border-block-start-width",
supportedValues: "string or SizeVariable",
example: "2px",
},
{
property: "border-bottom-color",
supportedValues: "string or ColorVariable",
example: "#f44336",
},
{
property: "border-bottom-left-radius",
supportedValues: "string or SizeVariable",
example: "4px",
},
{
property: "border-bottom-right-radius",
supportedValues: "string or SizeVariable",
example: "4px",
},
{
property: "border-bottom-style",
supportedValues: "string",
example: "groove",
},
{
property: "border-bottom-width",
supportedValues: "string or SizeVariable",
example: "1px",
},
{
property: "border-collapse",
supportedValues: "string",
example: "collapse",
},
{
property: "border-end-end-radius",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "border-end-start-radius",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "border-image-outset",
supportedValues: "string or SizeVariable",
example: "5px",
},
{
property: "border-image-repeat",
supportedValues: "string",
example: "stretch",
},
{
property: "border-image-slice",
supportedValues: "string",
example: "30%",
},
{
property: "border-image-source",
supportedValues: "string",
example: "url('border.png')",
},
{
property: "border-image-width",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "border-inline-end-color",
supportedValues: "string or ColorVariable",
example: "#4CAF50",
},
{
property: "border-inline-end-style",
supportedValues: "string",
example: "inset",
},
{
property: "border-inline-end-width",
supportedValues: "string or SizeVariable",
example: "4px",
},
{
property: "border-inline-start-color",
supportedValues: "string or ColorVariable",
example: "#2196F3",
},
{
property: "border-inline-start-style",
supportedValues: "string",
example: "outset",
},
{
property: "border-inline-start-width",
supportedValues: "string or SizeVariable",
example: "3px",
},
{
property: "border-left-color",
supportedValues: "string or ColorVariable",
example: "#9C27B0",
},
{
property: "border-left-style",
supportedValues: "string",
example: "dashed",
},
{
property: "border-left-width",
supportedValues: "string or SizeVariable",
example: "2px",
},
{
property: "border-right-color",
supportedValues: "string or ColorVariable",
example: "#FFEB3B",
},
{
property: "border-right-style",
supportedValues: "string",
example: "double",
},
{
property: "border-right-width",
supportedValues: "string or SizeVariable",
example: "1px",
},
{
property: "border-start-end-radius",
supportedValues: "string or SizeVariable",
example: "5px",
},
{
property: "border-start-start-radius",
supportedValues: "string or SizeVariable",
example: "5px",
},
{
property: "border-top-color",
supportedValues: "string or ColorVariable",
example: "#3F51B5",
},
{
property: "border-top-left-radius",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "border-top-right-radius",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "border-top-style",
supportedValues: "string",
example: "ridge",
},
{
property: "border-top-width",
supportedValues: "string or SizeVariable",
example: "2px",
},
{
property: "bottom",
supportedValues: "string or SizeVariable",
example: "0",
},
{
property: "box-shadow",
supportedValues: "string",
example: "10px 5px 5px black",
},
{
property: "box-sizing",
supportedValues: "string",
example: "border-box",
},
{
property: "break-after",
supportedValues: "string",
example: "auto",
},
{
property: "break-before",
supportedValues: "string",
example: "always",
},
{
property: "break-inside",
supportedValues: "string",
example: "avoid",
},
{
property: "caption-side",
supportedValues: "string",
example: "bottom",
},
{
property: "caret-color",
supportedValues: "string or ColorVariable",
example: "blue",
},
{
property: "clear",
supportedValues: "string",
example: "both",
},
{
property: "clip",
supportedValues: "string",
example: "rect(0,0,0,0)",
},
{
property: "clip-path",
supportedValues: "string",
example: "circle(50%)",
},
{
property: "clip-rule",
supportedValues: "string",
example: "evenodd",
},
{
property: "color",
supportedValues: "string or ColorVariable",
example: "#FF9800",
},
{
property: "color-interpolation",
supportedValues: "string",
example: "sRGB",
},
{
property: "color-interpolation-filters",
supportedValues: "string",
example: "linearRGB",
},
{
property: "column-count",
supportedValues: "string",
example: "3",
},
{
property: "column-gap",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "column-rule-color",
supportedValues: "string or ColorVariable",
example: "#607D8B",
},
{
property: "column-rule-style",
supportedValues: "string",
example: "solid",
},
{
property: "column-rule-width",
supportedValues: "string or SizeVariable",
example: "1px",
},
{
property: "column-span",
supportedValues: "string",
example: "all",
},
{
property: "column-width",
supportedValues: "string or SizeVariable",
example: "200px",
},
{
property: "content",
supportedValues: "string",
example: "'Hello'",
},
{
property: "cursor",
supportedValues: "string",
example: "pointer",
},
{
property: "cx",
supportedValues: "string",
example: "50",
},
{
property: "cy",
supportedValues: "string",
example: "50",
},
{
property: "direction",
supportedValues: "string",
example: "ltr",
},
{
property: "display",
supportedValues: "string",
example: "flex",
},
{
property: "dominant-baseline",
supportedValues: "string",
example: "alphabetic",
},
{
property: "empty-cells",
supportedValues: "string",
example: "show",
},
{
property: "fill",
supportedValues: "string",
example: "#f00",
},
{
property: "fill-opacity",
supportedValues: "string",
example: "0.5",
},
{
property: "fill-rule",
supportedValues: "string",
example: "nonzero",
},
{
property: "filter",
supportedValues: "string",
example: "blur(2px)",
},
{
property: "flex-basis",
supportedValues: "string or SizeVariable",
example: "auto",
},
{
property: "flex-direction",
supportedValues: "string",
example: "row",
},
{
property: "flex-grow",
supportedValues: "string",
example: "1",
},
{
property: "flex-shrink",
supportedValues: "string",
example: "1",
},
{
property: "flex-wrap",
supportedValues: "string",
example: "wrap",
},
{
property: "float",
supportedValues: "string",
example: "right",
},
{
property: "flood-color",
supportedValues: "string or ColorVariable",
example: "#00BCD4",
},
{
property: "flood-opacity",
supportedValues: "string",
example: "0.7",
},
{
property: "font-family",
supportedValues: "string or FontFamilyVariable",
example: "Arial, sans-serif",
},
{
property: "font-kerning",
supportedValues: "string",
example: "normal",
},
{
property: "font-optical-sizing",
supportedValues: "string",
example: "auto",
},
{
property: "font-size",
supportedValues: "string or SizeVariable",
example: "16px",
},
{
property: "font-stretch",
supportedValues: "string",
example: "condensed",
},
{
property: "font-style",
supportedValues: "string",
example: "italic",
},
{
property: "font-variant-alternates",
supportedValues: "string",
example: "normal",
},
{
property: "font-variant-caps",
supportedValues: "string",
example: "small-caps",
},
{
property: "font-variant-east-asian",
supportedValues: "string",
example: "normal",
},
{
property: "font-variant-ligatures",
supportedValues: "string",
example: "none",
},
{
property: "font-variant-numeric",
supportedValues: "string",
example: "ordinal",
},
{
property: "font-weight",
supportedValues: "string",
example: "bold",
},
{
property: "grid-auto-columns",
supportedValues: "string",
example: "minmax(100px, auto)",
},
{
property: "grid-auto-flow",
supportedValues: "string",
example: "row dense",
},
{
property: "grid-auto-rows",
supportedValues: "string",
example: "auto",
},
{
property: "grid-column-end",
supportedValues: "string",
example: "span 2",
},
{
property: "grid-column-gap",
supportedValues: "string",
example: "10px",
},
{
property: "grid-column-start",
supportedValues: "string",
example: "1",
},
{
property: "grid-row-end",
supportedValues: "string",
example: "3",
},
{
property: "grid-row-gap",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "grid-row-start",
supportedValues: "string",
example: "1",
},
{
property: "grid-template-areas",
supportedValues: "string",
example: "'header header'",
},
{
property: "grid-template-columns",
supportedValues: "string",
example: "50px 100px",
},
{
property: "grid-template-rows",
supportedValues: "string",
example: "auto",
},
{
property: "height",
supportedValues: "string or SizeVariable",
example: "100vh",
},
{
property: "image-orientation",
supportedValues: "string",
example: "90deg",
},
{
property: "image-rendering",
supportedValues: "string",
example: "auto",
},
{
property: "inline-size",
supportedValues: "string or SizeVariable",
example: "200px",
},
{
property: "inset-block-end",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "inset-block-start",
supportedValues: "string or SizeVariable",
example: "5px",
},
{
property: "inset-inline-end",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "inset-inline-start",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "isolation",
supportedValues: "string",
example: "isolate",
},
{
property: "justify-content",
supportedValues: "string",
example: "space-between",
},
{
property: "justify-items",
supportedValues: "string",
example: "stretch",
},
{
property: "justify-self",
supportedValues: "string",
example: "center",
},
{
property: "left",
supportedValues: "string or SizeVariable",
example: "50px",
},
{
property: "letter-spacing",
supportedValues: "string or SizeVariable",
example: "0.5em",
},
{
property: "lighting-color",
supportedValues: "string or ColorVariable",
example: "white",
},
{
property: "line-break",
supportedValues: "string",
example: "strict",
},
{
property: "line-height",
supportedValues: "string or SizeVariable",
example: "1.5",
},
{
property: "list-style-image",
supportedValues: "string",
example: "url('star.png')",
},
{
property: "list-style-position",
supportedValues: "string",
example: "inside",
},
{
property: "list-style-type",
supportedValues: "string",
example: "disc",
},
{
property: "margin-block-end",
supportedValues: "string or SizeVariable",
example: "15px",
},
{
property: "margin-block-start",
supportedValues: "string or SizeVariable",
example: "15px",
},
{
property: "margin-bottom",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "margin-inline-end",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "margin-inline-start",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "margin-left",
supportedValues: "string or SizeVariable",
example: "30px",
},
{
property: "margin-right",
supportedValues: "string or SizeVariable",
example: "30px",
},
{
property: "margin-top",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "marker-end",
supportedValues: "string",
example: "url('arrowhead.svg')",
},
{
property: "marker-mid",
supportedValues: "string",
example: "url('dot.svg')",
},
{
property: "marker-start",
supportedValues: "string",
example: "url('circle.svg')",
},
{
property: "mask-type",
supportedValues: "string",
example: "luminance",
},
{
property: "max-block-size",
supportedValues: "string or SizeVariable",
example: "100px",
},
{
property: "max-height",
supportedValues: "string or SizeVariable",
example: "200px",
},
{
property: "max-inline-size",
supportedValues: "string or SizeVariable",
example: "300px",
},
{
property: "max-width",
supportedValues: "string or SizeVariable",
example: "80%",
},
{
property: "min-block-size",
supportedValues: "string or SizeVariable",
example: "50px",
},
{
property: "min-height",
supportedValues: "string or SizeVariable",
example: "100px",
},
{
property: "min-inline-size",
supportedValues: "string or SizeVariable",
example: "150px",
},
{
property: "min-width",
supportedValues: "string or SizeVariable",
example: "60px",
},
{
property: "mix-blend-mode",
supportedValues: "string",
example: "multiply",
},
{
property: "object-fit",
supportedValues: "string",
example: "cover",
},
{
property: "object-position",
supportedValues: "string",
example: "center top",
},
{
property: "offset-anchor",
supportedValues: "string",
example: "auto",
},
{
property: "offset-distance",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "offset-path",
supportedValues: "string",
example: "path('M10 80 Q 95 10 180 80')",
},
{
property: "offset-rotate",
supportedValues: "string",
example: "auto",
},
{
property: "opacity",
supportedValues: "string",
example: "0.5",
},
{
property: "order",
supportedValues: "string",
example: "2",
},
{
property: "outline-color",
supportedValues: "string or ColorVariable",
example: "#FF5722",
},
{
property: "outline-offset",
supportedValues: "string or SizeVariable",
example: "2px",
},
{
property: "outline-style",
supportedValues: "string",
example: "dashed",
},
{
property: "outline-width",
supportedValues: "string or SizeVariable",
example: "3px",
},
{
property: "overflow-wrap",
supportedValues: "string",
example: "break-word",
},
{
property: "overflow-x",
supportedValues: "string",
example: "auto",
},
{
property: "overflow-y",
supportedValues: "string",
example: "scroll",
},
{
property: "overscroll-behavior-block",
supportedValues: "string",
example: "contain",
},
{
property: "overscroll-behavior-inline",
supportedValues: "string",
example: "none",
},
{
property: "padding-block-end",
supportedValues: "string or SizeVariable",
example: "25px",
},
{
property: "padding-block-start",
supportedValues: "string or SizeVariable",
example: "25px",
},
{
property: "padding-bottom",
supportedValues: "string or SizeVariable",
example: "15px",
},
{
property: "padding-inline-end",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "padding-inline-start",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "padding-left",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "padding-right",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "padding-top",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "paint-order",
supportedValues: "string",
example: "fill stroke markers",
},
{
property: "perspective",
supportedValues: "string or SizeVariable",
example: "500px",
},
{
property: "perspective-origin",
supportedValues: "string",
example: "50% 50%",
},
{
property: "pointer-events",
supportedValues: "string",
example: "none",
},
{
property: "position",
supportedValues: "string",
example: "absolute",
},
{
property: "r",
supportedValues: "string or SizeVariable",
example: "50px",
},
{
property: "resize",
supportedValues: "string",
example: "both",
},
{
property: "right",
supportedValues: "string or SizeVariable",
example: "0px",
},
{
property: "rotate",
supportedValues: "string",
example: "45deg",
},
{
property: "row-gap",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "rx",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "ry",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "scale",
supportedValues: "string",
example: "1.2",
},
{
property: "scroll-behavior",
supportedValues: "string",
example: "smooth",
},
{
property: "scroll-margin-block-end",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "scroll-margin-block-start",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "scroll-margin-inline-end",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "scroll-margin-inline-start",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "scroll-padding-block-end",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "scroll-padding-block-start",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "scroll-padding-inline-end",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "scroll-padding-inline-start",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "shape-image-threshold",
supportedValues: "string",
example: "0.3",
},
{
property: "shape-margin",
supportedValues: "string or SizeVariable",
example: "15px",
},
{
property: "shape-outside",
supportedValues: "string",
example: "circle(50%)",
},
{
property: "shape-rendering",
supportedValues: "string",
example: "auto",
},
{
property: "stop-color",
supportedValues: "string or ColorVariable",
example: "#0D47A1",
},
{
property: "stop-opacity",
supportedValues: "string",
example: "0.8",
},
{
property: "stroke",
supportedValues: "string or ColorVariable",
example: "black",
},
{
property: "stroke-dasharray",
supportedValues: "string",
example: "5, 10",
},
{
property: "stroke-dashoffset",
supportedValues: "string or SizeVariable",
example: "5px",
},
{
property: "stroke-linecap",
supportedValues: "string",
example: "round",
},
{
property: "stroke-linejoin",
supportedValues: "string",
example: "bevel",
},
{
property: "stroke-miterlimit",
supportedValues: "string",
example: "10",
},
{
property: "stroke-opacity",
supportedValues: "string",
example: "1",
},
{
property: "stroke-width",
supportedValues: "string or SizeVariable",
example: "3px",
},
{
property: "tab-size",
supportedValues: "string or SizeVariable",
example: "4",
},
{
property: "table-layout",
supportedValues: "string",
example: "fixed",
},
{
property: "text-align",
supportedValues: "string",
example: "justify",
},
{
property: "text-align-last",
supportedValues: "string",
example: "center",
},
{
property: "text-anchor",
supportedValues: "string",
example: "start",
},
{
property: "text-decoration",
supportedValues: "string",
example: "underline",
},
{
property: "text-decoration-color",
supportedValues: "string or ColorVariable",
example: "red",
},
{
property: "text-decoration-line",
supportedValues: "string",
example: "overline",
},
{
property: "text-decoration-skip-ink",
supportedValues: "string",
example: "auto",
},
{
property: "text-decoration-style",
supportedValues: "string",
example: "dotted",
},
{
property: "text-emphasis-color",
supportedValues: "string or ColorVariable",
example: "green",
},
{
property: "text-emphasis-position",
supportedValues: "string",
example: "under right",
},
{
property: "text-emphasis-style",
supportedValues: "string",
example: "filled circle",
},
{
property: "text-indent",
supportedValues: "string or SizeVariable",
example: "20px",
},
{
property: "text-overflow",
supportedValues: "string",
example: "ellipsis",
},
{
property: "text-rendering",
supportedValues: "string",
example: "optimizeLegibility",
},
{
property: "text-shadow",
supportedValues: "string",
example: "2px 2px 5px grey",
},
{
property: "text-transform",
supportedValues: "string",
example: "uppercase",
},
{
property: "text-underline-position",
supportedValues: "string",
example: "under",
},
{
property: "top",
supportedValues: "string or SizeVariable",
example: "100px",
},
{
property: "touch-action",
supportedValues: "string",
example: "pan-right",
},
{
property: "transform",
supportedValues: "string",
example: "rotate(45deg)",
},
{
property: "transform-origin",
supportedValues: "string",
example: "top left",
},
{
property: "transform-style",
supportedValues: "string",
example: "preserve-3d",
},
{
property: "transition-delay",
supportedValues: "string",
example: "0.5s",
},
{
property: "transition-duration",
supportedValues: "string",
example: "300ms",
},
{
property: "transition-property",
supportedValues: "string",
example: "opacity",
},
{
property: "transition-timing-function",
supportedValues: "string",
example: "ease-in-out",
},
{
property: "translate",
supportedValues: "string or SizeVariable",
example: "10px, 20px",
},
{
property: "unicode-bidi",
supportedValues: "string",
example: "bidi-override",
},
{
property: "vector-effect",
supportedValues: "string",
example: "non-scaling-stroke",
},
{
property: "vertical-align",
supportedValues: "string",
example: "middle",
},
{
property: "visibility",
supportedValues: "string",
example: "hidden",
},
{
property: "white-space",
supportedValues: "string",
example: "nowrap",
},
{
property: "width",
supportedValues: "string or SizeVariable",
example: "50%",
},
{
property: "will-change",
supportedValues: "string",
example: "transform",
},
{
property: "word-break",
supportedValues: "string",
example: "break-word",
},
{
property: "word-spacing",
supportedValues: "string or SizeVariable",
example: "5px",
},
{
property: "writing-mode",
supportedValues: "string",
example: "vertical-rl",
},
{
property: "x",
supportedValues: "string or SizeVariable",
example: "5px",
},
{
property: "y",
supportedValues: "string or SizeVariable",
example: "10px",
},
{
property: "z-index",
supportedValues: "string",
example: "10",
},
{
property: "-webkit-line-clamp",
supportedValues: "string",
example: "3",
},
{
property: "-webkit-text-fill-color",
supportedValues: "string or ColorVariable",
example: "#FF5722",
},
{
property: "-webkit-text-stroke-color",
supportedValues: "string or ColorVariable",
example: "#4CAF50",
},
{
property: "-webkit-text-stroke-width",
supportedValues: "string or SizeVariable",
example: "1px",
},
];