Laws of Web Design and Development

2008-06-06T01:31:00.000-07:00

Occasionally smart people say pretty smart things. The computing world likes to call these pearls of wisdom laws. They also like to name each law after the person who coined it. Take, for instance, the most well-known of all the computing world’s laws, Moore’s Law, which is named after Intel founder Gordan E. Moore.

In the web industry we have no such laws. While computer software and engineering is a science, web work isn’t. I view web work as an amalgamation of a variety of crafts and disciplines, like behavioral psychology, art and design, information sciences – and, since the end medium depends on technology, part computer science.

Given that last bit, it makes sense that some computing laws would apply to the world of the web. Since I have an awful time remembering them, I figured I’d write down the ones that have been helpful to me in my career in the web industry.

Brooks’ Law

Adding manpower to a late software project makes it even later.

Probably the law I quote the most. I can’t tell you how many times a client has asked, ” Can’t we just throw another guy at the problem?”

Parkinson’s Law

Work expands so as to fill the time available for its completion.

In other words, we’re talking about ‘scope creep’. Keep projects short and sweet—Otherwise, they tend to become unmanageable beasts.

Hoare’s Law of Large Programs

Inside every large problem is a small problem struggling to get out.

A perfect reminder that we often create larger problems from small ones. Always remember to focus on the goal or need. Everything else is secondary.

Lister’s Law

People under time pressure don’t think faster.

Tell this to any startup and they will probably show you to the door, but it’s very true. The only result you get from putting people under pressure is unnecessary stress. Take a deep breath and avoid letting your stress become someone else’s.

Pareto Principle

For many phenomena, 80% of consequences stem from 20% of the causes.

This is also known as the “80/20 Rule,” though most people seem to use it incorrectly. I don’t know if I fully believe in this principle. I think we often have a false perception that this is true, and therefore tend to focus on 20% of the problem. Or, in other words, the dreaded ‘edge case’.

The Peter Principle

In a hierarchy, every employee tends to rise to his level of incompetence.

This principle comes in to play when dealing with the opinions of overzealous stakeholders. It can be difficult as an employee to publicly admit that you know more about this web stuff than your boss, but it must be done.

Conway’s Law

Any piece of software reflects the organizational structure that produced it.

This law is absolutely true of websites as well. Organizations that have bad communication or poorly defined roles invariably have websites that take more time and cost way more then they should.

Fitts’ Law

The time taken to acquire a target is a function of the distance to and the size of the target.

This one seems to be a favorite with speakers at web conferences, and is a handy reminder of the principals behind information and visual design.

Tesler’s Law of Conservation as Complexity

You cannot reduce the complexity of a given task beyond a certain point. Once you’ve reached that point, you can only shift the burden around.

A good principle of information architecture. Complex tasks tend to be broken up and can often become more confusing in the process. Identify the hard stuff early on and treat it differently than everything else.

Occam’s Razor

The explanation requiring the fewest assumptions is most likely to be correct.

This principle is helpful when you are trying to understand human behavior. Sometimes things just work. You may not think this is right, and you may not understand why, but when something works you should just go with it.

Hofstadter’s Law

A task always takes longer than you expect, even when you take into account Hofstadter’s Law.

Isn’t that the truth. The best trick here is to record your time, so you always have a record to refer to. This gives you a good starting point for estimating how long the next task will take.

Ninety-ninety Law

The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.

The law is absolutely true. Once the end is in sight, the finish line tends to drift into the distance. Keeping development milestones short and sweet tends to help. It allows developers to feel like they’ve accomplished something, so they’re not wallowing in a pit of despair.

Hartree’s Law

Whatever the state of a project, the time a project-leader will estimate for completion is constant.

This law always reminds me of the movie Money Pit. Whenever the contractors were asked when the job would be done they’d say, “oh… in about two weeks,” but in reality the project took a year. Trying to set the right completion expectation is always hard. I find just being totally honest with the client goes a long way toward not setting false hopes.

Jakob’s Law of the Internet User Experience

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

Coined by Jakob Nielsen, the King of Sameness. While this statement may read like BS, there is some truth it. People adapt to what they know, and they have certain assumptions about the way things work that cannot be ignored.

Which could also be said this way…

Fisher’s Fundamental Theorem

The more highly adapted an organism becomes, the less adaptable it is to any new change.

Clarke’s Second Law

The only way of discovering the limits of the possible is to venture a little way past them into the impossible.

This one was coined by Author C. Clarke. I think his laws are both keen observations and powerful reminders that we should seek out the unknown, question the assumed truth and constantly push for new discovery and invention.

These are some of my favorite laws, but what are yours?

Event Handling in Javascript

2008-04-17T06:19:00.000-07:00

Event information

As with DHTML, this is always browser specific. When an event is triggered, the browser keeps some information about the event that we can use. There are two ways that browsers use to allow us to access this information. DOM compatible browsers pass the event information to the event handler function as the first argument. Some older browsers also use this version. Internet Explorer and a few other browsers store the event information in an event register, which we can access by writing 'window.event'.

We also have to tell the browser what objects should detect what events and we also have to tell it what to do when that object detects that event.

Although it is hardly used now, you may want the script to work in Netscape 4, since it is capable of doing this. With positioned elements and the document itself, Netscape 4 and Escape 4 will need to be told to capture the events first. Some other browsers (such as Mozilla/Firefox/Netscape 6+) may also provide the methods, but they do not actually do anything. Some others provide them but do not know how to use them, so you should check for the specific Event type as well. For example he simplest code used to listen for a keyup event would just be this:

//Only Netscape 4 and Escape 4 need this first line
if( document.captureEvents && Event.KEYUP ) { document.captureEvents( Event.KEYUP ); }
document.onkeyup = alertkey;
//where alertKey is a function that will handle the event

Problems can arise if one element detects an event where a parent element also detects it. For example, if the document is told to detect when the user presses a key, and a text box in the document is also told to detect when the user presses a key, when the user presses a key in the text box, should the document react or the text box? Or both? And in what order? Some browsers will use capturing to say which element(s) should detect the event and in what order, while some will use bubbling, and many will do neither. I will not describe either of these here as they are far beyond the scope of this stage of the tutorial. I will cover them later in the DOM events part of the tutorial.

For a full list of events that elements can detect cross-browser, see the section on The JavaScript object' subsection 'Standard document components. To see what events can be captured using captureEvents, see the same section, subsection 'window.Event. To see what information is passed about events, see the same section, sub section 'Event objects.

The following examples attempt to solve as many problems as possible.
Detecting the keyup event over the page and extracting the key code.

* Konqueror 3.3-, Safari 1.0 and NetFront 3.3- can only detect key events on text boxes.
* iCab 3- only passes key code information in input boxes.
* Blazer (a version of NetFront) detects limited key events (due to the keyboard handling on the device) and returns nonsense key codes (such as -1987304).
* WebTV and Escape 4 can only detect key events on text boxes, and may be a little unreliable.
* OmniWeb 4.2- and Opera 5 for Mac do not pass key code information.
* Netscape 4 on Linux does not detect any key events properly.
* Clue browser and Tkhtml Hv3 cannot detect key events.
* I am unsure of the capabilities of NetBox, iPanel MicroBrowser and OpenTV here.

Note that browsers may give different key code numbers for keypad keys. Also, many browsers do not give key code numbers for control keys (like F1, delete, backspace, alt, arrow keys etc.). Netscape gives a different key code for the letter 'a' to all other browsers. It may be more useful to use String.fromCharCode(key_code) which converts the key code back to its relevant key (like 'G', for example).

//first, tell the browsers to react to the event
if( document.captureEvents && Event.KEYUP ) {
//remove this part if you do not need Netscape 4 to work
document.captureEvents( Event.KEYUP );
}
/* this next line tells the browser to detect a keyup
event over the whole document and when it detects it,
it should run the event handler function 'alertkey' */
document.onkeyup = alertkey;

//now create the event handler function to process the event
function alertkey(e) {
if( !e ) {
//if the browser did not pass the event information to the
//function, we will have to obtain it from the event register
if( window.event ) {
//Internet Explorer
e = window.event;
} else {
//total failure, we have no way of referencing the event
return;
}
}
if( typeof( e.keyCode ) == 'number' ) {
//DOM
e = e.keyCode;
} else if( typeof( e.which ) == 'number' ) {
//NS 4 compatible
e = e.which;
} else if( typeof( e.charCode ) == 'number' ) {
//also NS 6+, Mozilla 0.9+
e = e.charCode;
} else {
//total failure, we have no way of obtaining the key code
return;
}
window.alert('The key pressed has keycode ' + e +
' and is key ' + String.fromCharCode( e ) );
}

Test it here: Click this link to start / stop keyup detection then press any key to test this script. Note that some keys give VERY odd responses with String.fromCharCode. The only reliable ones are letter and number keys on the main part of the keyboard.
Detecting the mouse coordinates when it moves over a positioned element

* In Internet Explorer, the mouse position will be offset by the thickness of the window border (which can detect mouse movements as if it were the page body). On Windows XP, this would typically be 2 pixels for the default and classic themes (meaning when the mouse is at 0,0 it will be reported as 2,2), and 0px in fullscreen mode, but it can be different for other themes or operating systems. There is no known workaround for this bug.
* iCab 2- cannot detect mouse events over the page itself, only over specific elements within it (such as links).
* WebTV only detects mouse events over links.
* OmniWeb 4.2- does not provide any information about events.
* Clue browser only detects mousedown/up events, and only over links.
* I am unsure of the capabilities of NetBox, iPanel MicroBrowser and OpenTV here.

There are three ways that are reliably supported which give mouse coordinates. There is also one unreliable way. All are given as properties of the event object, such as eventObject.clientX. These will be used to obtain the coordinates relative to the entire page.

With clientX/Y, the standard was not very well written, so some older browsers made mistakes when implementing it. The coordinates should be relative to the displayed portion of the page, but Opera 6-, Konqueror 2- and iCab 2- give the coordinates relative to the entire page. There is no easy way to detect if a browser supports it correctly and the only way to write this piece of script is to detect the browsers that do not comply with the standard and provide appropriate scripts. This is the only time I will tell you to do this.

Clue browser also makes, but as it cannot detect scrolling, there is no need to compensate.

Note that Opera 7+, Konqueror 3+ and iCab 3+ actually comply with the standard, but as they also provides pageX, the script I will show you uses that instead, so again, the problem is avoided.

Opera 6- can be detected because the property 'navigator.userAgent' contains the string 'Opera', even if it is running in IE5 emulation mode. iCab 2- can be detected because its window.ScriptEngine method contains the string 'InScript', even if it is running in emulation mode. Konqueror 2 can be detected because the property 'navigator.vendor' is 'KDE', even if it is running in emulation mode.

1. If pageX/Y is supplied, pageX/Y is relative to the whole page, and is completely reliable.
2. If clientX/Y is supplied, clientX/Y should be relative to displayed portion of page (DOM compatible).
3. Sometimes clientX/Y is relative to the whole page (in browsers that did not implement the specification properly).

Most browsers provide both pageX/Y and clientX/Y. Internet Explorer is the only current browser that provides clentX/Y, but not pageX/Y.

See the last section, 'Window size and scrolling', for information on how to detect how far the page has been scrolled. See the section on 'DHTML', for how to reference the positioned element.

if( myReference.captureEvents && Event.MOUSEMOVE ) {
//remove this part if you do not need Netscape 4 to work
myReference.captureEvents( Event.MOUSEMOVE );
}
myReference.onmousemove = alertCoord;

function alertCoord(e) {
if( !e ) {
if( window.event ) {
//Internet Explorer
e = window.event;
} else {
//total failure, we have no way of referencing the event
return;
}
}
if( typeof( e.pageX ) == 'number' ) {
//most browsers
var xcoord = e.pageX;
var ycoord = e.pageY;
} else if( typeof( e.clientX ) == 'number' ) {
//Internet Explorer and older browsers
//other browsers provide this, but follow the pageX/Y branch
var xcoord = e.clientX;
var ycoord = e.clientY;
var badOldBrowser = ( window.navigator.userAgent.indexOf( 'Opera' ) + 1 ) ||
( window.ScriptEngine && ScriptEngine().indexOf( 'InScript' ) + 1 ) ||
( navigator.vendor == 'KDE' );
if( !badOldBrowser ) {
if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//IE 4, 5 & 6 (in non-standards compliant mode)
xcoord += document.body.scrollLeft;
ycoord += document.body.scrollTop;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE 6 (in standards compliant mode)
xcoord += document.documentElement.scrollLeft;
ycoord += document.documentElement.scrollTop;
}
}
} else {
//total failure, we have no way of obtaining the mouse coordinates
return;
}
window.alert('Mouse coordinates are ('+xcoord+','+ycoord+')');
}

Test it here: pass your mouse over this link to obtain its coordinates.

To detect mouse coordinates over the whole document, use document instead of myReference.

Since all the problematic old browser versions have now been replaced with versions that work correctly, you may want to remove the sniffer, and keep the code clean. You may not want to do this if there is a chance that any of your visitors are using those older versions. If that is not a problem for you, you could use this code instead:

document.onmousemove = alertCoord;

function alertCoord(e) {
var xcoord, ycoord;
if( !e ) { e = window.event; }
if( !e ) { return; }
if( typeof( e.pageX ) == 'number' ) {
xcoord = e.pageX;
ycoord = e.pageY;
} else if( typeof( e.clientX ) == 'number' ) {
xcoord = e.clientX;
ycoord = e.clientY;
if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
xcoord += document.body.scrollLeft;
ycoord += document.body.scrollTop;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
xcoord += document.documentElement.scrollLeft;
ycoord += document.documentElement.scrollTop;
}
} else { return; }
window.alert('Mouse coordinates are ('+xcoord+','+ycoord+')');
}

Detecting mouse buttons

* Konqueror, Safari, OmniWeb 4.5+, iCab 3+, Tkhtml Hv3 and Escape 4 do not detect right clicks.
* Opera users can choose to allow scripts to detect right clicks - disabled by default.
* WebTV, iCab 2-, NetFront 3.3- and Clue browser do not pass information about mouse buttons.
* WebTV cannot detect mousedown or mouseup events.
* OmniWeb 4.2- does not provide any information about events.
* I am unsure of the capabilities of NetBox, iPanel MicroBrowser and OpenTV here.

This example gives two methods for detecting then handling events with an link element. One is written using the standard HTML syntax and one of which is written using JavaScript syntax. It will extract the mouse button that triggered the event. Note: this may not work with 'click' events.

There is also the oncontextmenu event that fires in a few browsers when a user activates their context menu, but that is not the same thing, since it also covers Ctrl+Click on Macs, and the context menu key on Windows and Linux/UNIX (and is also not very well supported).

The mouse button is passed using either the which or button properties. With 'which', 1 is left button, 2 is middle button, 3 is right button. With button, the standard says that 0 is left button, 1 is middle button, 2 is right button, but in IE compatible browsers, 1 is left button, 4 is middle button, 2 is right button. Escape/Evo 5 uses a totally different numbering system, 1 is left button, 2 is middle button, 0 is right button - I suggest you ignore Escape/Evo.

The only time you should ever detect a button is when you want, for example, to create a drag-drop type effect, and you want to ensure they are using the left (normal dragging) button. You should never abuse it to break the user's context menu, as that will only make your site inaccessible, and annoying for your users, and is not reliable anyway.

The event registration attribute (onmouseup="etc.") is equivalent to an event handler function, and has access to all the usual function information, such as the attributes collection. It can get a bit messy writing all of the button detection code in there, so I want to pass it to the main handler function. Remember that in DOM compatible browsers, the first argument is the event, so I need to pass that too. I also want the handler to have access to the element that triggered the event so I must pass that.

Gmail Will Get Cracked Soon

2008-03-04T23:16:00.000-08:00

It has emerged, not long after a group of hackers cracked the Windows Live Mail’s CAPTCHA, Google’s Gmail CAPTCHA has also been hacked (possibly by the same group).

Hacking Gmail is a huge scalp for the hackers, it gives them:

* use of the gmail.com domain name — a domain name that is unlikely to be blacklisted by spam filters.
* access to a wide range of Google services
* hacker kudos

Not to mention; due to the volume of Gmail users - they are going to be hard to track.

Should we worry about this?
Yes and no.

Google will undoubtedly fix the immediate threat, but the bigger issue is that CAPTCHAs are being hacked more and more successfully. For instance, since July 2007 the HotLan Trojan has created more than 500,000 spam email accounts with Hotmail, Yahoo! and Gmail.

With no end in sight for the arms race between the hackers and developers. CAPTCHA’s days seem numbered, (I for one would be happy to see the death of the CAPTCHA [as it currently stands]). But, what will be the next solution?

What methods are developers going to have to introduce to combat the hackers?

Microsoft Backflips on Browser Version Targeting

2008-03-04T23:06:00.000-08:00

I had to double-check today’s date when I loaded up the IEBlog this morning.

Once I’d confirmed that it in fact wasn’t April 1st, I continued reading, transfixed. Dean Hachamovitch, General Manager of Internet Explorer, had announced that Microsoft had changed their mind about browser version targeting.

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously. Microsoft recently published a set of Interoperability Principles. Thinking about IE8’s behavior with these principles in mind, interpreting web content in the most standards compliant way possible is a better thing to do.

In addition to referencing Microsoft’s recent public commitment to interoperability, he also cited feedback from the community as a factor in the decision. He was careful to remind developers of the reasons why Microsoft were initially convinced that defaulting to IE7’s Standards rendering mode was the only option — a decision made in consultation with the Web Standards Project and leading figures like the king of web standards himself.

The fact that Microsoft have taken this decision signifies a couple of things:

* That they take this interoperability business seriously. …

Table-Based Layout Is The Next Big Thing

2008-03-04T22:36:00.000-08:00

With the release of IE8 coming this year, the stage is set for all that to change. IE8 will be the last of the major browsers to add support for CSS tables, which will enable designers to use table-based layout techniques without misusing HTML table markup.

This layout is hardly unique; what makes it special is how easily it has been achieved. Rather than using absolute positioning or fragile and counterintuitive floating techniques, I’ve produced it using relatively easy-to-understand CSS tables.

1 #body {
2 border-collapse: collapse;
3 display: table;
4 table-layout: fixed;
5 }

The css given below the best example for the table based layout using CSS

1 #navigation, #content, #sidebar {
2 display: table-cell;
3 }
4 #navigation {
5 width: 200px;
6 }
7 #content {
8 width: 66%;
9 }
10 #sidebar {
11 width: 33%;
12 }

Not only is this code exceedingly simple, but the result is also far more robust than your typical three-column layout achieved with earlier CSS layout techniques. Each column extends the full height of the page no matter which column has the most content, and the layout doesn’t fall apart at extreme font or window sizes. The layout just works—in the same way that HTML table-based layouts have always just worked.

As soon as IE8 is out and we can begin to justify leaving IE7 behind, we can start to use these simple and powerful techniques, since all other major browsers already support CSS tables. Suddenly, CSS-based page layout will be something almost anyone can understand!

Of course, we can’t just throw away current CSS layout techniques the day IE8 is released, can we? After all, IE7 and its predecessors will be around for years to come. If you want your site to look as good in those browsers, you’ll still have to break out the more complex and fragile layout techniques that work with them.

But if you can justify letting the experience slip just a little for users of IE7 and earlier, you may be able to minimize the amount of twisty CSS you need in your site. If you view the above example in IE7, for instance, you’ll see a simplified, two-column version of the layout that avoids the need to mix pixel-width columns with percentage-width columns, thus simplifying the code required to make the layout work in IE7 and earlier.

Show Icon In Address Bar

2008-02-28T03:13:00.000-08:00

Add the following code inside the link tag

LINK hef="../../i/g/cached/tmp10_dup_4c3eab9f79bef8e5973617b25abed5d0.ico" rel="shortcut icon"

Scrolling Title Bar Using Javascript

2008-02-28T03:12:00.000-08:00

Page Load & Unload Effect

2008-02-28T03:10:00.000-08:00

Use the following two line inside the meta tag

META http-equiv=Page-Enter content=revealTrans(Duration=1.0,Transition=30)
META http-equiv=Page-Exit content=revealTrans(Duration=1.0,Transition=30)

Page Fading While Moving Previous Page

2008-02-28T03:08:00.000-08:00

Use the following line the meta tag

meta equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(duration=.3)"

Open New Window

2008-02-28T03:07:00.000-08:00

function PopUpWindow(tURL,Width,Height)
{
var Options = "width=" + Width + ",height=" + Height;
window.open(tURL,'',Options);
}

Find Current Browser

2008-02-28T03:06:00.000-08:00

var Browser = navigator.appName;
var Net = Browser.indexOf("Netscape")
var Micro = Browser.indexOf("Microsoft")

Netscape = false
IE = false

if(Net >= 0)
{
Netscape = true
alert("You're using Netscape")
}

if(Micro >= 0)
{
IE = true
alert("You're using Internet Explorer")
}

Encrypting the URL

2008-02-28T02:38:00.000-08:00

Check whether textbox is empty or not

2008-02-28T02:35:00.000-08:00

Simpl Intrest Calculation

2008-02-27T04:14:00.000-08:00

function calculate(amount,years,rate)
{
var getamount = document.getElementById(amount);
var getyears = document.getElementById(years);
var getrate = document.getElementById(rate);
var getmontrate = document.getElementById("monthpay");
var getonlyrate = document.getElementById("onlyintrest");
var getamt = getamount.value;
var getyer = getyears.value;
var getrat = getrate.value;
var getmonth = getmontrate.value;
var getonly = getonlyrate.value;
var rateperyear = getrat / 100;
var si = getamt * rateperyear * getyer;
var numofmonth = getyer * 12;
var onlyintrest = si / numofmonth;
getonlyrate.value = onlyintrest;

var R = getrat / 100;
var p = ((getamt*R)/12) * (1/(1-(Math.pow(1/(1+R),getyer))));
getmontrate.value = p;
}

Enable Button Using Checkbox Action

2008-02-27T04:10:00.000-08:00

function disable_enable()
{
if (document.all || document.getElementById)
{
if (document.test1.test2.disabled==true)
document.test1.test2.disabled=false
else
document.test1.test2.disabled=true
}
}

Body Mass Index Calculation

2008-02-27T04:02:00.000-08:00

function calc()
{
with (Math)
{
var weight = 1*document.forms.f.weightfield.value;
var height = 12*document.forms.f.feetfield.value + 1*document.forms.f.inchfield.value;
var bmi = weight/2.2/(pow((height*0.0254),2));
bmi = round(10*bmi)/10;
document.forms.f.bmifield.value=bmi.toString();
var waist = 1*document.forms.f.waistfield.value;
var wthr = waist/height*100;
wthr = round(10*wthr)/10;
document.forms.f.whtrfield.value=wthr.toString();
var sex = 1*document.forms.f.sexbutton.value;
var fat = (sex==1) * 100*(-98.42 + 4.15*waist - 0.082*weight)/weight +
(sex==0) * 100*(-76.76 + 4.15*waist - 0.082*weight)/weight;
fat = round(fat*10)/10;
document.forms.f.fatfield.value=fat.toString();
var area = pow(height * weight/3131, 0.50);
area = round(area*100)/100;
document.forms.f.areafield.value=area.toString();
var age = 1*document.forms.f.agefield.value;
var bmr = (sex==1)*(13.75*weight/2.2 + 5.003*height*2.54 - 6.775*age + 66.5) +
(sex==0)*(9.563*weight/2.2 + 1.850*height*2.54 - 4.676*age + 655.1);
bmr = round(bmr);
document.forms.f.bmrfield.value=bmr.toString();
var willwt = pow(height,3)/1906;
willwt = round(willwt);
document.forms.f.willwtfield.value=willwt.toString();
var willwaist = height*0.4584;
willwaist = round(willwaist*10)/10;
document.forms.f.willwaistfield.value=willwaist.toString();
}
}

CSS Tips & Tricks

2008-02-27T02:03:00.000-08:00

Use CSS shorthand
To save space and make your CSS files easier to read I recommend using shorthand syntax to declare several properties in a single declaration.

Specify a unit unless the value is 0
In HTML you can get away with that, but in CSS all length values must have a unit.

Remember case sensitivity
I recommend always using lowercase for element names in CSS selectors.

Specifying colours
when you use hexadecimal colour notation and a colour is made up of three pairs of hexadecimal digits, you can write it in a more efficient way by omitting every second digit:

#000 is the same as #000000, #369 is the same as #336699.

Eliminate element types for class and id selectors
When writing selectors that target an element with a certain class or id value, you can omit the element type before the . (class selector) or # (id selector).

So, instead of writing

1. div#continer
2. fieldset.wholecontent

you can write

1. #continer
2. .wholecontent

and save a few bytes for each selector.

Default values
You can often eliminate the need to specify a value for a property by taking advantage of that property’s default value.

Don’t redeclare inherited values
Be aware that some properties may be overridden by browser specific user agent style sheets

Take advantage of the cascade

Multiple class names
You can assign multiple class names to an element. This allows you to write several rules that define different properties, and only apply them as needed.

Use descendant selectors

Avoid quoting URLs

Group selectors

When several element types, classes, or id:s share some properties, you can group the selectors to avoid specifying the same properties several times.

Specify link styles in the right order
When applying CSS to the different states of a link you need to think about the order of the rules. In most cases you’ll want to specify them in the order :link :visited :hover :active.

Clearing floats
A very common CSS problem is how to handle the situation that occurs when you have a floated object in a container and do not want that object to stick out of the bottom of the container. A typical example is floating a tall image within the main body text. If there is not enough text to cover the entire height of the image, the image will extend out of the box it is in. Sometimes that is what you actually want, sometimes it isn’t.
The traditional way of controlling this has been to add an extra element, either a div or a br element, inside the element that you want to contain any floated descendants and style it to clear:both. Adding extra markup is a bit ugly, but luckily there is a method that eliminates the need for that

Importing and hiding CSS
A common way of hiding CSS files from old browsers is to use the @import trick. However, the way I see it used most often does not hide the CSS from Internet

Giving Internet Explorer what it needs
There are many CSS hacks that do this, but I tend to use just a couple of them, and only when I can’t find a better, hack-free way to accomplish what I want. With Microsoft’s recent announcement of an upcoming beta release of IE7 for Windows, which may or may not include better support for CSS, and may or may not change the way CSS hacks work, I think the safest way of taking care of IE/Win is to use conditional comments

1.

How big is that box?
When something goes wrong, start by validating your CSS. Anybody can make a type.

CSS coding style
There are many different approaches to the use of indenting, line breaks and whitespace when writing CSS. I’ve been going a bit back-and-forth on that, but I I’ve settled for the following coding style (for now, anyway):

1. selector1,
2. selector2 {
3. property:value;
4. }

Study Script (Javascript & CSS)

Data Entry Job without Registration Fee

Freshen Up Your HTML Markup

,

, etc.) should form a consistent hierarchy: one or more

sections each containing

sections, which in turn may contain

s. Resist the urge to skip heading levels (e.g. placing a

after a

. All of the sections of the page are then marked with

name="news">News

id="news">News