No replies
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 weeks 3 days ago
Timezone: GMT-5
Joined: 2004-06-30
Posts: 9668
Points: 801

FAQ for shorthand CSS

What is Shorthand CSS? (sCSS)

Shorthand CSS is exactly what it says on the tin - a shorthand way of writing CSS.

Why use Shorthand CSS? (sCSS)

It is beneficial for two reasons - smaller file size saves bandwidth, and less code is easier to maintain/update.

How do I write Shorthand CSS?

sCSS is written in the exact same way as regular CSS, with the exception of the length of the attributes used. Take, for example, a longhand border definition:

.whiteborder {
	border-width: 2px;
	border-style: solid;
	border-color: #ffffff;
}
   example 1 - longhand border declaration

This will produce a 2-pixel solid, white border around an element with a class of "whiteborder". This can be either a box ( <div class="whiteborder"> ), an image ( <img class="whiteborder"> ), or some text ( <span class="whiteborder"> ).

The first thing to notice in this example is that all the declarations can be merged into one. Example first, then explanation:

.whiteborder {
	border: 2px solid #ffffff;
}
   example 2 - shorthand border declaration

Notice how the three lines of declaration has been merged into one - leaner code, easier to maintain.

There is no standard way of writing shorthand border declarations - it could be written as either:

  2px solid #ffffff;
  solid 2px #ffffff;
  #ffffff solid 2px;

but I feel that it is more semantically correct to declare the width, then type, then color.

What if I use multiple border attributes?

The above code can be used to affect more than the entire border. For example, to use the class whiteborder to add only a top and bottom border, the following code is used:

.whiteborder {
	border-top: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
}
   example 3 - top and bottom border

If you want to have, say, a top, bottom and left border, and want to keep your code as lean and bandwidth-friendly as you can, then you could use the following:

.whiteborder {
	border-top: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	border-left: 2px solid #ffffff;
}
   example 4 - top, bottom and left border

but see how much easier the following is:

.whiteborder {
	border: 2px solid #ffffff;
	border-right: 0;
}
   example 5 - shorthand top, bottom and left border

This will do the same as the example 1 (adding a white border around the entire element), but then, using the border-right property of 0, removes the right border. This does exactly the same as example 4, but is much less code.

If you want the smallest css declaration, use a compromise - for instance, example 3 could be rewritten as:

.whiteborder {
	border: 2px solid #ffffff;
	border-left: 0;
	border-right: 0;
}
   example 6 - shorthand top and bottom border

You have to work out whether

	border-top: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff; (63 characters, including spaces)

is more code than

	border: 2px solid #ffffff;
	border-left: 0;
	border-right: 0; (57 characters, including spaces)

In this case, it is easier to specify all borders then remove, rather than add each one needed.

What about different widths?

Instead of having to write:

.multiple_borders {
	border-left: 4px solid #ffffff;
	border-right: 2px solid #ffffff;
	border-top: 7px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}
   example 7 - longhand multiple borders, same color and style

you can use

.multiple_borders {
	border-style: solid;
	border-color: #ffffff;
	border-width: 7px 2px 1px 4px;
}
   example 8 - shorthand multiple borders, same color and style

Note The correct syntax for shorthand is like a clock starting from 12 o'clock - top, right, bottom, left.

What about all different border styles?

Unfortunately, if you use multiple widths, colors and styles, it usually takes a lot of code:

.madborders {
	border-left-width: 2px;
	border-left-style: dotted;
	border-left-color: #cccccc; /* Grey */
	border-top-width: 7px;
	border-top-style: solid;
	border-top-color: #000000; /* Black */
	. . .
}

However, using the above border rules, it can be shortened to something akin to this:

.madborders {
	border-left: 2px dotted #cccccc;
	border-top: 7px solid #000000;
	. . .
}

Can I strip this code even more?

Certainly. The color declaration (which we will come on to later) can be shortened to simply #fff.

What else can be written as shorthand?

Almost anything which uses multiple declarations to affect the same item. For example:

.price {
	font-family: Arial, sans-serif;
	font-size: 12pt;
	font-weight: bold;
	color: #000;
}
   example 9 - longhand font declaration

can be rewritten as:

.price {
	font: bold 12pt Arial, sans-serif;
	color: #000;
}
   example 10 - shorthand font declaration

However, many have reported this not to always work. Read the problems at the bottom of the FAQ.

Also, margins and padding can be written shorthand.

.bigmargin {
	margin-left: 9px;
	margin-right: 9px;
	margin-top: 9px;
	margin-bottom: 9px;
}
   example 11 - longhand margin declaration

can be re-written as

.bigmargin {
	margin: 9px;
}
   example 12 - shorthand margin declaration

The multiple attributes also apply here:

.bigmargin {
	margin-left: 20px;
	margin-right: 9px;
	margin-top: 7px;
	margin-bottom: 14px;
}
   example 13 - multiple longhand margin declaration

can be changed to

.bigmargin {
	margin: 7px 9px 14px 20px;
}
   example 14 - longhand margin declaration

The correct syntax for shorthand is like a clock starting from 12 o'clock - top, right, bottom, left.

The same rules as margin apply to padding as well.

Similar to example Six, you can also specify and add margins/paddings as applicable.

If you wanted top and bottom padding of 10px, and left and right padding of 6px, you could use shorthand CSS to write:

.twopaddings {
	padding: 10px 6px 10px 6px;
}

   example 15 - shorthand padding declaration

However, this can be rewritten as:

.twopaddings {
	padding: 10px 6px;
}

   example 16 - short shorthand padding declaration

This will use the paddings as follows: Top margin is specified as 10px, then right margin is specified as 6px. Bottom margin isn't specified, so loop back to the start - therefore, bottom padding is 10px, and left padding is 6px.

What's this about the color declaration?

Keep in mind the three different ways of specifying a color. These are -hex- (#000000), -rgb-(rgb:(0, 0, Innocent), and -color- (black). Hex is the only of the three which can be shortened. For example: #FFCC00 (an orangey yellow) can be recoded as simpl #FC0. Similarly, #004466 (an inky blue) can be shortened to #046.

By now, you should have figured out how it works. The hexadecimal color declaration can be split into three groups - the red, green and blue (similar to RGB values).

Hexadecimal values range from 0 (black) to F (white). Each part of the hex code is written as how much is used. For example, the code:

[pre] #ff cc 00 [/pre]

defines bright red (ff), mixed with brightish green (cc), and dark blue (00). Try this out in the Macromedia Flash Color Mixer to see how it adds the colors.

The declarations can be halved. This is how the code can be written on shorthand. The above color can be shortened to #FC0 and will produce the same results.

However, the code pairs -have to match-. For example, the color #F7F3EF (a beige) -cannot be shortened-, but the code #EECCAA (a more pinky beige) can be shortened to #ECA.

Note The code cannot be condensed into one pair. Example - #cccccc can be shortened to #ccc, but not #cc.

Do the color decs have to be in capitals?

Not at all. In fact, I would reccommend you use lowercase. The rules for valid xHTML specify that the markup must use all lowercase. This isn't the case for CSS, but I would get into the habit of using lowercase.

Are there any problems with it?

There is only one major problem I have come across so far. There may be more - if so, I will add to this faq.

Older Browser Support

Older browsers (such as NN4 and below, early versions of IE etc) do not have the support for shorthand CSS. If you wish to cater for older browsers (which isn't the point of sCSS), then you will need to declare each attribute individually.

However, with the advent of broadband, and the popularity of small-size, standards compliant browsers (read NOT Internet Exploder), this isn't a problem. Most people (even those using IE) have upgraded to the latest versions, with the latest patches. There is only about 1% of the population using older browsers (rumour has it the only people using them are web developers who want to cater for these old browsers!) so I wouldn't worry too much about it.

If you get luddites informing you that the effects do not work because they are using an outdated browser, (and if they are, most of the other CSS won't work anyway), then simply inform them that a small download (20ish minutes on 56k dialup) will give them access to the world's best, most standards-compliant browser. Just point them to http://www.getfirefox.com.

Verschwindende wrote:
  • CSS doesn't make pies

Tags: