Hosting Solutions
mobile_logo Table of Contents

Shorthand Properties

Authors can slim down their code by making use of the CSS shorthand properties. Shorthand properties apply all of the values you want to give multiple related longhand properties, but in a single declaration. Logic that might take up two or more lines, can be conveyed in a single line in some cases. Using the shorthand approach also slims down your JavaScript when you manipulate the CSS for elements through script. Shorthand properties exist where related properties make up a family or group of properties.

This multiple line setting for a transition animation works great, but it could be slimmed down a lot. transition-property: background; transition-duration: 0.3s; transition-timing-function: linear; transition-delay: 0s; Here is the same logic using the shorthand 'transition' property. Four lines become a single line. transition: background 0.3s linear 0s;

Shorthand Property List

animation background border column-rule columns display flex font font-variant grid grid-column grid-row grid-template line-stacking list-style margin mask mask-border outline overflow padding pause rest text-decoration text-emphasis transition



IntroductionStyle ApproachesSelectorsAt RulesShorthand PropertiesAnimatable PropertiesWeb Standards