Any web developer who knows his job well is aware of the fact that the different web browsers interpret CSS properties and rules in a different manner. One way to deal with this problem effectively is to make use of hacks. In certain circumstances, CSS hacks suffer from invalidity. But they perform a vital task of preventing your browser from accessing some parts of your CSS. As a result, your web page looks somehow similar to the one you have intended for.

You can send specific instructions related to minimum width and box model interpretation issues to various browsers. But there is a replacement available to CSS hacks. You can employ CSS3 selectors in the place of hacks to provide directions to certain browsers. Hacks act as a medium for graceful degradation. On the other hand, CSS3 selectors are an example of progressive enhancement. In this technique, you need to write minimum CSS that works well on available browsers. Then write some added or enhanced features for those browsers which have the best support for the CSS rules and properties. So it acts in an opposite manner to graceful degradation.

However, the root cause of most of the problems lies in the Internet Explorer’s bugs. Most of the hacks heavily depend upon bugs present in IE’s CSS parser. These bugs include the CSS parser’s incapability to parse comments in the right manner, leading underscores for properties and the box model hack. But the drawback of these hacks is that they work well with a particular version of IE and when the browser is upgraded, they are nowhere in the sight. An example of the box model hack is shown below.

#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;
}

There is a problem with the above child selector example. It is not understood by all the browsers up to and including IE6. But, IE7 has no trouble supporting this code. You can make use of these properties systematically to improve your designs. 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. Some parts of this specification are compatible with browsers like Mozilla Firefox and Apple Safari, but not IE.

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. So in place of comment hacks, the box model hack or the underscore hack, you can use valid CSS and still accomplish cross-browser support.

Tags: CSS Selectors Replace Hacks