CSS shorthand tips
In a lot of the CSS code I see, people don’t seem to be aware of shorthand properties. They are an excellent way of keeping your stylesheet condensed and it also gives you an easy overview. Basically, it’s a way to write one-liners to affect all sides of an element or all similar properties grouped together.
The general rule is to apply length values for padding, margin and borders. They are to be written in this order, according to the element’s sides: top, right, bottom, left. If you only write two values, it will be for: top/bottom and right/left. Write three values and it will be applied like this: top, right/left, bottom.
NOTE: Remember to always specify a unit, such as px, em, % etc, unless the value is 0.
/* 2 px margin all around */
div#header{
margin:2px;
}
/* 2 px top/bottom margin and 4 px right/left margin */
div#header{
margin:2px 4px;
}
/* 1 px top margin, 4 px right/left margin and 8 px bottom margin */
div#header{
margin:1px 4px 8px;
}
/*
1 px top margin, 3 px right margin, 8 px bottom margin
and 5 px left margin
*/
div#header{
margin:1px 3px 8px 5px;
}
W3C’s CSS 2.1 specification on margin properties, padding properties and border properties.
For font values, the shorthand property is applied in this order: font weight, font size/line height, font family.
/*
A bold font weight, 10 px big with a line height of 14 px
and desired font family specified in prioritized order.
The font weight value and the line height value can be omitted.
*/
div#header{
font:bold 10px/14px Verdana, Arial, Helvetica, sans-serif;
}
W3C’s CSS 2.1 specification on the font shorthand property.
When it comes to background styles, it comes in this order: background color, background image, background repeat, background attachment, background position. Like this:
/*
The element will get a white background and have
a non-repeated background image that is placed
in the element's top right corner.
*/
div#header{
background:#FFF url(images/funky-pic.png) no-repeat right top;
}
W3C’s CSS 2.1 specification on background properties.
Using shorthand properties results in a compact CSS file whose weight in kbs will be as little as possible.
PS. A nod to Roger‘s Efficient CSS with shorthand properties post, which I read after I wrote this. It contains more information for those of you who can’t get enough! DS.
Some mnemonic tips that I personally (brain like a sieve) find useful:
Margins, padding, borders etc. are specified clock-wise starting at the top. Remembering top-right-bottom-left will keep you out of TRouBLe.
An omitted value is taken from the opposite side, so <code>margin:2px 4px</code> means that the omitted bottom is equal to top (2px) and the omitted left is equal to right (4px).
For font shorthand, the <code>font-size</code> and <code>font-family</code> are required, while the rest are optional.
And as you noted, background positions are specified with the horizontal position before the vertical position. When using keywords it doesn't matter, but if you're using percentages or lengths, it's vital. Also, you should not mix keywords and numeric values.
There are also shorthand properties for borders and <code>list-style</code>.
Tommy,
Thanks for the input.
I mentioned the border properties above, although I didn't give an example of them.
For those who want to see examples of border and list style properties, please go to Roger's article.
It's basically the same principle as shown in the examples in this post.
In my experience and given the W3C's own example, the order of <code>background:</code> values is unimportant. Any order is allowed, given at least that each value is treated as one, even when values consist of multiple words (such as "top left", i.e. you can't do this: <code>background: top url(image.jpg) left;</code>).
But, and as Tommy wrote, if you use positioning in (for instance) pixels for the background image, they have to be in the horizontal/vertical order, like this:
<code>background:#FFF url(images/funky-pic.png) no-repeat 14px 20px;</code>
where 14px will be the position from the left and 20 px the position from the top.
[…] WordPress Codex: CSS Shorthand Efficient CSS with shorthand properties by Roger Johansson CSS shorthand tips by Robert Nyman Webcredible – CSS shorthand properties by Trenton Mo […]
[…] 22. CSS shorthand tips […]