There are a lot of web browsers and user agents in practice. As a web designer or developer, you might have come across how your code is implemented differently in different browsers and user agents. Your code may be displayed correctly in the Firefox browser. But, when it comes to Internet Explorer, you will be for a great surprise as the output will be far from your expectation. You will not get any difference with CSS. On the other hand, table-based layouts offer more consistency as far as different browsers are concerned. That is the reason why table-based layouts are still popular in the web community.

To deal with this cross-browser problem, a large number of designers have been working overtime to develop CSS hacks. The whole concept of CSS hack is based on building an environment where certain web browsers and user agents will be compelled to overlook certain CSS properties. This is done by passing a false code into the CSS file. Most of the problems are found while designing with CSS box model. Internet Explorer versions like 5 and 5.5 use the CSS1 box model in the wrong way by inserting padding and border within the specified width rather than outside. The following example shows the use of CSS hacks to rectify this problem.

.content
{
width: 700px;
padding: 0 100px;
voice-family: “\”}”";
voice-family: inherit;
width: 500px;
}

Although, CSS hacks are getting your work done, this is not a right practice. They work by generating errors in the CSS code. These errors then take advantage of various browser limitations and force them from processing a number of CSS properties and their values. Some of the hacks are not validated by World Wide Web Consortium validator. If you believe in using standards and semantics, then CSS hacks are not the ones you will place in an XHTML file.

Imagine you could distinguish browsers and hand out diverse CSS rules to diverse user agents, devoid of using hacks or conditional comments. Supposing the user or validator never sees the CSS rules specific to other browsers than the one they are making use of. Numerous server side languages can spot browsers just as superior as any CSS hack and in this instance you will use a few easy PHP tricks to finish up your task.

#elem {
width: [IE width];
voice-family: “\”}\”";
voice-family:inherit;
width: [Other browser width];
}

In the above example, the CSS parser of IE ends the declaration block near the ‘}’ in the voice-family value in a wrong fashion. Apart from that, it is also unable to parse the last two declarations. To deal with this problem, we can use a child selector (>). By using it, the declaration blocks can be hidden from IE6. Below is an example of a child selector.

html>body p {
color: blue;
}

Newer browsers will be greatly benefited from those rules as you don’t need to update your CSS again and again. The best place to start your search for valid CSS which certain browsers understand and some others don’t is the CSS3 specification draft. You can build a simple matrix of web browsers and various CSS properties. From this matrix, you can find out which features are supported by browsers and which are not.

Tags: Life without CSS Hacks