CSS Basics - How to code better

1. Comment your code

Commenting code is a practice often overlooked when working to a deadline.
Using comments on any web source coding language can easily distinguish each part of the design you are working on. Helping further down the line when maintenance or tweaking is needed to inject life into your site.

fig 1. (CSS Comments)

/* This is an example of a CSS comment than can span over
several paragraphs */

// This is used for single lines only

2. (Shorthand CSS)

Shorthand CSS is a method of writing CSS code in more condensed manner

fig 1. (Long hand CSS)

#example {
margin-top: 0;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 3px;
}

fig 2. (Short hand CSS)

#example {
margin: 0 1px 2px 3px;
}

The CSS code created using shorthand is smaller in file size in comparison to using the longer version in fig 1.

When using shorthand notice that when a value of 0px is needed that it is written using just a 0 without the px value at the end.

Shorthand can be used with the margin, border and padding delimeters.

The CSS can be further shortened to

#example {
margin: 0 1px 2px;
}

this will give the margin properties of

#example {
margin-top: 0;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 2px;
}

also using only two values in the shorthand will give

#example {
margin: 0 1px;
}

versus

#example {
margin-top: 0;
margin-right: 1px;
margin-bottom: 0;
margin-left: 1px;
}

Finally only using one value in shorthand will give a uniform value for all four declarations of the delimeter.

3. Abandon Inline styles and migrate to external sheets

Using external style sheets will allow for your web pages to load faster, less code = less time.
By grouping common styles in classes together in a separate file the mark-up language used to generate each page is reduced and not repeated making redesign and maintenance easier and less of a headache for you later on.
To use an external style sheet simply place the following code within the head portion of your html document.

<style type=”text/css”>@import url(monochrome.css);</style>

Javascript Year Script - Copyright update

Maintenance and Updatability of webpages are a high priority, with a little JavaScript your pages can be self-updating.

Create a new JavaScript file, call it jsyear.js and type the following code.

var theDate=new Date()

document.write(theDate.getFullYear())

Add the script to your footer

<div id=”footer”>&copy; Your Name 2000-<script type=”text/javascript” src=”jsyear.js”>, All rights Reserved</div>

This will call each time the page is loaded to get the current year and display the year in your footer, the script is useful were lots of pages have been created and the laborious task of correcting the year is needed.

IE6 - Time to put the old dog down

With fancier newer and fresher browsers isn’t it time you let go of IE6 and embrace better browsers.
Old IE6 is a nightmare for cross browser relations, it takes up to 20% of the market share and renders websites awfully, leaving designers with headaches.

CSS Hacks and tricks are needed to get the site to look identical to each other browser.
Why not save developers and designers precious time and resort to a newer more accessible browser like Firefox 3, Chrome, Safari or Opera.

CSS - Hacks and Tricks (IE6)

Here are a few hacks and filters that can help IE6 render your webpage.

1. Conditional comment hack/filter

<!--[if IE6]>

/*insert style declarations (these will only be seen by microsoft IE6 browser)*/

width:200px;

<![endif]-->

2. Tan hack

*html .boxModel {

width: 230px;

width: 200px;

height: 130px;

height: 100px;

}

The backslash within the height and width is not readable by IE5 using Windows, but does affect IE5 for Mac and IE6 for Windows.

The differences in the two hack filters are more noticeable, the conditional comment filter can support more style declarations than the tan hack. However with both filters they are not valid CSS. The conditional comment can be used in-line and doesn’t invalidate the majority of CSS created.