Theme Joomla Tips and Advice

CSS shorthand - getting those CSS files clean and small...

Here in the Theme Joomla design department we are quite specific about coding our templates and web pages up to globally accepted XHTML and CSS standards, and one of the simplest and best ways to reduce the clutter of your CSS files is to use CSS shorthand. Before we release any templates we always make sure to go through our CSS and apply shorthand rules as it reduces file size (therefore reducing page load time) and keeps your code looking good. Below are some of our most common CSS shorthand techniques - hope you find them usefull!

Font

Use: 

font: 1em/1.5em bold italic serif

...instead of 

 font-size: 1em;

line-height: 1.5em;

font-weight: bold;

font-style: italic;

font-family: serif

You have to specify each element in the top syntax - leave one out (like the font-family) and the entire style will be ignored. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal.

Background

Use: 

background: #fff url(image.gif) no-repeat top left

...instead of 

background-color: #fff;

background-image: url(image.gif);

background-repeat: no-repeat;

background-position: top left;

Once again, omit any of these commands from the background CSS shorthand property, and the browser will use the default values. Default values for this style place the background image in the top left corner and repeat the background both x and y.

Lists

Use: 

list-style: disc outside url(image.gif)

...instead of 

list-style: #fff;

list-style-type: disc;

list-style-position: outside;

list-style-image: url(image.gif)

Leave out any of these CSS commands from the shorthand rule, and the browser will use the default values for each, namely disc, outside and none (i.e. no images) respectively.

Margin & padding - Four different values

Use: 

margin: 2px 1px 3px 4px (top, right, bottom, left)

...instead of 

 margin-top: 2px;

margin-right: 1px;

margin-bottom: 3px;

margin-left: 4px

Margin & padding - Two different values

Use: 

margin: 5% 1% (top and bottom, right and left)

...instead of 

 margin-top: 5%;

margin-right: 1%;

margin-bottom: 5%;

margin-left: 1%

Border

Use: 

border: 1px black solid

...instead of 

 border-width: 1px;

border-color: black;

border-style: solid

There are many more shorthand rules, I have just specified the most commonly used above and if you do a search you will come up with loads more! Happy coding...

INSIDE: Support / Tips and Advice

members

search