The conditional CSS and SSI: a new alternative to the browser hacks

If every browser on market would 100% comply to the standards set by the World Wide Web Community, the web-designers and developers would have to write only one single version of HTML and CSS code for all the browsers. But because of the great variety of browsers on market and because every browser complies differently to the standards, the developer must search for a way to make his code work on every browser.

The developer is able to use a great range of hacks that assure the compatibility between the browser standards and the used standards. Also, the @import statement allows the developer to hide the more advanced styles from older browsers, such as Netscape 4.x. But its great disadvantage is the usage of an additional HTTP request in the HEAD section of the document, which is very sensitive to the browser performance.

Basically, there are two techniques that allow the developer change the style of the site according to the type of browser: conditional CSS and conditional SSI. Conditional CSS I a method that allows the developer to include additional CSS styles for browsers, without interacting with the older ones at the expense of additional HTTP requests. On the other hand conditional SSI and the combination of external CSS with JavaScript allows you to use less HTTP requests per page.

Using the CSS hacks is much more complicated in XHTML documents, as they are done in XML. So, they are working with different notions concerning comments and special characters like < and &. Also, some XML parsers tend to totally erase the comments when parsing, so the classic ways of commenting the CSS code in comments in order to hide it from older browsers is not consistently working with XHTML

The conditional server-side includes is a great tool for delivering customized content to browsers and platforms that use different standards. Also, with conditional CSS you can add more CSS rules for the newest browsers without conflicting with the rules set with the older ones. It offers a better alternative for the @import statement and the common used CSS hacks used today, by using less HTTP requests to handle the webpage.