The longest shorthands in CSS

Writing shorter code is key to performance optimization and more structured code. Instead of mentioning each property separately CSS has shorthand formats to write all properties in one line.

Background

So we have 8 properties linked to the background property and these are:

background-color: #ccc;
background-image: url("car.png");
background-position: top center;
background-size: 50% auto;
background-repeat: repeat;
background-attachment: fixed;
background-origin: padding-box;
background-clip: content-box;

I won’t get into what each property does because this is not the article’s purpose.

The shorthand for the 8 properties all together looks like this:

background: #ccc
            url("car.png")
            0 0 /50% auto
            no-repeat
            fixed
            padding-box
            content-box;

I wrote this on separate lines for readability reasons. The background position and background-size are separated by / instead of space.

Fonts

The longer version is this:

font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size/line-height: 14px/1;
font-family: Verdana, Sans-serif;

Shorthand needs 2 madatory values: the font-size and the font-family. Those skipped will make the whole rule invalid.

font: italic small-caps bold 14px/1 Verdana;

Border-radius

This property has a horizontal and a vertical radii for each corner, that is why instead of 4 values we have 8 values

border-top-left-radius: 1em 3em;
border-top-right-radius: 1em 2em;
border-bottom-right-radius: 3em 4em;
border-bottom-left-radius: 4em 1em;

The shorthand:

border-radius: 1px 1px 3px 4px / 3px 2px 4px 1px;

Animations

animation-duration: 2s;
animation-name: bounce;
animation-delay: 2s;
animation-direction: alternate;
animation-fill-mode: normal;
animation-iteration-count: infinite;
animation-play-state: running;
animation-timing-function: ease-out;

The shorthand:

animation: 2s bounce 2s alternate normal infinite running ease-out;

Of course you can leave out the default values, because an optional value unspecified on a shorthand reverts to initial value. Also we have 2 mandatory values: the property that you need to animate and the duration of the animation, the rest are optional.

Transitions

transition-property: opacity;
transition-duration: 2s;
transition-timing-function: ease-out;
transition-delay: 30ms;

The shorthand for this transition is:

transition: opacity 2s ease-out 30ms;

The mandatory fields are the same as on the case of the transition.

That’s it for today guys, I hope you will have the courage in the feature to use these shorthands in it’s full glory and save some space on that hard drive.

0