Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JSON map from CSS shorthand properties to their sub-properties
{
"animation": [
"animation-name",
"animation-duration",
"animation-timing-function",
"animation-delay",
"animation-iteration-count",
"animation-direction",
"animation-fill-mode",
"animation-play-state"
],
"background": [
"background-clip",
"background-color",
"background-image",
"background-origin",
"background-position",
"background-repeat",
"background-size",
"background-attachment"
],
"border": [
"border-width",
"border-style",
"border-color"
],
"border-bottom": [
"border-bottom-width",
"border-bottom-style",
"border-bottom-color"
],
"border-color": [
"border-top-color",
"border-right-color",
"border-bottom-color",
"border-left-color"
],
"border-left": [
"border-left-width",
"border-left-style",
"border-left-color"
],
"border-radius": [
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius"
],
"border-right": [
"border-right-width",
"border-right-style",
"border-right-color"
],
"border-style": [
"border-top-style",
"border-right-style",
"border-bottom-style",
"border-left-style"
],
"border-top": [
"border-top-width",
"border-top-style",
"border-top-color"
],
"border-width": [
"border-top-width",
"border-right-width",
"border-bottom-width",
"border-left-width"
],
"column-rule": [
"column-rule-width",
"column-rule-style",
"column-rule-color"
],
"columns": [
"column-width",
"column-count"
],
"flex": [
"flex-grow",
"flex-shrink",
"flex-basis"
],
"flex-flow": [
"flex-direction",
"flex-wrap"
],
"font": [
"font-style",
"font-variant",
"font-weight",
"font-stretch",
"font-size",
"line-height",
"font-family"
],
"grid": [
"grid-template-rows",
"grid-template-columns",
"grid-template-areas",
"grid-auto-rows",
"grid-auto-columns",
"grid-auto-flow",
"grid-column-gap",
"grid-row-gap",
"column-gap",
"row-gap"
],
"grid-area": [
"grid-row-start",
"grid-column-start",
"grid-row-end",
"grid-column-end"
],
"grid-column": [
"grid-column-start",
"grid-column-end"
],
"grid-row": [
"grid-row-start",
"grid-row-end"
],
"grid-template": [
"grid-template-columns",
"grid-template-rows",
"grid-template-areas"
],
"list-style": [
"list-style-type",
"list-style-position",
"list-style-image"
],
"margin": [
"margin-top",
"margin-right",
"margin-bottom",
"margin-left"
],
"offset": [
"offset-position",
"offset-path",
"offset-distance",
"offset-anchor",
"offset-rotate"
],
"outline": [
"outline-style",
"outline-width",
"outline-color"
],
"overflow": [
"overflow-x",
"overflow-y"
],
"padding": [
"padding-top",
"padding-right",
"padding-bottom",
"padding-left"
],
"place-content": [
"align-content",
"justify-content"
],
"place-items": [
"align-items",
"justify-items"
],
"place-self": [
"align-self",
"justify-self"
],
"text-decoration": [
"text-decoration-line",
"text-decoration-color",
"text-decoration-style",
"text-decoration-thickness"
],
"transition": [
"transition-property",
"transition-duration",
"transition-timing-function",
"transition-delay"
]
}
@tbjgolden
Copy link
Author

this was created using the MDN docs.
specifically here https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#See_also

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment