4 replies [Last post]
thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

There's a nicer-formatted version, I'm just checking the content is ok.

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.


/******************************************/
/ 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).

(You, at the back, staring out of the window - pay attention, this is complicated!)

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:

#ff cc 00

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 #ECA (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 are only two major problems I have come across so far. There may be more - if so, I will add to this faq.

1) 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 snadrads-compliant browser. Just point them to http://www.getfirefox.com.

/******************************************/
/ What is the text inside of /* these */ ? /
/******************************************/

These are comments. These are generally only used for commenting the CSS (either to make it easier to read, or to add in developer comments), but in some cases they are used as 'hacks' to target a specific broswer. An example of this is the backslash hack (aka the Holly Hack) which targets IE5.5 for Windows). More on hacks can be found in THIS FAQ.

Uploaded is the html file - nicer formatting!

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

CSS FAQ - check

Paul you may want to add to the font shorthand explanation by showing line-height etc as in:

font: font-style font-variant font-weight font-size line-height font-family ;
and the requirement that the font-family is a mandatory declaration.
Oh and maybe change the font-size unit lest you lead a newbie astray. Wink

Also with the box dimension values padding /margin how you can just declare:

margin: 20px 10px 5px; / top-margin 20px ; both sides 10px ;bottom 5px

although I always find this one confusing Smile

Good work.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

CSS FAQ - check

Quote:
20px 10px 5px; / top-margin 20px ; both sides 10px ;bottom 5px

Yes, I'd forgotten about that. Will add it in.

Basically, that uses the shorthand equivalent of 20px 10px - that is, top and bottom of 20px, left and right of 10px, but the bottom margin is specified.

Cheers, I'll work that in.

Verschwindende wrote:
  • CSS doesn't make pies

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 2 years 22 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

CSS FAQ - check

Impressive contribution.

Two recommendations before going into prime time. Make sure all the spelling is standards-compliant Wink and consider whether the more advanced discussion regarding browser compliance, the plug for FF, and discussion of hacks is really needed (or perhaps could be in an "extra credit" section)

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

CSS FAQ - check

Quote:
consider whether the more advanced discussion regarding browser compliance, the plug for FF, and discussion of hacks is really needed

I probably don't need about the commented backslash hack as it';s nothing to do with shorthand CSS.

However I'm definitely plugging the fox - I would have done it more but I didn't want to look like I was going overboard.
However, if they are using a borwser like IE3 or something, why not tell them to get firefox?

It's either that or IE, which you have to pay for, and spend hours upgrading . . .

Verschwindende wrote:
  • CSS doesn't make pies