In CSS, some properties have shorthand. One property that takes separated values. Syntactic sugar<\/em>, as they say, to make authoring easier. Take We could have written it like this:<\/p>\n Every “part” of the shorthand value has its own property it maps to. But that’s not true for everything. Take That’s not shorthand for other properties. There is no That’s where Custom Properties come to save us!<\/p>\n We could set it up like this:<\/p>\n A bit verbose, perhaps, but gets the job done. <\/p>\n Now that we’ve done that, remember we get some uniquely cool things:<\/p>\n Fallbacks are possible too, in case the variable isn’t set at all:<\/p>\n How about transforms? They are fun because they take a space-separated list of values, so each of them could be a custom property:<\/p>\n What about elements that do<\/em> have individual properties for their shorthand, but also offer comma-separated multiple values? Another great use-case:<\/p>\n Or transitions?<\/p>\n Dan Wilson recently used this kind of thing<\/a> with animations to show how it’s possible to pause individual animations! <\/p>\n Here’s browser support:<\/p>\ntransition<\/code>, which might look something like:<\/p>\n.element {\r\n transition: border 0.2s ease-in-out;\r\n}<\/code><\/pre>\n.element {\r\n transition-property: border;\r\n transition-duration: 0.2s;\r\n transition-timing-function: ease-in-out;\r\n}<\/code><\/pre>\nbox-shadow<\/code>:<\/p>\n.element {\r\n box-shadow: 0 0 10px #333;\r\n}<\/code><\/pre>\nbox-shadow-color<\/code> or box-shadow-offset<\/code>.<\/p>\n:root {\r\n --box-shadow-offset-x: 10px;\r\n --box-shadow-offset-y: 2px;\r\n --box-shadow-blur: 5px;\r\n --box-shadow-spread: 0;\r\n --box-shadow-color: #333;\r\n}\r\n\r\n.element {\r\n box-shadow:\r\n var(--box-shadow-offset-x)\r\n var(--box-shadow-offset-y)\r\n var(--box-shadow-blur)\r\n var(--box-shadow-spread)\r\n var(--box-shadow-color);\r\n}<\/code><\/pre>\n\n
document.documentElement.style.setProperty(\"--box-shadow-color\", \"green\");<\/code><\/pre>\n<\/li>\n--box-shadow-color: blue<\/code> on any selector more specific than the :root, we’ll override that color.<\/li>\n<\/ol>\n.element {\r\n box-shadow:\r\n var(--box-shadow-offset-x, 0)\r\n var(--box-shadow-offset-y, 0)\r\n var(--box-shadow-blur, 5px)\r\n var(--box-shadow-spread, 0)\r\n var(--box-shadow-color, black);\r\n}<\/code><\/pre>\n
\n:root {\r\n --transform_1: scale(2);\r\n --transform_2: rotate(10deg);\r\n}\r\n\r\n.element{\r\n transform: var(--transform_1) var(--transform_2);\r\n}<\/code><\/pre>\n
\n:root {\r\n --bgImage: url(basic_map.svg);\r\n --image_1_position: 50px 20px;\r\n --image_2_position: bottom right;\r\n}\r\n\r\n.element {\r\n background: \r\n var(--bgImage) no-repeat var(--image_1_position),\r\n var(--bgImage) no-repeat var(--image_2_position);\r\n}<\/code><\/pre>\n:root {\r\n --transition_1_property: border;\r\n --transition_1_duration: 0.2s;\r\n --transition_1_timing_function: ease;\r\n \r\n --transition_2_property: background;\r\n --transition_2_duration: 1s;\r\n --transition_2_timing_function: ease-in-out;\r\n}\r\n\r\n.element {\r\n transition: \r\n var(--transition_1_property) \r\n var(--transition_1_duration) \r\n var(--transition_1_timing_function),\r\n var(--transition_2_property) \r\n var(--transition_2_duration) \r\n var(--transition_2_timing_function),\r\n}<\/code><\/pre>\n
\n