Shorthand properties – css cascading style sheets mdn gas and water llc


The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS background property is a shorthand property that’s able to define the values of background-color, background-image, background-repeat, and background-position. Similarly, the most common font-related properties can be defined using the shorthand font, and the different margins around a box can be defined using the margin shorthand. Tricky edge cases

• Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.

• Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories:

The 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL)

CSS provides four special universal property values for specifying inheritance: inherit Sets the property value applied to a selected element to be the same as that of its parent element. initial Sets the property value applied to a selected element to be the same as the value set for that element in the browser’s default style sheet. If no value is set by the browser’s default style sheet and the property is naturally inherited, then the property value is set to inherit instead. unset Resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like initial. revert Reverts the property to the value it would have had if the current origin had not applied any styles to it. In other words, the property’s value is set to the user stylesheet’s value for the property (if one is set), otherwise the property’s value is taken from the user-agent’s default stylesheet.

• As the color property is naturally inherited, all child elements of body will have the same green color. It’s worth noting that browsers set the color of links to blue by default instead of allowing the natural inheritance of the color property, so the first link in our list is blue.

• The second rule sets links within an element with the class inherit to inherit its color from its parent. In this case, it means that the link inherits its color from its parent, which, by default inherits its color from its own parent, which ultimately inherits its color from the element, which had its color set to green by the first rule.

• The last rule selects all links within an element with the class unset and sets their color to unset — we unset the value. Because the color property is a naturally inherited property it acts exactly like setting the value to inherit. As a consequence, this link is set to the same color as the body — green.

• Shorthand properties: animation, background, border, border-bottom, border-color, border-left, border-radius, border-right, border-style, border-top, border-width, column-rule, columns, flex, flex-flow, font, grid, grid-area, grid-column, grid-row, grid-template, list-style, margin, offset, outline, overflow, padding, place-content, place-items, place-self, text-decoration, transition